๊ฐ์ฌ๋์ด ์ค์๊ฐ์ผ๋ก ๊ตฌํํด์ฃผ์๋๊ฑธ ๋ณด๊ณ , ์ฝ๋๋ฅผ ๋ฐ๋ผ์ ํ์ดํํ๊ณ , ์์๋๋ก ํ๋ฒ ๋ค์ ์ฝ์ด๋ณด๊ณ ์ฒ์๋ถํฐ ๋ค์ ๊ตฌํํด์ผํ๋ค... ์ด๋ฏธ ์น์ ์ ๋ง๋๋ ๊ณ ์๋์ด ์ด๋ค ์์๋ก ์ง๋์ง, ์ด๋ค๊ฑธ ์ ๊ฒฝ์จ์ ๋ง๋๋์ง ๋ณผ ์ ์๋ ์๊ฐ์ด์๋ค.
1. ํ์ด์ง๋ฅผ ๋ณด๊ณ ๊ตฌํ์ ๋๋ ์ html tag ์์ฑ
- ์น ์ ๊ทผ์ฑ์ ์ํ ํ๋ฉด์ ๋ณด์ด์ง ์๋ ํ๊ทธ๋ ๋งํฌ์ ๋จ๊ณ์์ class="sr-only" ์ฒ๋ผ ์์๋ณผ ์ ์๋ ์์ฑ์ ์ค๋ค. \ - ํ๋ฉด์ ์๋ณด์ด๋ ์ ๋ณด๋ผ๋ ๊ผญ heading์ ๋ฌ์. heading์ ๋ฌ ๋๋ ๋ ผ๋ฆฌ์ ์ธ ํ๋ฆ์ ์๊ฐํด๋ณด๊ณ ๋ฌ์. \ - nav ์์ li์ ๊ฒฝ์ฐ๋ ๋์ค์ js๋ก ๋๋ ์ ๋์ ๋ํ ์ฒ๋ฆฌ๋ฅผ ํด์ค์ผํ๋ฏ๋ก class="on" ์ฒ๋ผ ์ํ์ ๋ํ ํด๋์ค๋ฅผ ๋ฐ๋ก ์ฃผ์. \ - alt๋ ์์ธํ๊ฒ ๋ฌ๋ฉด ์ข๋ค. \ - ๋ณด์ด๋ ์์๋ ์ค์ํ์ง๋ง, ๋ ผ๋ฆฌ์ ์ธ ์์๋ ๊ผญ ์๊ฐํด๋ณด๊ณ ๋งํฌ์ ์ ํ ๋ค css๋ก ์ฎ๊ธฐ์.
2. CSS ํ์ผ ์ฐ๊ฒฐ
/* ์ผ๋ฐ์ ์ธ CSS file ๊ตฌ์กฐ! */ /* setting */ /* animation */ /* utility */ /* reset */ /* layout */ /* design */ /* media query */
์์ 4๊ฐ๋ ์์๊ฐ ๋ฐ๋๊ธฐ๋ ํ๋ค.
3. setting
@media ๋ ํ๊ธ ์ฃผ์์ด ๊นจ์ง์ง ์๋๋ก ํ๋ @charset "utf-8"; ๊ฐ์ ํ๊ทธ๋ค!
4. util
- ๋ง์ค์ ๊ฐ์ ์ฌ๋ฌ๊ฐ์ง ํ๊ทธ์ ์ ์ฉ๋๋ ์์ฑ์ CSS ๋งจ ์์ ์์ฑ๋ค ๋จผ์ ๋ง๋ค๊ณ ํ๊ทธ์ ๋ฌ์์ค๋ค. ์ต์ํด์ง๋ฉด html ๋งํฌ์ ๋จผ์ ์งํํ๊ณ , class๋ฅผ ๋ง๋ค ์ ์์ ๊ฒ ๊ฐ๋ค. (ex. sl-ellipsis)
5. reset CSS
- reset CSS: aํ๊ทธ ์์ฑ์ ์๋ ๊ฒฝ์ฐ๊ฐ ๋ง์์ ์ถ๊ฐํ๊ธฐ.
6. design/style
์ด๋ฒ ํ๋ก์ ํธ์๋ animation์ด๋ layout๊ฐ ๊ฑฐ์ ์๊ณ ๋ฐ๋ก design ์ด์๋ค. ์งํํ๋ฉด์ ๋ค์ ๋ช ๊ฐ์ง ํ๋ค์ ์ ๋ฆฌํ๋ค. | | - ๊ฐ๋ก ์ , ์ธ๋ก ์ , ์์ด์ฝ์ ๊ฐ์ ์์(::before, ::after / background-image)๋ฅผ ์ด์ฉํด์ ์ฃผ๋ ๊ฒ์ด ๊น๋ํ๋ค. border๋ฅผ ์ด์ฉํด์ ์ค๋ ๋์ง๋ง, hr๋ก๋ ์ ๋ ์ฃผ์ง๋ง์. - - style ์ ์ธ์ ํ ๋, ๋ถ๋ชจ ํ๊ทธ๋ ์ ์ด๋ 2๊ฐ๋ ๋ช ์ํด์ ๋์ค์ ์์๊ฐ ์ถ๊ฐ๋ ๋ ์ถฉ๋ํ์ง ์๊ฒ ํ์. - - anchor์ ๊ฒฝ์ฐ ๋งํฌ์ ๋ด์ ๋์ด์ฐ๊ธฐ๊ฐ ์ธ์์ด ๋์ด์ layout์ด ๊นจ์ง ์ ์๋ค. - ๋์ด์ฐ๊ธฐX or float๋ก ํด๊ฒฐํ์. - - Vendor prefix ๋ ์ฌ์ฉํด๋ณด์๋๋ฐ, ๋ธ๋ผ์ฐ์ ๋ณ๋ก ์ง์ํ์ง ์๋ ํ์์ ์ง์ํ๊ฒ ํ๋ ค๋ ๊ฒ. - - naming convention์ ๊ฒฝ์ฐ ์ผํ๊ฒ ๋ ๊ณณ์ ๊ท์น์ ๋ฐ๋ฅด๋ฉด ๋๋ค. - -์์ชฝ ์์์ ํ ๋๋ฆฌ๋ฅผ ์ฃผ๋ ค๋ฉด, ๋ถ๋ชจ์ padding์ ์ฃผ๊ฑฐ๋, ์์์ margin์ ์ค์ ํด๊ฒฐํ๋ค.
CSS Validator ๋ฅผ ์ด์ฉํด์ ์ฌ์ฉํด๋ ๊ด์ฐฎ์ ์์๋ค์ ์ด์ฉํด์ ์งฐ๋์ง ํ์ธํด ๋ณผ ์ ์๋ค.
์น ์ ๊ทผ์ฑ ๊ณ ๋ ค์ ๊ธ์๋ฅผ ์จ๊ธฐ๋ 4๊ฐ์ง ๋ฐฉ๋ฒ
display: none
์ผ๋ก ์จ๊ธฐ๋ฉด screen reader์ ์์ฝํ๋ค..sr-only { text-indent: 1000px; } .sr-only { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .sr-only { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); } .a11y-hidden { position: absolute; overflow: hidden; clip: rect(0,0,0,0); width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; }
skip navigation ๋ง๋ค๊ธฐ.
<div class="nav-skip"> <a href="#cont-nav">์ํ ์ ๋ณด ๋ชฉ๋ก ๋ฐ๋ก๊ฐ๊ธฐ</a> <a href="#cont-company">ํ์ฌ ์ ๋ณด ๋ชฉ๋ก ๋ฐ๋ก๊ฐ๊ธฐ</a> </div>
.nav-skip a { position: absolute; top: -200px; left: 0; width: 160px; border: 1px solid #fff; color: #fff; background: #333; text-align: center; } .nav-skip a:active, .nav-skip a:focus { top: 0; }
์์ Jungle Cinema ๊ตฌํ์ ๋ง์น ๋ค์๋ svg ํ์ผ์ ์์ฑ์ ๋ํด์ ๊ฐ๋จํ๊ฒ ๋ฐฐ์ฐ๊ณ , ์ค์ svg ํ์ผ์ html๋ก ์ด์ด์ ์์ฑ๋ค์ ๋ฐ๊ฟ์ ์์น ๋ ํด๋ณด๊ณ ๊ฐ๋จํ ์ ๋๋ฉ์ด์
๋ ์ฃผ๋ ์๊ฐ์ ๊ฐ์ก๋ค. ๋๋ ์น๊ตฌ์ ๊ทธ๋ฆผ ๊ณ์ ์ ๋ค์ ธ์ ๋ถํ ์๋์์ ํ๋ฝ ๋งก์์ด์ ๊ท์ฌ์ด ๊ฐ์์ฅ์ ์์ ๋ฐ๊พธ๊ณ ์ ๋๋ฉ์ด์
์ ์ด์ฉํด์ ์ด๋์ผ์ค ์๋ฉ ์งค์ ๋ง๋ค์ด๋ณด์๋ค. png๋ฅผ ๋ณํํ๊ฑฐ๋ผ ์์ ๋ ์
ํ ์ ์๋๊ฒ ์์ฌ์ ๋ค.
๊ทธ๋ฆฌ๊ณ ๋์๋ transtion, transform, animation์ ๊ณต๋ถํ๋๋ฐ, #6-2 ์ ๊ฐ๋ ์ ์ ๋ฆฌํด ๋์๋ค. ์ฌ์ค ํด๋น ์์ฑ๋ค์ ์ต์ํ์ง ์์ ๋ฟ ๊ทธ๋ ๊ฒ ์ด๋ ต์ง ์์๋ค.
๋ fake... ๋ง์ง๋ง์ ๋ด์ฃผ์ perspective + transition ์ค์ต์ ๋ณด์ํ๋ 061.html ์นด๋ ๋ค์ง๊ธฐ๊ฐ ์๋์ ์ผ๋ก ์๊ฐ์ ์ก์๋จน์๋ค. ๋๋ฆฌ๋ ๋ฐฉ๋ฒ์ ์์ ํ ํผ์์ ์๊ฐํ ์๋ ์์์ง๋ง, ๊ฒ์ํด๋ณด๊ณ ๋์จ ์ฝ๋๊ฐ ์ดํด๋ ๊ฐ๊ณ ๊ทธ๋๋ก ์ ์๋๋ฐ ์ ๋๋ฉ์ด์
์ ๋ด ์์๋๋ก ์์ง์ด์ง ์์๋ค. ์๊ณ ๋ณด๋ ์์ ์ฝ๋๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๊ณ ์น๋๋ผ ์๋ transition์ ์ค์ผํ๋ ํ๊ทธ๋ณด๋ค ํ๋จ๊ณ ์์ transition์ ์ค์ ๊ทธ๋ฐ๊ฑฐ์๋ค... ์ด๋ด๋๊ฐ ๊ฐ์ฅ ํ๋ฌดํ๋ค...
Q. ์์ด์ฝ์ background-image ์ width, height ๋ฅผ ์ฃผ๋ฉด ์ด๋ฏธ์ง ํฌ๊ธฐ๊ฐ ๊ทธ๊ฑฐ๋ณด๋ค ํด ๋, ๋ฐฐ๊ฒฝ ๋ถ๋ถ์ด ๋์์ ๊ณค๋ํด์ ์ด๋ฏธ์ง ํฌ๊ธฐ ์ค์ฌ์ฃผ๋ ์ฌ์ดํธ์์ ์ค์ฌ์์ ๋ฃ์๋๋ฐ, ์ด๋ ๊ฒ ๋ฃ์ด๋ ๋๋๊ฐ?
A. ๊ฐ๋ฅ์ ํ์ง๋ง ์ฐพ์๋ณด๋ background-size ๋ผ๋ ์์ฑ์ด ์์๋ค.... back-ground-size: 10px 10px;
+) ์ฝ๋ฉํ ๋ ๋์๋๋ chrome extensions
color zilla - ์์ ์ ์ ์์.
heading map - ๋ธ๋ผ์ฐ์ ์ heading ๊ตฌ์กฐ
OpenWax - ์น ์ ๊ทผ์ฑ์ ๊ณ์ฐํด์ค
whatFont - ํฐํธ๋ฅผ ์ ์ ์์.
Page Ruler Redux - margin ๊ฐ ๊ฐ์ ๊ฒ์ px ๋จ์๋ก ์ ์ ์์.
https://placeholder.com - ๋งํฌ ๋ค์ ์ฌ์ด์ฆ๋ฅผ ๋ฃ์ผ๋ฉด ํฌ๊ธฐ์ ๋ง๋ ์ด๋ฏธ์ง ๋ถ๋ฌ์์ค