๊ธ๋ก๋ฒ ์น ๊ฐ๋ฐ ํ๋ก์ ํธ ์ ๋ฐ์ ๊ฑธ์ณ ์ํํ๊ณ ํจ์จ์ ์ธ ์ ํ์ ์ํ CSS ๋ง์ด๊ทธ๋ ์ด์ ๊ท์น ํ๋ก์ธ์ค ๊ตฌํ์ ๋ํ ์ข ํฉ ๊ฐ์ด๋์ ๋๋ค.
CSS ๋ง์ด๊ทธ๋ ์ด์ ๊ท์น: ์ํํ ์ ํ ํ๋ก์ธ์ค ๊ตฌํ
์น ๊ฐ๋ฐ์ ์ญ๋์ ์ธ ์ธ๊ณ์์ ์ฝ๋๋ฒ ์ด์ค๋ฅผ ์ต์ ์ํ๋ก ํจ์จ์ ์ผ๋ก ์ ์งํ๋ ๊ฒ์ ๋ฌด์๋ณด๋ค ์ค์ํฉ๋๋ค. ์ด์ ์ค์ํ ์ธก๋ฉด ์ค ํ๋๋ ์ข ์ ์คํ์ผ ์ํธ(CSS) ๊ด๋ฆฌ์ ๋๋ค. ํ๋ก์ ํธ๊ฐ ๋ฐ์ ํจ์ ๋ฐ๋ผ CSS ๋ฐฉ๋ฒ๋ก , ํ๋ ์์ํฌ ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก๋ ๋ฐ์ ํฉ๋๋ค. ์ด๋ฅผ ์ํด์๋ ์ข ์ข CSS ๋ง์ด๊ทธ๋ ์ด์ ์ด ํ์ํ๋ฉฐ, ์ด๋ ์ฌ์ํ ์ ๋ฐ์ดํธ๋ถํฐ ์คํ์ผ๋ง ์ํคํ ์ฒ์ ์์ ํ ์ฌ๊ตฌ์ถ์ ์ด๋ฅด๊ธฐ๊น์ง ๋ค์ํ ์ ์์ต๋๋ค. ์ด ๊ฐ์ด๋์์๋ ๊ธ๋ก๋ฒ ๊ฐ๋ฐ ํ์ ์ํ ์ํํ๊ณ ํจ๊ณผ์ ์ธ ์ ํ์ ๋ณด์ฅํ๋ CSS ๋ง์ด๊ทธ๋ ์ด์ ๊ท์น์ ์ค์ง์ ์ธ ๊ตฌํ์ ์ค์ ์ ๋ก๋๋ค.
CSS ๋ง์ด๊ทธ๋ ์ด์ ์ ํ์์ฑ ์ดํด
๊ตฌํ ์ธ๋ถ ์ฌํญ์ ๋ค์ด๊ฐ๊ธฐ ์ ์ CSS ๋ง์ด๊ทธ๋ ์ด์ ์ด ์ข ์ข ํ์ํ ์์ ์ธ ์ด์ ๋ฅผ ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ๋ช ๊ฐ์ง ์์ธ์ด ์ด ํ์์ฑ์ ์ ๋ฐํ ์ ์์ต๋๋ค.
- ๊ธฐ์ ๋ฐ์ : ์๋ก์ด CSS ๊ธฐ๋ฅ, ์ฌ์ ์ฒ๋ฆฌ ๊ธฐ๋ฅ(Sass ๋๋ Less์ ๊ฐ์) ๋๋ CSS-in-JS ์๋ฃจ์ ์ด ๋ฑ์ฅํ์ฌ ๋ ๋์ ์ฑ๋ฅ, ์ ์ง ๊ด๋ฆฌ์ฑ ๋ฐ ๊ฐ๋ฐ์ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
- ํ๋ ์์ํฌ ์ ๋ฐ์ดํธ: ํ๋ก ํธ์๋ ํ๋ ์์ํฌ(์: React, Vue, Angular)๋ฅผ ์ฑํํ๊ฑฐ๋ ์ ๊ทธ๋ ์ด๋ํ ๋ ํด๋น ์คํ์ผ๋ง ๊ท์น ๋๋ ๋ด์ฅ ์คํ์ผ๋ง ์๋ฃจ์ ์ CSS ๋ง์ด๊ทธ๋ ์ด์ ์ด ํ์ํ ์ ์์ต๋๋ค.
- ์ฝ๋๋ฒ ์ด์ค ๋น๋ํ ๋ฐ ๊ธฐ์ ๋ถ์ฑ: ์๊ฐ์ด ์ง๋จ์ ๋ฐ๋ผ CSS๋ ์ค๋ณต ์คํ์ผ, ํน์์ฑ ๋ฌธ์ ๋ฐ ๋ช ํํ ๊ตฌ์ฑ ๋ถ์กฑ์ผ๋ก ์ธํด ๊ด๋ฆฌํ๊ธฐ ์ด๋ ค์์ง ์ ์์ต๋๋ค. ๋ง์ด๊ทธ๋ ์ด์ ์ ์ด๋ฌํ ๊ธฐ์ ๋ถ์ฑ๋ฅผ ํด๊ฒฐํ ๊ธฐํ์ ๋๋ค.
- ์ฑ๋ฅ ์ต์ ํ: ๋นํจ์จ์ ์ธ CSS๋ ํ์ด์ง ๋ก๋ ์๊ฐ์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ๋ง์ด๊ทธ๋ ์ด์ ์ ํตํด ์ฌ์ฉํ์ง ์๋ ์คํ์ผ์ ์ ๊ฑฐํ๊ณ , ์ ํ์๋ฅผ ์ต์ ํํ๊ณ , ํต์ฌ CSS์ ๊ฐ์ ๋ ์ฑ๋ฅ ์ข์ ๊ธฐ์ ์ ์ฑํํ ์ ์์ต๋๋ค.
- ๋ธ๋๋ ๋๋ ๋์์ธ ์์คํ ์ ๋ฐ์ดํธ: ์ฃผ์ ๋ฆฌ๋ธ๋๋ฉ ๋๋ ์ ๋์์ธ ์์คํ ๊ตฌํ์๋ ์ ์๊ฐ์ ์ง์นจ์ ๋ง์ถ๊ธฐ ์ํด ๊ธฐ์กด CSS์ ์์ ํ ์ฌ๊ตฌ์กฐํ๊ฐ ํ์ํ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค.
- ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ ๋ฐ ์ฅ์น ํธํ์ฑ: ๋ค์ํ ๋ธ๋ผ์ฐ์ ๋ฐ ์ฅ์น ์ ๋ฐ์ ๊ฑธ์ณ ์ผ๊ด๋ ์คํ์ผ๋ง์ ๋ณด์ฅํ๋ ๊ฒ์ ์ง์์ ์ธ ๊ณผ์ ์ ๋๋ค. ๋ง์ด๊ทธ๋ ์ด์ ์๋ ์ต์ ํธํ์ฑ ํ์ค์ ์ถฉ์กฑํ๋๋ก CSS๋ฅผ ์ ๋ฐ์ดํธํ๋ ๊ฒ์ด ํฌํจ๋ ์ ์์ต๋๋ค.
CSS ๋ง์ด๊ทธ๋ ์ด์ ๊ท์น ์ ์: ์ฑ๊ณต์ ๊ธฐ๋ฐ
์ ์ ์๋ CSS ๋ง์ด๊ทธ๋ ์ด์ ๊ท์น์ ๋ชจ๋ ์ฑ๊ณต์ ์ธ ๋ง์ด๊ทธ๋ ์ด์ ์ ์ด์์ ๋๋ค. ์ด ๊ท์น ์งํฉ์ ์ ์ฒด ํ๋ก์ธ์ค๋ฅผ ์๋ดํ ์์น๊ณผ ๋ฐฉ๋ฒ๋ก ์ ๊ฒฐ์ ํฉ๋๋ค. ๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์ํด์๋ ๋ช ํํ๊ณ ๋ณดํธ์ ์ผ๋ก ์ดํดํ ์ ์์ผ๋ฉฐ ๋ค์ํ ํ ๊ตฌ์กฐ ๋ฐ ์ํฌํ๋ก์ ์ ์ฉ ๊ฐ๋ฅํ ๊ท์น ์งํฉ์ ๋ง๋๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
CSS ๋ง์ด๊ทธ๋ ์ด์ ๊ท์น ์งํฉ์ ์ฃผ์ ๊ตฌ์ฑ ์์:
- ๋์ ์ํ: CSS์ ์ํ๋ ์ต์ข ์ํ๋ฅผ ๋ช ํํ๊ฒ ์ค๋ช ํฉ๋๋ค. ์ด๋ค ๋ฐฉ๋ฒ๋ก ์ ์ฑํํ ๊ฒ์ธ๊ฐ(์: BEM, ์ ํธ๋ฆฌํฐ ์ฐ์ , CSS ๋ชจ๋)? ์ด๋ค ์ฌ์ ์ฒ๋ฆฌ๊ธฐ ๋๋ ์ฌํ ์ฒ๋ฆฌ๊ธฐ๋ฅผ ์ฌ์ฉํ ๊ฒ์ธ๊ฐ? ์์๋๋ ํ์ผ ๊ตฌ์กฐ๋ ๋ฌด์์ธ๊ฐ?
- ๋ง์ด๊ทธ๋ ์ด์ ์ ๋ต: ์ ๊ทผ ๋ฐฉ์์ ๊ฒฐ์ ํฉ๋๋ค. ๋๊ท๋ชจ ์ฌ์์ฑ, ์ ์ง์ ๋ฆฌํฉํ ๋ง(์: Strangler Fig ํจํด) ๋๋ ๊ตฌ์ฑ ์์๋ณ ๋ง์ด๊ทธ๋ ์ด์ ์ด ๋ ๊ฒ์ธ๊ฐ? ์ ํ์ ํ๋ก์ ํธ ๋ณต์ก์ฑ, ์ํ ํ์ฉ ๋ฒ์ ๋ฐ ์ฌ์ฉ ๊ฐ๋ฅํ ๋ฆฌ์์ค์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋๋ค.
- ๋๊ตฌ ๋ฐ ์๋ํ: ๋ง์ด๊ทธ๋ ์ด์ ์ ๋์์ด ๋ ๋๊ตฌ๋ฅผ ์๋ณํฉ๋๋ค. ์ฌ๊ธฐ์๋ ๋ฆฐํฐ(์: Stylelint), CSS ์ฒ๋ฆฌ๊ธฐ, ๋น๋ ๋๊ตฌ(์: Webpack, Vite) ๋ฐ ์๋ํ๋ ํ ์คํธ ํ๋ ์์ํฌ๊ฐ ํฌํจ๋ ์ ์์ต๋๋ค.
- ๋ช ๋ช ๊ท์น: ์ ํ์, ํด๋์ค ๋ฐ ๋ณ์์ ๋ํ ์๊ฒฉํ ๋ช ๋ช ๊ท์น์ ์ค์ ํฉ๋๋ค. ์ด๋ ํนํ ๋ถ์ฐ ํ์์ ์ผ๊ด์ฑ์ ์ํด ์ค์ํฉ๋๋ค. ์๋ฅผ ๋ค์ด BEM์ ์ฑํํ๋ ๊ฒฝ์ฐ `block__element--modifier` ๊ตฌ์กฐ๋ฅผ ๋ช ํํ๊ฒ ๋ฌธ์ํํฉ๋๋ค.
- ํ์ผ ๊ตฌ์กฐ ๋ฐ ๊ตฌ์ฑ: CSS ํ์ผ์ด ์ด๋ป๊ฒ ๊ตฌ์ฑ๋ ์ง ์ ์ํฉ๋๋ค. ์ผ๋ฐ์ ์ธ ์ ๊ทผ ๋ฐฉ์์๋ ๊ตฌ์ฑ ์์, ๊ธฐ๋ฅ๋ณ ๋๋ ์ํ๋ณ ๊ตฌ์ฑ์ด ํฌํจ๋ฉ๋๋ค. ๋ช ํํ ๊ตฌ์กฐ๋ ์ ์ง ๊ด๋ฆฌ์ฑ์ ํฅ์์ํต๋๋ค.
- ์ฌ์ฉ ์ค๋จ ์ ์ฑ : ๊ธฐ์กด CSS๋ฅผ ์ด๋ป๊ฒ ์ฒ๋ฆฌํ ์ง ์ค๋ช ํฉ๋๋ค. ์ ์ง์ ์ผ๋ก ๋จ๊ณ์ ์ผ๋ก ํ๊ธฐํ ๊ฒ์ธ๊ฐ, ์๋๋ฉด ์๊ฒฉํ ์ข ๋ฃ ๋ ์ง๊ฐ ์์ ๊ฒ์ธ๊ฐ? ์ฌ์ฉ ์ค๋จ๋ ์คํ์ผ์ ์ด๋ป๊ฒ ํ์ํ๊ฑฐ๋ ์ ๊ฑฐํ ๊ฒ์ธ๊ฐ?
- ํ ์คํธ ๋ฐ ๊ฒ์ฆ: ๋ง์ด๊ทธ๋ ์ด์ ๋ CSS๊ฐ ์ด๋ป๊ฒ ํ ์คํธ๋ ์ง ์ง์ ํฉ๋๋ค. ์ฌ๊ธฐ์๋ ์๊ฐ์ ํ๊ท ํ ์คํธ, ํน์ ๊ตฌ์ฑ ์์์ ๋ํ ๋จ์ ํ ์คํธ ๋ฐ ์๋ํ์ง ์์ ์คํ์ผ ๋ณ๊ฒฝ์ด ์๋์ง ํ์ธํ๊ธฐ ์ํ ์๋ํฌ์๋ ํ ์คํธ๊ฐ ํฌํจ๋ฉ๋๋ค.
- ๋ฌธ์ ํ์ค: ์ CSS ์ํคํ ์ฒ, ๋ช ๋ช ๊ท์น ๋ฐ ํน์ ๋ง์ด๊ทธ๋ ์ด์ ๊ทผ๊ฑฐ๋ฅผ ๋ฌธ์ํํ๋ ๊ฒ์ ์ค์์ฑ์ ๊ฐ์กฐํฉ๋๋ค. ์ข์ ๋ฌธ์๋ ๊ธ๋ก๋ฒ ํ์ด ์จ๋ณด๋ฉํ๊ณ ์ผ๊ด์ฑ์ ์ ์งํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค.
CSS ๋ง์ด๊ทธ๋ ์ด์ ํ๋ก์ธ์ค ๊ตฌํ: ๋จ๊ณ๋ณ ์ ๊ทผ ๋ฐฉ์
CSS ๋ง์ด๊ทธ๋ ์ด์ ์ ๊ตฌํํ๋ ค๋ฉด ์ ์คํ ๊ณํ๊ณผ ์คํ์ด ํ์ํฉ๋๋ค. ๊ธ๋ก๋ฒ ํ์ ๊ฒฝ์ฐ ๋ช ํํ ์ปค๋ฎค๋์ผ์ด์ ๊ณผ ํ์คํ๋ ํ๋ก์ธ์ค๊ฐ ์ค์ํฉ๋๋ค.
1๋จ๊ณ: ํ๊ฐ ๋ฐ ๊ณํ
- ๊ธฐ์กด CSS ๊ฐ์ฌ: ํ์ฌ CSS ์ฝ๋๋ฒ ์ด์ค์ ๋ํ ์ฒ ์ ํ ๊ฐ์ฌ๋ฅผ ์ํํฉ๋๋ค. PurgeCSS ๋๋ ์ฌ์ฉ์ ์ ์ ์คํฌ๋ฆฝํธ์ ๊ฐ์ ๋๊ตฌ๋ ์ฌ์ฉํ์ง ์๋ ์คํ์ผ์ ์๋ณํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค. ๊ตฌ์กฐ๋ฅผ ๋ถ์ํ๊ณ , ๋ฌธ์ ์ ์ ์๋ณํ๊ณ , ์ข ์์ฑ์ ๋ฌธ์ํํฉ๋๋ค.
- ๋ฒ์ ์ ์: ๋ง์ด๊ทธ๋ ์ด์ ํ CSS๋ฅผ ๋ช ํํ๊ฒ ์ ์ํฉ๋๋ค. ์ ์ฒด ์คํ์ผ์ํธ์ธ๊ฐ, ์๋๋ฉด ํน์ ๋ชจ๋์ธ๊ฐ? ์ํฅ๊ณผ ๋ณต์ก์ฑ์ ๋ฐ๋ผ ์น์ ์ ์ฐ์ ์์๋ก ์ง์ ํฉ๋๋ค.
- ๋ง์ด๊ทธ๋ ์ด์ ์ ๋ต ์ ํ: ๊ฐ์ฌ ๋ฐ ๋ฒ์์ ๋ฐ๋ผ ๊ฐ์ฅ ์ ์ ํ ๋ง์ด๊ทธ๋ ์ด์ ์ ๋ต์ ์ ํํฉ๋๋ค. ํฌ๊ณ ๋ณต์กํ ์ฝ๋๋ฒ ์ด์ค์ ๊ฒฝ์ฐ ์ ์ง์ ์ธ ์ ๊ทผ ๋ฐฉ์์ด ์ข ์ข ๋ ์์ ํฉ๋๋ค.
- ๋๊ตฌ ์ค์ : ์ฒ์๋ถํฐ ์ CSS ํ์ค์ ์ํํ๊ธฐ ์ํด ๋ฆฐํฐ, ํ์ ์ง์ ๋๊ตฌ ๋ฐ ๋น๋ ๋๊ตฌ๋ฅผ ๊ตฌ์ฑํฉ๋๋ค. ๋ชจ๋ ํ ๊ตฌ์ฑ์์ด ๋๊ตฌ์ ์ก์ธ์คํ๊ณ ์ดํดํ๋์ง ํ์ธํฉ๋๋ค.
- ์ปค๋ฎค๋์ผ์ด์ ์ฑ๋ ์ค์ : ๊ธ๋ก๋ฒ ํ์ ๊ฒฝ์ฐ ํ๋ก์ ํธ ๊ด๋ฆฌ ๋๊ตฌ(์: Jira, Asana) ๋ฐ ์ปค๋ฎค๋์ผ์ด์ ํ๋ซํผ(์: Slack, Microsoft Teams)์ ์ฌ์ฉํ์ฌ ๋ชจ๋ ์ฌ๋์๊ฒ ์ต์ ์ ๋ณด๋ฅผ ์ ๊ณตํฉ๋๋ค. ๋ค๋ฅธ ์๊ฐ๋๋ฅผ ๊ณ ๋ คํ์ฌ ์ ๊ธฐ์ ์ธ ๋๊ธฐํ ํ์๋ฅผ ์์ฝํฉ๋๋ค.
2๋จ๊ณ: ์คํ
- ์ํ์ด ๋ฎ์ ์์ญ๋ถํฐ ์์: ๋ ์ค์ํ๊ฑฐ๋ ๋ ๊ฒฉ๋ฆฌ๋ ๊ตฌ์ฑ ์์๋ถํฐ ๋ง์ด๊ทธ๋ ์ด์ ์ ์์ํฉ๋๋ค. ์ด๋ฅผ ํตํด ํ์ ํต์ฌ ๊ธฐ๋ฅ์ ์ํ์ ๋น ๋จ๋ฆฌ์ง ์๊ณ ์ ๊ท์น๊ณผ ๋๊ตฌ์ ๋ํ ๊ฒฝํ์ ์์ ์ ์์ต๋๋ค.
- ์ ์ง์ ์ผ๋ก ๋ฆฌํฉํ ๋ง: ์ ์๋ CSS ๋ง์ด๊ทธ๋ ์ด์ ๊ท์น์ ์ ์ง์ ์ผ๋ก ์ ์ฉํฉ๋๋ค. ํ ๋ฒ์ ํ๋์ ๊ตฌ์ฑ ์์ ๋๋ ๊ธฐ๋ฅ์ ์ง์คํฉ๋๋ค.
- ์๋ํ ํ์ฉ: ์ ๋์ฌ(Autoprefixer), ์ต์ํ ๋ฐ ๋ฆฐํ ๊ณผ ๊ฐ์ ์์ ์ ์๋ํ ๋๊ตฌ๋ฅผ ์ฌ์ฉํฉ๋๋ค. ๋ค๋ฅธ ๋ฐฉ๋ฒ๋ก ๊ฐ์ ์ด๋ํ๋ ๊ฒฝ์ฐ(์: ๊ธฐ์กด CSS์์ Tailwind CSS๋ก) ์คํ์ผ ๋ณํ์ ์ง์ํ๋ ๋๊ตฌ๋ฅผ ํ์ํฉ๋๋ค.
- ํ์ค์ ๋ฐ๋ผ ์ CSS ์์ฑ: ์ ๊ตฌ์ฑ ์์๊ฐ ๊ฐ๋ฐ๋๊ฑฐ๋ ๊ธฐ์กด ๊ตฌ์ฑ ์์๊ฐ ์ ๋ฐ์ดํธ๋จ์ ๋ฐ๋ผ ์ CSS ๋ง์ด๊ทธ๋ ์ด์ ๊ท์น ์งํฉ์ ์๊ฒฉํ๊ฒ ์ค์ํ๋๋ก ํฉ๋๋ค.
- ๋จ๊ณ์ ์ถ์: ์ ์ง์ ์ธ ๋ง์ด๊ทธ๋ ์ด์ ์ ๋ต์ ์ ํํ ๊ฒฝ์ฐ ๋จ๊ณ์ ์ถ์๋ฅผ ๊ณํํฉ๋๋ค. ์ฌ๊ธฐ์๋ ๊ธฐ๋ฅ ํ๋๊ทธ๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ ํ์ ์งํฉ ์ฌ์ฉ์์๊ฒ ๋ค๋ฅธ CSS ๋ฒ์ ์ ์ ๊ณตํ๋ ๊ฒ์ด ํฌํจ๋ ์ ์์ต๋๋ค.
3๋จ๊ณ: ํ ์คํธ ๋ฐ ๊ฒ์ฆ
- ์๊ฐ์ ํ๊ท ํ ์คํธ: ์๊ฐ์ ํ๊ท ํ ์คํธ(์: Percy, Chromatic ๋๋ Storybook ์ฌ์ฉ)๋ฅผ ๊ตฌํํ์ฌ ์๋ํ์ง ์์ ์๊ฐ์ ๋ณ๊ฒฝ ์ฌํญ์ ํ์ ํฉ๋๋ค. ๋ ๋๋ง์ด ์ฅ์น ๋ฐ ๋ธ๋ผ์ฐ์ ์ ๋ฐ๋ผ ๋ค๋ฅผ ์ ์์ผ๋ฏ๋ก ๊ธ๋ก๋ฒ ์ฌ์ฉ์์๊ฒ๋ ์ด๊ฒ์ด ์ค์ํฉ๋๋ค.
- ๋จ์ ๋ฐ ํตํฉ ํ ์คํธ: ๋จ์ ๋ฐ ํตํฉ ํ ์คํธ๋ฅผ ํตํด ๊ตฌ์ฑ ์์ ์์ค ์คํ์ผ๋ง์ด ์์๋๋ก ์๋ํ๋์ง ํ์ธํฉ๋๋ค.
- ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ ๋ฐ ํฌ๋ก์ค ์ฅ์น ํ ์คํธ: ๋ค์ํ ์ง์ญ์์ ์ธ๊ธฐ ์๋ ๋ค์ํ ๋ธ๋ผ์ฐ์ (Chrome, Firefox, Safari, Edge) ๋ฐ ์ฅ์น(๋ฐ์คํฌํฑ, ํ๋ธ๋ฆฟ, ๋ชจ๋ฐ์ผ ์ ํ)์ ๋ํด ์ฒ ์ ํ ํ ์คํธ๋ฅผ ์ํํฉ๋๋ค. BrowserStack ๋๋ Sauce Labs์ ๊ฐ์ ์๋น์ค๊ฐ ์ฌ๊ธฐ์์ ๋งค์ฐ ์ ์ฉํ ์ ์์ต๋๋ค.
- ์ฑ๋ฅ ๊ฐ์ฌ: CSS ์น์ ๋ง์ด๊ทธ๋ ์ด์ ํ ์ฑ๋ฅ ๊ฐ์ฌ๋ฅผ ์ํํ์ฌ ๋ก๋ ์๊ฐ ๋ฐ ๋ ๋๋ง ๊ฐ์ ์ ํ์ธํฉ๋๋ค.
4๋จ๊ณ: ๋ฐฐํฌ ๋ฐ ๋ชจ๋ํฐ๋ง
- ๋ง์ด๊ทธ๋ ์ด์ ๋ ์ฝ๋ ๋ฐฐํฌ: ๊ฒ์ฆ ํ ๋ง์ด๊ทธ๋ ์ด์ ๋ CSS๋ฅผ ๋ฐฐํฌํฉ๋๋ค. ๊ธฐ์กด ๋ฐฐํฌ ํ์ดํ๋ผ์ธ์ ๋ฐ๋ฆ ๋๋ค.
- ๋ฌธ์ ๋ชจ๋ํฐ๋ง: ๋ฐฐํฌ ํ ์์์น ๋ชปํ ์คํ์ผ๋ง ๊ธ๋ฆฌ์น ๋๋ ์ฑ๋ฅ ํ๊ท์ ๋ํด ์ ํ๋ฆฌ์ผ์ด์ ์ ์ง์์ ์ผ๋ก ๋ชจ๋ํฐ๋งํฉ๋๋ค. ๋ถ์ ๋ฐ ์ค๋ฅ ์ถ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํฉ๋๋ค.
- ํผ๋๋ฐฑ ์์ง: ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ชจ์ ๋ฐ ๋๋์ ๊ดํ ์ฌ์ฉ์ ๋ฐ ๋ด๋ถ ์ดํด ๊ด๊ณ์์ ํผ๋๋ฐฑ์ ์์งํฉ๋๋ค.
CSS ๋ง์ด๊ทธ๋ ์ด์ ์ ์ํ ๊ธ๋ก๋ฒ ๊ณ ๋ ค ์ฌํญ
๊ธ๋ก๋ฒ ํ๊ณผ ํจ๊ป CSS ๋ง์ด๊ทธ๋ ์ด์ ์ ๊ตฌํํ ๋ ๋ช ๊ฐ์ง ํน์ ์์ธ์ ์ธ์ฌํ ์ฃผ์๊ฐ ํ์ํฉ๋๋ค.
- ์๊ฐ๋ ์ฐจ์ด: ๋ชจ๋ ํ ๊ตฌ์ฑ์์ ์์ฉํ๊ธฐ ์ํด ํ์ ๋ฐ ์ปค๋ฎค๋์ผ์ด์ ์ ํจ๊ณผ์ ์ผ๋ก ์์ฝํฉ๋๋ค. ๋น๋๊ธฐ ์ปค๋ฎค๋์ผ์ด์ ๋๊ตฌ๋ฅผ ํ์ฉํ๊ณ ์ค์ํ ์ ๋ณด๊ฐ ๋ฌธ์ํ๋์ด ์ ๊ทผ ๊ฐ๋ฅํ๋๋ก ํฉ๋๋ค.
- ๋์์ธ์ ๋ฌธํ์ ๋์์ค: CSS ์์ฒด๋ ๋ณดํธ์ ์ด์ง๋ง ๋์์ธ ํด์์ ๋ค๋ฅผ ์ ์์ต๋๋ค. ๋์์ธ ์์คํ ๋ฐ ์คํ์ผ๋ง ์์น์ด ๋ช ํํ๊ฒ ์ค๋ช ๋์๋์ง ํ์ธํ๊ณ ๋ฌธํ์ ์ ํธ๋์ ๋ํ ๊ฐ์ ์ ํผํฉ๋๋ค. ์๋๋ ๋ชฉ์ ๊ณผ ํจ๊ป ์์ ์๋ฏธ, ๋ ์ด์์ ์์น ๋ฐ ํ์ดํฌ๊ทธ๋ํผ ์ ํ์ ๋ฌธ์ํํฉ๋๋ค.
- ์ง์ญํ ๋ฐ ๊ตญ์ ํ (i18n/l10n): CSS๊ฐ ๋ค์ํ ์ธ์ด, ํ ์คํธ ๋ฐฉํฅ(์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ vs. ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ) ๋ฐ ํ ์คํธ ํ์ฅ์ ์ด๋ป๊ฒ ์ฒ๋ฆฌํ๋์ง ๊ณ ๋ คํฉ๋๋ค. ์ ์ ํ ๊ฒฝ์ฐ CSS ๋ ผ๋ฆฌ ์์ฑ(์: `margin-left` ๋์ `margin-inline-start`)์ ์ฌ์ฉํฉ๋๋ค.
- ๋คํธ์ํฌ ์ง์ฐ ์๊ฐ ๋ฐ ๋์ญํญ: CSS ํ์ผ ํฌ๊ธฐ๋ฅผ ์ต์ ํํ์ฌ ์ธํฐ๋ท ์ก์ธ์ค๊ฐ ๋ ์์ ์ ์ธ ์ง์ญ์ ์ฌ์ฉ์์๊ฒ ๋น ๋ฅธ ๋ก๋ ์๊ฐ์ ๋ณด์ฅํฉ๋๋ค. ์ฝ๋ ๋ถํ ๋ฐ ํต์ฌ CSS์ ๊ฐ์ ๊ธฐ์ ์ด ํ์์ ์ ๋๋ค.
- ๋ค์ํ ๊ฐ๋ฐ ํ๊ฒฝ: ํ ๊ตฌ์ฑ์์ ์๋ก ๋ค๋ฅธ ์ด์ ์ฒด์ , ๋ก์ปฌ ๊ฐ๋ฐ ์ค์ ๋ฐ ์ ํธํ๋ ํธ์ง๊ธฐ๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ ํํ ๋๊ตฌ ๋ฐ ํ๋ก์ธ์ค๊ฐ ์ด๋ฌํ ํ๊ฒฝ์์ ํธํ๋๋์ง ํ์ธํ๊ฑฐ๋ ๋ช ํํ ์ค์ ๊ฐ์ด๋๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ๋ช ํํ ์ปค๋ฎค๋์ผ์ด์ ๋ฐ ํ์ ๋๊ตฌ: ๊ฐ๋ ฅํ ํ๋ก์ ํธ ๊ด๋ฆฌ ๋ฐ ์ปค๋ฎค๋์ผ์ด์ ๋๊ตฌ์ ํฌ์ํฉ๋๋ค. ๊ณต์ ์ธ์ด(์ด ๊ฒฝ์ฐ ์์ด)๋ก ์ ๊ธฐ์ ์ด๊ณ ๋ช ํํ ์ ๋ฐ์ดํธ๊ฐ ํ์์ ์ ๋๋ค. ์ค์ ์ง์ค์ ๋ฌธ์ ๋ฆฌํฌ์งํ ๋ฆฌ(์: Confluence, Notion)๋ ๋งค์ฐ ์ ์ตํฉ๋๋ค.
์ผ๋ฐ์ ์ธ ํจ์ ๊ณผ ํผํ๋ ๋ฐฉ๋ฒ
๊ฒฌ๊ณ ํ ๊ณํ์ด ์์ด๋ CSS ๋ง์ด๊ทธ๋ ์ด์ ์๋ ์ด๋ ค์์ด ๋ฐ๋ฅผ ์ ์์ต๋๋ค. ์ผ๋ฐ์ ์ธ ํจ์ ์ ์ธ์ํ๋ฉด ์ด๋ฅผ ๋ฐฉ์งํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
- ๋ช ํํ ๋ชฉํ ๋ถ์กฑ: ๋์ ์ํ๊ฐ ์ ์๋์ง ์์ผ๋ฉด ๋ง์ด๊ทธ๋ ์ด์ ์ด ๋ชฉ์ ์์ด ์งํ๋ ์ ์์ต๋๋ค. ํญ์ ์ํ๋ CSS ์ํคํ ์ฒ์ ๋ํ ๋ช ํํ ๋น์ ์ผ๋ก ์์ํ์ญ์์ค.
- ๋ณต์ก์ฑ ๊ณผ์ํ๊ฐ: CSS ์ข ์์ฑ์ ๋ณต์กํ ์ ์์ต๋๋ค. ์์์น ๋ชปํ ์ํฉ์ ํผํ๋ ค๋ฉด ์ฒ ์ ํ ๊ฐ์ฌ๊ฐ ํ์์ ์ ๋๋ค. ๋ง์ด๊ทธ๋ ์ด์ ์ ์๊ณ ๊ด๋ฆฌํ๊ธฐ ์ฌ์ด ๋ถ๋ถ์ผ๋ก ๋๋์ญ์์ค.
- ๋ถ์ถฉ๋ถํ ํ ์คํธ: ํ ์คํธ๋ฅผ ๊ฑด๋๋ฐ๊ฑฐ๋ ์ํํ ํ๋ ๊ฒ์ ์ฌ์์ ์ง๋ฆ๊ธธ์ ๋๋ค. ์๊ฐ์ ํ๊ท ํ ์คํธ ๋ฐ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ ํธํ์ฑ ๊ฒ์ฌ๋ ํ์์ ์ ๋๋ค.
- ๊ธฐ์ ๋ถ์ฑ ๋ฌด์: ๊ธฐ์กด CSS๋ฅผ ์ ๊ตฌ์กฐ๋ก ๋จ์ํ ์ฎ๊ธฐ๊ณ ๋ฆฌํฉํ ๋งํ์ง ์์ผ๋ฉด ๊ธฐ์กด ๋ฌธ์ ๊ฐ ์ง์๋ ์ ์์ต๋๋ค. ๋ง์ด๊ทธ๋ ์ด์ ์ ์ ๋ฆฌํ๊ณ ์ต์ ํํ ๊ธฐํ๋ก ์ฌ์ฉํ์ญ์์ค.
- ํํธ์๋ ์ปค๋ฎค๋์ผ์ด์ : ๊ธ๋ก๋ฒ ํ๊ฒฝ์์๋ ์ด ๋ฌธ์ ๊ฐ ์ฆํญ๋ฉ๋๋ค. ์์น์ ๊ด๊ณ์์ด ๋ชจ๋ ํ ๊ตฌ์ฑ์์๊ฒ ์ต์ ์ ๋ณด๋ฅผ ์ ๊ณตํ๊ณ ๋ฐ์ธ๊ถ์ ๊ฐ๋๋ก ํ์ญ์์ค.
- ํน์ ๋๊ตฌ์ ๋ํ ๊ณผ๋ํ ์์กด: ๋๊ตฌ๋ ์ ์ฉํ์ง๋ง CSS ์์น์ ๋ํ ์ดํด๋ฅผ ๋์ฒดํ ์๋ ์์ต๋๋ค. ํ์ด CSS ๊ธฐ์ด์ ๋ํ ๊ฐ๋ ฅํ ์ดํด๋ฅผ ๊ฐ๋๋ก ํ์ญ์์ค.
- ํ๋ก์ธ์ค ๋ฌธ์ํ ์คํจ: ๊ฒฐ์ , ์ ๊ท์น ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก์ ๋ํ ๊ทผ๊ฑฐ๋ ํฅํ ์ฐธ์กฐ ๋ฐ ์ ํ ๊ตฌ์ฑ์ ์จ๋ณด๋ฉ์ ์ํด ๋ฌธ์ํ๋์ด์ผ ํฉ๋๋ค.
์ฑ๊ณต์ ์ธ CSS ๋ง์ด๊ทธ๋ ์ด์ ์ ๋ต์ ์
๋ค๋ฅธ ์กฐ์ง์ด CSS ๋ง์ด๊ทธ๋ ์ด์ ์ ์ด๋ป๊ฒ ์ ๊ทผํ๋์ง ์ดํด๋ณด๊ณ ์์ฒด ๊ตฌํ์ ๋ํ ์๊ฐ์ ์ป์ผ์ญ์์ค.
- ์ ํธ๋ฆฌํฐ ์ฐ์ CSS (์: Tailwind CSS): ๋ง์ ํ์ฌ๋ค์ด ๊ตฌ์ฑ ์์ ๊ธฐ๋ฐ CSS ๋๋ BEM์์ ์ ํธ๋ฆฌํฐ ์ฐ์ ํ๋ ์์ํฌ๋ก ๋ง์ด๊ทธ๋ ์ด์
ํ์ต๋๋ค. ์ฌ๊ธฐ์๋ ์ข
์ข
๋ค์์ด ํฌํจ๋ฉ๋๋ค.
- ๋์์ธ ํ ํฐ(์์, ๊ฐ๊ฒฉ, ํ์ดํฌ๊ทธ๋ํผ)์ ์ค์ ํ๊ธฐ ์ํ ์ฌ์ฉ์ ์ ์ ๊ตฌ์ฑ ํ์ผ ์ ์
- HTML ์์์์ ๊ธฐ์กด CSS ํด๋์ค๋ฅผ ์ ์ง์ ์ผ๋ก ์ ํธ๋ฆฌํฐ ํด๋์ค๋ก ๊ต์ฒด
- ์ฝ๋๋ฒ ์ด์ค๋ฅผ ์ค์บํ์ฌ ์ต์ ํ๋ ์ ํธ๋ฆฌํฐ ํด๋์ค๋ฅผ ์์ฑํ๋ ๋๊ตฌ ์ฌ์ฉ
- Tailwind UI์ ๊ฐ์ ๋ง์ ํ์ฌ์์ ์ฑํํ ์ด ์ ๊ทผ ๋ฐฉ์์ ์ผ๊ด์ฑ์ ์ด์งํ๊ณ CSS ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ ๋๋ค.
- CSS ๋ชจ๋: JavaScript ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ๋ ํ๋ก์ ํธ์ ๊ฒฝ์ฐ CSS ๋ชจ๋๋ก ๋ง์ด๊ทธ๋ ์ด์
ํ๋ฉด ํด๋์ค ์ด๋ฆ ์ถฉ๋์ ๋ฐฉ์งํ๋ ๋ฒ์๋ฅผ ์ง์ ํ ์คํ์ผ๋ง์ ์ ๊ณตํฉ๋๋ค. ์ด ํ๋ก์ธ์ค์๋ ์ผ๋ฐ์ ์ผ๋ก ๋ค์์ด ํฌํจ๋ฉ๋๋ค.
- `.css` ํ์ผ์ `.module.css`๋ก ์ด๋ฆ ๋ณ๊ฒฝ
- ์คํ์ผ์ ๊ฐ์ฒด๋ก ๊ฐ์ ธ์ค๊ธฐ: `import styles from './styles.module.css';`
- ์คํ์ผ ์ ์ฉ: `...`
- ๊ตฌ์ฑ ์์๊ฐ ํ๋ถํ ๋๊ท๋ชจ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์์ ํ๋ ํ์ด ์ ํธํ๋ ์ด ์ ๋ต์ ์ ์ง ๊ด๋ฆฌ์ฑ๊ณผ ๋ชจ๋์ฑ์ ํฅ์์ํต๋๋ค.
- Atomic CSS: ์ ํธ๋ฆฌํฐ ์ฐ์ ๊ณผ ์ ์ฌํ๊ฒ Atomic CSS๋ ๋งค์ฐ ์ธ๋ถํ๋ ๋จ์ผ ๋ชฉ์ ํด๋์ค๋ฅผ ๋ง๋๋ ๊ฒ์ ํฌํจํฉ๋๋ค. ์ด ํจํด์ผ๋ก ๋ง์ด๊ทธ๋ ์ด์
ํ๋ ค๋ฉด ์ข
์ข
๋ค์์ด ํ์ํฉ๋๋ค.
- ๋ฏธ๋ฆฌ ์ ์๋ ์์ ํด๋์ค ์งํฉ์ ๋ํ ์๊ฒฉํ ์ค์
- ์ด๋ฌํ ํด๋์ค๋ฅผ ์์ฉํ๊ธฐ ์ํ HTML ๋ฆฌํฉํ ๋ง ๊ฐ๋ฅ์ฑ
- ์ด๋ฌํ ํด๋์ค๋ฅผ ํจ์จ์ ์ผ๋ก ์์ฑํ๊ฑฐ๋ ๊ด๋ฆฌํ๋ ๋ฐ ๋์์ด ๋๋ ๋๊ตฌ
- ์ด๋ ํ์ผ ํฌ๊ธฐ๋ฅผ ํฌ๊ฒ ์ค์ด๊ณ ์์ธก ๊ฐ๋ฅํ ์คํ์ผ๋ง ๊ฒฐ๊ณผ๋ฅผ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค.
- ๋์์ธ ์์คํ
์ผ๋ก ๋ฆฌํฉํ ๋ง: ๋ง์ ์กฐ์ง์ด ์ค์ ์ง์ค์ ๋์์ธ ์์คํ
์ ๋ง์ถ๊ธฐ ์ํด CSS๋ฅผ ๋ง์ด๊ทธ๋ ์ด์
ํฉ๋๋ค. ์ฌ๊ธฐ์๋ ๋ค์์ด ํฌํจ๋ฉ๋๋ค.
- ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ UI ํจํด ๋ฐ ํด๋น CSS ์๋ณ
- ์ด๋ฅผ ์ ์ฉ ๋์์ธ ์์คํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ(์ข ์ข Storybook๊ณผ ๊ฐ์ ๋๊ตฌ ์ฌ์ฉ)๋ก ํตํฉ
- ์ ํ๋ฆฌ์ผ์ด์ ์์ค CSS๋ฅผ ๋ง์ด๊ทธ๋ ์ด์ ํ์ฌ ๋์์ธ ์์คํ ์ ๊ตฌ์ฑ ์์ ๋ฐ ํ ํฐ ์ฌ์ฉ
- ์ด ์ ๊ทผ ๋ฐฉ์์ ๋ธ๋๋ ์ผ๊ด์ฑ์ ๋ณด์ฅํ๊ณ ๋ค๋ฅธ ํ ๋ฐ ํ๋ก์ ํธ ์ ๋ฐ์ ๊ฐ๋ฐ์ ๊ฐ์ํํ๋ฉฐ, ์ด๋ ๋๊ท๋ชจ ๊ธ๋ก๋ฒ ๊ธฐ์ ์ ๋งค์ฐ ์ค์ํฉ๋๋ค.
์ฅ๊ธฐ์ ์ธ CSS ์ํ๋ฅผ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
CSS ๋ง์ด๊ทธ๋ ์ด์ ์ ์ผํ์ฑ ์ด๋ฒคํธ๊ฐ ์๋๋ผ ์คํ์ผ์ํธ์ ์ฅ๊ธฐ์ ์ธ ์ํ๋ฅผ ๋ณด์ฅํ๋ ๊ดํ์ ์ฌ์ด์ค ๊ธฐํ์ ๋๋ค.
- ๋ฆฐํฐ ๋ฐ ํ์ ์ง์ ๋๊ตฌ ์ฑํ: Stylelint ๋ฐ Prettier์ ๊ฐ์ ๋๊ตฌ๋ ์ฝ๋ฉ ํ์ค์ ์ํํ๊ณ ์ค๋ฅ๋ฅผ ํฌ์ฐฉํ๋ฉฐ ๊ธ๋ก๋ฒ ํ ์ ๋ฐ์ ๊ฑธ์ณ ์ผ๊ด๋ ํ์ ์ง์ ๋ฅผ ๋ณด์ฅํ๋ ๋ฐ ํ์์ ์ ๋๋ค.
- CSS ๋ณ์(์ฌ์ฉ์ ์ ์ ์์ฑ) ํ์ฉ: ํ ๋ง, ๋ฐ์ํ ๋์์ธ ๋ฐ ๋์์ธ ํ ํฐ๊ณผ์ ์ผ๊ด์ฑ ์ ์ง๋ฅผ ์ํด CSS ๋ณ์๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ด๋ฅผ ํตํด ์ ์ญ ๋ณ๊ฒฝ์ ์ฝ๊ฒ ๊ตฌํํ ์ ์์ต๋๋ค.
- CSS ๋ชจ๋ํ: ์คํ์ผ์ ๋ ์๊ณ ๊ด๋ฆฌํ๊ธฐ ์ฌ์ด ๋ชจ๋ ๋๋ ๊ตฌ์ฑ ์์๋ก ๋๋๋๋ค. ์ด๋ ๊ตฌ์ฑ ์์ ๊ธฐ๋ฐ JavaScript ํ๋ ์์ํฌ์ ์ ๋ง์ต๋๋ค.
- ์ฑ๋ฅ ์ฐ์ : CSS ํ์ผ ํฌ๊ธฐ๋ฅผ ์ ๊ธฐ์ ์ผ๋ก ๊ฐ์ฌํ๊ณ , ์ฌ์ฉํ์ง ์๋ ์คํ์ผ์ ์ ๊ฑฐํ๊ณ , ์ ํ์๋ฅผ ์ต์ ํํฉ๋๋ค. ๋ ๋น ๋ฅธ ์ด๊ธฐ ํ์ด์ง ๋ก๋๋ฅผ ์ํด ํต์ฌ CSS์ ๊ฐ์ ๊ธฐ์ ์ ์ฌ์ฉํฉ๋๋ค.
- ๊ด๋ฒ์ํ๊ฒ ๋ฌธ์ํ: CSS ์ํคํ ์ฒ, ๋ช ๋ช ๊ท์น ๋ฐ ๋ง์ด๊ทธ๋ ์ด์ ๋ณ ๊ฒฐ์ ์ ๋ํ ๋ช ํํ๊ณ ์ต์ ์ํ์ ๋ฌธ์๋ฅผ ์ ์งํฉ๋๋ค. ์ด๋ ์ ํ ๊ตฌ์ฑ์์ ์จ๋ณด๋ฉํ๊ณ ์ผ๊ด์ฑ์ ์ ์งํ๋ ๋ฐ ๋งค์ฐ ์ ์ฉํฉ๋๋ค.
- ์ง์์ ์ธ ํ์ต ๋ฐ ์ ์: CSS ํ๊ฒฝ์ ํญ์ ๋ฐ์ ํ๊ณ ์์ต๋๋ค. ํ์ด ์ ๊ธฐ๋ฅ ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก์ ๋ํ ์ต์ ์ ๋ณด๋ฅผ ์ ์งํ๋๋ก ๊ถ์ฅํ๊ณ CSS ์ ๋ต์ ๋ฐ๋ณต์ ์ธ ๊ฐ์ ์ ๊ฐ๋ฐฉ์ ์ธ ์์ธ๋ฅผ ์ทจํ์ญ์์ค.
๊ฒฐ๋ก
CSS ๋ง์ด๊ทธ๋ ์ด์ ๊ท์น์ ๊ตฌํํ๊ณ CSS ๋ง์ด๊ทธ๋ ์ด์ ํ๋ก์ธ์ค๋ฅผ ์คํํ๋ ๊ฒ์ ์๋นํ ๋ ธ๋ ฅ์ด์ง๋ง ์ฝ๋ ํ์ง, ์ฑ๋ฅ ๋ฐ ์ ์ง ๊ด๋ฆฌ์ฑ ์ธก๋ฉด์์ ์๋นํ ์ด์ ์ ์ ๊ณตํฉ๋๋ค. ์ธ์ฌํ ๊ณํ, ์ ์ ์๋ ๊ท์น ์งํฉ ์ค์, ์ ์ ํ ๋๊ตฌ ํ์ฉ, ๊ธ๋ก๋ฒ ํ ๊ตฌ์ฑ์ ๊ฐ์ ๊ฐ๋ ฅํ ์ปค๋ฎค๋์ผ์ด์ ์ด์ง์ ํตํด ์ด ํ๋ก์ธ์ค๋ฅผ ์ฑ๊ณต์ ์ผ๋ก ํ์ํ ์ ์์ต๋๋ค. CSS ๋ง์ด๊ทธ๋ ์ด์ ์ ์น ํ๋ก์ ํธ์ ๋ฏธ๋ ์ํ ๋ฐ ํ์ฅ์ฑ์ ๋ํ ํฌ์๋ผ๋ ๊ฒ์ ๊ธฐ์ตํ์ญ์์ค. ์คํ์ผ๋ง ์ํคํ ์ฒ๋ฅผ ๊ฐ์ ํ๊ณ ์ ์ธ๊ณ ๊ฐ๋ฐ ํ์ ๊ถํ์ ๋ถ์ฌํ ๊ธฐํ๋ฅผ ํ์ฉํ์ญ์์ค.