์ ์ฒด ๊ธ40 CSS Selector ํ์ฌ๊น์ง(๊ธ ์์ฑ์ผ ํ์ฌ) Completed Work๋ก ๊ท๊ฒฉ์ ์ ์๊ฐ ๋๋ ๋ชจ๋ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ์ค ์ฌ์ฉ์ด ๊ฐ๋ฅํ Selectors Level 3 ๊น์ง์ Selector๋ค์ ๋ํด ์ ๋ฆฌํด ๋ณด์์ต๋๋ค.์ด์ http://biew.co.kr/10 ํฌ์คํธ์์์ ๊ฐ์ด selectivizr๋ฅผ ์ด์ฉํ๋ฉด ์ฌ์ฉ ๊ฐ๋ฅํ Selector๋ค์ด ์๊ณ , ์ด๋ฅผ ์ฌ์ฉํ๋ฉด ๋ถํ์ํ ํด๋์ค(ํนํ class="last" ๋๋ class="first" ๋ฑ) ์์ด ์ฌ์ฉ ๊ฐ๋ฅํ๋ฏ๋ก Front-end ๋จ Mark up ์์ฑ์๋ ํธํ๊ณ , Server ๋จ ๊ฐ๋ฐ์์์ ํ์ ๋ ์กฐ๊ธ ๋ ์์ํด ์ง ๊ฒ ์ ๋๋ค. Selector๋ ๋ง์ด ์ดํดํ๊ณ ์์ฉ๋ ฅ์ด ํ๋ถํ ์๋ก ์์ ์ด์์ ๋์์ธ๋ค์ ์ฌํํ๊ณ ์๋ฉํฑํ ๋งํฌ์ ์ ์ด๋ฏธ์ง ์์ด ์ ํ์ค ์๋ ์์ต๋๋ค. (๋ฌผ๋ก .. 2012. 10. 9. css ํต(hack) 1. ๊ธฐ์กด์ ๋ง์ด ์๋ ค์ ธ ์๋ ํต! div {css๋ด์ฉ~\9;}:rood div{css๋ด์ฉ~\9} ์ด ํต์ ์ฐ๋ฉด IE8 ์ดํ ๋ธ๋ผ์ฐ์ (IE6,7)์๋ ์ธ์์ด ๋ฉ๋๋ค.๋ฌธ์ ๊ฐ ์๋ค๋ฉด, ์ผ๋ถ ์คํ์ผ์์๋ ํฌ๋กฌ์๋ ์ ์ฉ์ด ๋๋๋ผ๊ตฌ์~ ์ 'font-family' ์คํ์ผ์์ ๊ทธ๋ฐ ํ์์ ๋ฐ๊ฒฌ ํ์ต๋๋ค. 2. ๊ทธ ๋ค์์ผ๋ก ๋ง์ด ์ฐ๋ ํต! div {css๋ด์ฉ~\0IE8}div {css๋ด์ฉ~\0IE8+9}div {css๋ด์ฉ~\0IE9} IE8, IE8+9, IE9 ๋ก ์กฐ์ ํ๋ฉด ์ ํํด์ ๋ธ๋ผ์ฐ์ ์ ์ฉ์ด ๋ฉ๋๋ค. 3. ํ์ด์ดํญ์ค ํต @-moz-document url-prefix() {div{css ๋ด์ฉ}} 4. ํฌ๋กฌ+์ฌํ๋ฆฌ ํต @media screen and (-webkit-min-device-pixel-ratio:0){.. 2012. 10. 8. sublime text 2 2์ฃผ ์ ์ฏค๋ถํฐ Sublime Text 2๋ฅผ ์ฌ์ฉํด ๋ณด๊ณ ์์ต๋๋ค.๋ค๋ฅธ ๋ถ๋ค ๋ฐ์์ด ์ข์์ ์ฌ์ฉํด ๋ดค๋๋ฐ ๋ฌด์ฒ ๋ง์กฑ์ค๋ฝ์ต๋๋ค. ์ฐ์ , ๊ต์ฅํ ์ฌํํ๋ฉด์๋ ์ด์ฉ๋๋ค. ํนํ, zen-coding, vi key-mapping ๋ฑ Package ์ง์์ด ๋ง์ ๋ญ๋๋ค. ๋ผ์ด์ผ์ค๋ฅผ ๊ตฌ์ ํด์ผํ ์ง... ใ ใ ํ๊ฒฝ ์ ํ ๋ฑ ๊ด๋ จ ์ฌํญ๋ค์ Windows XP ๊ธฐ์ค์ผ๋ก ์ ๋ฆฌํด ๋ดค์ต๋๋ค. ์ค์นใ ๋ค์ด๋ก๋ : Windows, OS X, Linux ๋ชจ๋ ์ง์ํฉ๋๋ค. Windows์ ๊ฒฝ์ฐ portable version๋ ์ ๊ณตํฉ๋๋ค.ใ ๋ผ์ด์ผ์ค - ํ์ฌ๋ ๋ฒ ํ ๋ฒ์ ์ผ๋ก ๋ค์ด๋ก๋ ๋ฐ ์ฌ์ฉ์ ๋ฌด๋ฃ์ด๋ ๊ณ์ ์ฌ์ฉํ ๊ฒฝ์ฐ๋ ๋ผ์ด์ผ์ค๋ฅผ ๊ตฌ๋งคํด์ผํ๋ค๊ณ ํฉ๋๋ค. - per-user ๋ผ์ด์ผ์ค์ด๋ฏ๋ก ์ฌ๋ฌ OS ๋๋ ์ฌ๋ฌ ์ปดํจํฐ์์ ์ฌ์ฉ์ด ๊ฐ๋ฅํฉ.. 2012. 10. 4. ๊ฐ๋ก์ธ๋ก ๋น์จ์ ์ ์งํ๋ ๋ฐ์ํ ๋ฐ์ค ๋ฐ์ํ ์น๋์์ธ์์๋ max-width: 100%๋ width: 100%๋ฅผ ํ์ฉํ์ฌ ์ฝํ ์ธ ๊ฐ ์ปจํ ์ด๋์ ๋๋น์ ๋ง๊ฒ ์ ๋์ ์ผ๋ก ๋ณ๊ฒฝ๋๊ฒ ํ๋ ๊ธฐ๋ฒ์ด ๋ง์ด ์ฌ์ฉ๋๋ค. ์ด ๋ ๋์ด๋ ์ฝํ ์ธ ๊ฐ ๊ฐ์ง๊ณ ์๋ ๋์ด๋ฅผ ๋ฐ๋ฅด๊ฒ๋๋ค. ์ปจํ ์ธ ๊ฐ ๊ธ์๋ผ๋ฉด ๋์ด๊ฐ ์ ๋์ ์ด์ด์ผ ํ์ง๋ง ์ด๋ฏธ์ง๋ ๋น๋์ค์ ๊ฒฝ์ฐ์๋ ์ข์ฐ ํญ์ ๋ฐ๋ผ ๋น์จ์ด ์ ์ง๋์ด์ผ ํ๋ค.๊ฐ๋ก๊ฐ 100%๋ก ๋์ด ์๊ธฐ ๋๋ฌธ์ ์ธ๋ก๋ ํผ์ผํธ ๊ฐ์ ์ง์ ํ๋ฉด ๋๊ฒ ์ง๋ง ํผ์ผํธ ๊ฐ์ ์์ ์์์ ๊ฐ์ ์๋์ ์ด๊ธฐ ๋๋ฌธ์ ์์ ์์์ ๋์ด๋ฅผ ์ง์ ํ ์ ์๋ ๊ฒฝ์ฐ๋ผ๋ฉด ํผ์ผํธ๋ก ๋์ด๋ฅผ ์ง์ ํ ์ ์๋ค. ์ด๋ ํจ๋ฉ์ด๋ ๋ง์ง์ ์ด์ฉํด์ ํผ์ผํธ ๊ฐ์ ์ง์ ํ ์ ์๋ค.#movie-player-wrapper { position: relative; width: 100%; height: 0; .. 2012. 9. 27. ์ด์ 1 ยทยทยท 5 6 7 8 9 10 ๋ค์