๋์ ๋ ์ด์ด ์ฐ์ ์์ ๋ธ๋ ๋ฉ์ผ๋ก CSS์ ๋ฏธ๋๋ฅผ ํ์ํ์ธ์. ์ด ๊ณ ๊ธ ๊ธฐ์ ์ด ๊ธ๋ก๋ฒ ๋์์ธ ์์คํ ์ ์คํ์ผ ์ฐ์ ์์๋ฅผ ์ด๋ป๊ฒ ํ์ ํ๋์ง ์์๋ณด์ธ์.
๊ณ ๊ธ CSS ์บ์ค์ผ์ด๋ ๋ ์ด์ด ๋ณด๊ฐ๋ฒ: ๋์ ๋ ์ด์ด ์ฐ์ ์์ ๋ธ๋ ๋ฉ ์ฌ์ธต ๋ถ์
๋์์์ด ์งํํ๋ ์น ๊ฐ๋ฐ ํ๊ฒฝ์์ CSS๋ ๊ณ์ํด์ ์ ๊ตํด์ง๋ฉฐ ์ฐ๋ฆฌ๋ฅผ ๋๋ผ๊ฒ ํฉ๋๋ค. Flexbox์ Grid๋ถํฐ ์ฌ์ฉ์ ์ง์ ์์ฑ(Custom Properties)๊ณผ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ(Container Queries)์ ์ด๋ฅด๊ธฐ๊น์ง, ์คํ์ผ๋ง ์ธ์ด๋ ๋ณต์กํ๊ณ ๋ฐ์ํ์ด๋ฉฐ ์ ์ง๋ณด์ ๊ฐ๋ฅํ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋๋ ๊ฐ๋ ฅํ ๋๊ตฌ๊ฐ ๋์์ต๋๋ค. CSS ์ํคํ ์ฒ์์ ๊ฐ์ฅ ์ค์ํ ์ต๊ทผ ๋ฐ์ ์ค ํ๋๋ ์บ์ค์ผ์ด๋ ๋ ์ด์ด(Cascade Layers)์ ๋์ ์ผ๋ก, ๊ฐ๋ฐ์์๊ฒ CSS ์บ์ค์ผ์ด๋๋ฅผ ์ ๋ก ์์ด ์ ์ดํ ์ ์๋ ๋ฅ๋ ฅ์ ์ ๊ณตํ์ต๋๋ค. ํ์ง๋ง ์ด๋ฌํ ๊ฐ๋ ฅํจ์๋ ๋ถ๊ตฌํ๊ณ ๋ ์ด์ด๋ ์ ์ ์ผ๋ก ์ ์๋ฉ๋๋ค. ๋ง์ฝ ์ฌ์ฉ์ ์ํธ์์ฉ, ์ปดํฌ๋ํธ ์ํ ๋๋ ํ๊ฒฝ ์ปจํ ์คํธ์ ๋ฐ๋ผ ๋ ์ด์ด ์ฐ์ ์์๋ฅผ ๋์ ์ผ๋ก ์กฐ์ํ ์ ์๋ค๋ฉด ์ด๋จ๊น์? ๋ฏธ๋์ ์ค์ ๊ฒ์ ํ์ํฉ๋๋ค: ๊ณ ๊ธ CSS ์บ์ค์ผ์ด๋ ๋ ์ด์ด ๋ณด๊ฐ๋ฒ๊ณผ ๋์ ๋ ์ด์ด ์ฐ์ ์์ ๋ธ๋ ๋ฉ์ ๋๋ค.
์ด ๊ธ์ CSS ์ํคํ ์ฒ์ ๋ค์ ๋ ผ๋ฆฌ์ ๋จ๊ณ๋ฅผ ๋ํํ๋ ๋ฏธ๋ ์งํฅ์ ์ธ ๊ฐ๋ ์ ๊ธฐ๋ฅ์ ๋ํด ํ๊ตฌํฉ๋๋ค. ์ฐ๋ฆฌ๋ ๋์ ๋ ์ด์ด ์ฐ์ ์์ ๋ธ๋ ๋ฉ์ด ๋ฌด์์ธ์ง, ์ ์ด๊ฒ์ด ๊ธ๋ก๋ฒ ๋์์ธ ์์คํ ์ ํ๋๋ฅผ ๋ฐ๊พธ๋ ๊ฒ์ ์ฒด์ธ์ ์ธ์ง, ๊ทธ๋ฆฌ๊ณ ์ด๊ฒ์ด ๋ณต์กํ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ์ฐ๋ฆฌ์ ์ ๊ทผ ๋ฐฉ์์ ์ด๋ป๊ฒ ์ฌ๊ตฌ์ฑํ ์ ์๋์ง ๊น์ด ํ๊ณ ๋ค ๊ฒ์ ๋๋ค. ์ด ๊ธฐ๋ฅ์ ์์ง ๋ธ๋ผ์ฐ์ ์์ ์ฌ์ฉํ ์ ์์ง๋ง, ๊ทธ ์ ์ฌ๋ ฅ์ ์ดํดํ๋ ๊ฒ์ ์ฐ๋ฆฌ๋ฅผ ๋ ์ญ๋์ ์ด๊ณ ๊ฐ๋ ฅํ CSS์ ๋ฏธ๋์ ๋๋น์์ผ ์ค ์ ์์ต๋๋ค.
๊ธฐ๋ฐ ์ดํดํ๊ธฐ: ํ์ฌ ์บ์ค์ผ์ด๋ ๋ ์ด์ด์ ์ ์ ํน์ฑ
๋์ ์ธ ๋ฏธ๋๋ฅผ ์ดํดํ๊ธฐ ์ ์, ์ฐ๋ฆฌ๋ ๋จผ์ ์ ์ ์ธ ํ์ฌ๋ฅผ ๋ง์คํฐํด์ผ ํฉ๋๋ค. CSS ์บ์ค์ผ์ด๋ ๋ ์ด์ด(@layer)๋ CSS์ ์ค๋ ๋ฌธ์ ์ธ ๋ช ์๋์ ์บ์ค์ผ์ด๋๋ฅผ ๊ฑฐ์์ ์์ค์์ ๊ด๋ฆฌํ๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ๋์ ๋์์ต๋๋ค. ์์ญ ๋ ๋์ ๊ฐ๋ฐ์๋ค์ ์คํ์ผ์ด ์ฌ๋ฐ๋ฅด๊ฒ ์ ์ฉ๋๋๋ก ๋ณด์ฅํ๊ธฐ ์ํด BEM(Block, Element, Modifier)๊ณผ ๊ฐ์ ๋ฐฉ๋ฒ๋ก ์ด๋ ๋ณต์กํ ๋ช ์๋ ๊ณ์ฐ์ ์์กดํด ์์ต๋๋ค. ์บ์ค์ผ์ด๋ ๋ ์ด์ด๋ ์์๊ฐ ์ง์ ๋ ๋ ์ด์ด ์คํ์ ๋ง๋ค์ด ์ด๋ฅผ ๋จ์ํํ๋ฉฐ, ์ฌ๊ธฐ์๋ ๋ช ์๋๊ฐ ์๋ ์ ์ธ ์์๊ฐ ์ฐ์ ์์๋ฅผ ๊ฒฐ์ ํฉ๋๋ค.
๋๊ท๋ชจ ํ๋ก์ ํธ์ ์ผ๋ฐ์ ์ธ ๋ ์ด์ด ์คํ์ ๋ค์๊ณผ ๊ฐ์ ์ ์์ต๋๋ค:
/* ์ฌ๊ธฐ์ ์์๊ฐ ์ฐ์ ์์๋ฅผ ์ ์ํฉ๋๋ค. 'utilities'๊ฐ 'components'๋ณด๋ค ์ฐ์ ํฉ๋๋ค. */
@layer reset, base, theme, components, utilities;
์ด ์ค์ ์์ utilities ๋ ์ด์ด์ ๊ท์น์ ์ปดํฌ๋ํธ ๊ท์น์ ์ ํ์ ๋ช ์๋๊ฐ ๋ ๋๋๋ผ๋ ํญ์ components ๋ ์ด์ด์ ๊ท์น์ ์ฌ์ ์ํฉ๋๋ค. ์๋ฅผ ๋ค์ด:
/* ๊ธฐ๋ณธ ์คํ์ผ์ํธ์์ */
@layer components {
div.profile-card#main-card { /* ๋์ ๋ช ์๋ */
background-color: blue;
}
}
/* ์ ํธ๋ฆฌํฐ ์คํ์ผ์ํธ์์ */
@layer utilities {
.bg-red { /* ๋ฎ์ ๋ช ์๋ */
background-color: red;
}
}
๋ง์ฝ <div class="profile-card bg-red" id="main-card">์ ๊ฐ์ HTML์ด ์๋ค๋ฉด, ๋ฐฐ๊ฒฝ์ ๋นจ๊ฐ์์ด ๋ ๊ฒ์ ๋๋ค. utilities ๋ ์ด์ด์ ์์น๋ ์ ํ์์ ๋ณต์ก์ฑ๊ณผ ์๊ด์์ด ๊ถ๊ทน์ ์ธ ํ์ ๋ถ์ฌํฉ๋๋ค.
์ ์ ํ๊ณ
์ด๊ฒ์ ๋ช ํํ๊ณ ์์ธก ๊ฐ๋ฅํ ์คํ์ผ๋ง ์ํคํ ์ฒ๋ฅผ ๊ตฌ์ถํ๋ ๋ฐ ๋งค์ฐ ๊ฐ๋ ฅํฉ๋๋ค. ํ์ง๋ง ์ฃผ์ ํ๊ณ๋ ์ ์ ์ด๋ผ๋ ์ ์ ๋๋ค. ๋ ์ด์ด ์์๋ CSS ํ์ผ ์๋จ์์ ํ ๋ฒ ์ ์๋๋ฉด ๋ณ๊ฒฝํ ์ ์์ต๋๋ค. ํ์ง๋ง ์ปจํ ์คํธ์ ๋ฐ๋ผ ์ด ์ฐ์ ์์๋ฅผ ๋ณ๊ฒฝํด์ผ ํ๋ค๋ฉด ์ด๋จ๊น์? ๋ค์ ์๋๋ฆฌ์ค๋ฅผ ๊ณ ๋ คํด ๋ณด์ธ์:
- ํ ๋ง ์ ์ฉ: ์ฌ์ฉ์๊ฐ ์ ํํ ํ ๋ง๊ฐ ํน์ ์ปดํฌ๋ํธ์ ๊ธฐ๋ณธ ์คํ์ผ์ ์ฌ์ ์ํด์ผ ํ์ง๋ง, ์ผ๋ถ ์ปดํฌ๋ํธ์๋ง ์ ์ฉํด์ผ ํ๋ค๋ฉด ์ด๋ป๊ฒ ํ ๊น์?
- A/B ํ ์คํธ: `!important`๋ ๋ณต์กํ ์ฌ์ ์ ํด๋์ค์ ์์กดํ์ง ์๊ณ , ๊ธฐ์กด ์คํ์ผ์ ์ฌ์ ์ํ๋ ์คํ์ ์ธ ์คํ์ผ ์ธํธ(์ ๋ ์ด์ด์์)๋ฅผ ์ด๋ป๊ฒ ์ ์ฉํ ์ ์์๊น์?
- ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋: ์ฌ๋ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ด ํ ํ์ด์ง์ ๊ตฌ์ฑ๋๋ ์์คํ ์์, ํ ์ ํ๋ฆฌ์ผ์ด์ ์ ์คํ์ผ์ด ์ผ์์ ์ผ๋ก ์ ธ ์ ํ๋ฆฌ์ผ์ด์ ์ ํ ๋ง๋ณด๋ค ์ฐ์ ์์๋ฅผ ๊ฐ์ ธ์ผ ํ๋ค๋ฉด ์ด๋ป๊ฒ ํ ๊น์?
ํ์ฌ ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ค๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํ ํด๋์ค ํ ๊ธ๋ง, ์คํ์ผ์ํธ ์กฐ์ ๋๋ `!important` ์ฌ์ฉ ๋ฑ์ด ํฌํจ๋๋ฉฐ, ์ด ๋ชจ๋ ๊ฒ์ ์ ์ง๋ณด์์ฑ์ด ๋ฎ์ ์ฝ๋๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ์ด๊ฒ์ด ๋ฐ๋ก ๋์ ๋ ์ด์ด ์ฐ์ ์์ ๋ธ๋ ๋ฉ์ด ๋ฉ์ฐ๊ณ ์ ํ๋ ๊ฐ๊ทน์ ๋๋ค.
๋์ ๋ ์ด์ด ์ฐ์ ์์ ๋ธ๋ ๋ฉ ์๊ฐ
๋์ ๋ ์ด์ด ์ฐ์ ์์ ๋ธ๋ ๋ฉ์ ๊ฐ๋ฐ์๊ฐ ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ์ ๋ฐ ์ปจํ ์คํธ์ ๋ฐ๋ผ ์บ์ค์ผ์ด๋ ๋ ์ด์ด ์คํ ๋ด์์ CSS ๊ท์น์ ์ฐ์ ์์๋ฅผ ์กฐ์ ํ ์ ์๊ฒ ํด์ฃผ๋ ๊ฐ๋ ์ ๋ฉ์ปค๋์ฆ์ ๋๋ค. ์ฌ๊ธฐ์ ํต์ฌ ๋จ์ด๋ "๋ธ๋ ๋ฉ" ๋๋ "๋ณด๊ฐ๋ฒ"์ ๋๋ค. ์ด๋ ๋จ์ํ ๋ ๋ ์ด์ด์ ์์น๋ฅผ ๋ฐ๊พธ๋ ๊ฒ์ด ์๋๋๋ค. ๊ท์น ๋๋ ๊ท์น ์งํฉ์ CSS ์ฌ์ฉ์ ์ง์ ์์ฑ์ ์ํด ๊ตฌ๋๋๋ ๊ฒฝ์ฐ๊ฐ ๋ง์, ๋ ์ด์ด ์คํ ๋ด์ ๋ค๋ฅธ ์ง์ ์ฌ์ด์์ ์ฐ์ ์์๋ฅผ ๋ถ๋๋ฝ๊ฒ ์ ํํ ์ ์๋ ๋ฅ๋ ฅ์ ๋ถ์ฌํ๋ ๊ฒ์ ๋๋ค.
์ด๋ ๊ฒ ๋งํ ์ ์๋ค๊ณ ์์ํด ๋ณด์ธ์: "์ผ๋ฐ์ ์ธ ์ํฉ์์ 'theme' ๋ ์ด์ด์ ์ด ๊ท์น์ ํ์ค ์ฐ์ ์์๋ฅผ ๊ฐ์ต๋๋ค. ํ์ง๋ง --high-contrast-mode ์ฌ์ฉ์ ์ง์ ์์ฑ์ด ํ์ฑํ๋๋ฉด, ๊ทธ ์ฐ์ ์์๋ฅผ 'components' ๋ ์ด์ด ๋ฐ๋ก ์๋ก ๋ถ๋๋ฝ๊ฒ ์ฆ๊ฐ์ํต๋๋ค."
์ด๋ ์บ์ค์ผ์ด๋์ ์ง์ ์ ์ผ๋ก ์๋ก์ด ์ฐจ์์ ์ญ๋์ฑ์ ๋์ ํ์ฌ, ๊ฐ๋ฐ์๊ฐ ์์ CSS๋ก ๋ณต์กํ UI ์ํ๋ฅผ ๊ด๋ฆฌํ ์ ์๋๋ก ํ์ ์ค์ด์ฃผ๋ฉฐ, ์ฐ๋ฆฌ์ ์คํ์ผ์ํธ๋ฅผ ๋ ์ ์ธ์ ์ด๊ณ , ๋ฐ์์ ์ด๋ฉฐ, ๊ฐ๋ ฅํ๊ฒ ๋ง๋ญ๋๋ค.
ํต์ฌ ๊ตฌ๋ฌธ ๋ฐ ์์ฑ ์ค๋ช (์ ์)
์ด ๊ฐ๋ ์ ํ์ค๋ก ๋ง๋ค๊ธฐ ์ํด์๋ ์๋ก์ด CSS ์์ฑ๊ณผ ํจ์๊ฐ ํ์ํฉ๋๋ค. ๊ฐ๋ฅํ ๊ตฌ๋ฌธ์ ์์ํด ๋ด ์๋ค. ์ด ์์คํ ์ ํต์ฌ์ ์ฐ๋ฆฌ๊ฐ layer-priority๋ผ๊ณ ๋ถ๋ฅผ ์๋ก์ด CSS ์์ฑ์ด ๋ ๊ฒ์ ๋๋ค.
`layer-priority` ์์ฑ
layer-priority ์์ฑ์ ๋ ์ด์ด ๋ด์ ๊ท์น์ ์ ์ฉ๋ฉ๋๋ค. ๊ทธ ๋ชฉ์ ์ ์ ์ฒด ๋ ์ด์ด ์คํ์ *์๋์ ์ธ* ๊ท์น์ ์ฐ์ ์์๋ฅผ ์ ์ํ๋ ๊ฒ์ ๋๋ค. ์ด ์์ฑ์ 0๊ณผ 1 ์ฌ์ด์ ๊ฐ์ ๋ฐ์ต๋๋ค.
- 0 (๊ธฐ๋ณธ๊ฐ): ๊ท์น์ด ์ ์์ ์ผ๋ก ๋์ํ๋ฉฐ, ์ ์ธ๋ ๋ ์ด์ด์ ์์น๋ฅผ ์กด์คํฉ๋๋ค.
- 1: ๊ท์น์ ๋ ์ด์ด ์คํ ๋ด์์ ๊ฐ๋ฅํ ๊ฐ์ฅ ๋์ ์ฐ์ ์์๊ฐ ๋ถ์ฌ๋ฉ๋๋ค. ๋ง์น ๋ค๋ฅธ ๋ชจ๋ ๋ ์ด์ด ๋ค์ ์ ์๋ ๋ ์ด์ด์ ์๋ ๊ฒ์ฒ๋ผ ์๋ํฉ๋๋ค.
- 0๊ณผ 1 ์ฌ์ด์ ๊ฐ: ๊ท์น์ ์ฐ์ ์์๋ ํ์ฌ ์์น์ ์คํ์ ๋งจ ์ ์ฌ์ด์์ ๋ณด๊ฐ๋ฉ๋๋ค. ๊ฐ 0.5๋ ์ ํจ ์ฐ์ ์์๋ฅผ ๊ทธ ์์ ๋ ์ด์ด๋ค ์ค๊ฐ์ฏค์ ์์น์ํฌ ์ ์์ต๋๋ค.
๋ค์์ ์์์ ๋๋ค:
@layer base, theme, components;
@layer theme {
.card {
background-color: var(--theme-bg, lightgray);
/* ์ด ๊ท์น์ ์ฐ์ ์์๋ฅผ ๋์ผ ์ ์์ต๋๋ค */
layer-priority: var(--theme-boost, 0);
}
}
@layer components {
.special-promo .card {
background-color: gold;
}
}
์ด ์์์, components ๋ ์ด์ด์ .special-promo .card ๊ท์น์ ๋ณดํต theme ๋ ์ด์ด์ .card ๊ท์น์ ์ฌ์ ์ํฉ๋๋ค. ํ์ง๋ง ๋ง์ฝ ์ฐ๋ฆฌ๊ฐ ์ฌ์ฉ์ ์ง์ ์์ฑ --theme-boost๋ฅผ 1๋ก ์ค์ ํ๋ค๋ฉด(์๋ง๋ ์ธ๋ผ์ธ ์คํ์ผ์ด๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํตํด), theme ๋ ์ด์ด์ .card ๊ท์น์ ์ฐ์ ์์๊ฐ ์คํ์ ์ต์๋จ์ผ๋ก ๋ณด๊ฐ๋์ด ์ปดํฌ๋ํธ ํน์ ์คํ์ผ์ ์ฌ์ ์ํ๊ฒ ๋ฉ๋๋ค. ์ด๋ฅผ ํตํด ํ ๋ง๋ ํ์ํ ๋ ๊ฐ๋ ฅํ๊ฒ ์์ ์ ์ฃผ์ฅํ ์ ์์ต๋๋ค.
๊ธ๋ก๋ฒ ๊ฐ๋ฐ ํ๊ฒฝ์ ์ํ ์ค์ ์ฌ์ฉ ์ฌ๋ก
์ด ๊ธฐ๋ฅ์ ์ง์ ํ ํ์ ๊ตญ์ ์ ์ธ ํ๋ค์ด ๋๊ท๋ชจ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ฉด์ ์ง๋ฉดํ๋ ๋ณต์กํ ๋ฌธ์ ์ ์ ์ฉ๋ ๋ ๋ถ๋ช ํด์ง๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ์ค๋๋ ฅ ์๋ ์ฌ์ฉ ์ฌ๋ก์ ๋๋ค.
1. ๋ค์ค ๋ธ๋๋ ์์คํ ์ ์ํ ํ ๋ง ๋ฐ ๋ธ๋๋ ๋ธ๋ ๋ฉ
๋ง์ ๊ธ๋ก๋ฒ ๊ธฐ์ ๋ค์ ๊ฐ๊ฐ ๊ณ ์ ํ ์๊ฐ์ ์ ์ฒด์ฑ์ ๊ฐ์ง ๋ธ๋๋ ํฌํธํด๋ฆฌ์ค๋ฅผ ๊ด๋ฆฌํ์ง๋ง, ์ข ์ข ๋จ์ผ ๊ณต์ ๋์์ธ ์์คํ ์์ ๊ตฌ์ถ๋ฉ๋๋ค. ๋์ ๋ ์ด์ด ์ฐ์ ์์ ๋ธ๋ ๋ฉ์ ์ด ์๋๋ฆฌ์ค์์ ํ๋ช ์ ์ผ ๊ฒ์ ๋๋ค.
์๋๋ฆฌ์ค: ๊ธ๋ก๋ฒ ํธํ ๊ธฐ์ ์ด ํต์ฌ '๊ธฐ์ ' ๋ธ๋๋์ ์ ์ ์ธต์ ๊ฒจ๋ฅํ ํ๊ธฐ์ฐฌ '๋ผ์ดํ์คํ์ผ' ํ์ ๋ธ๋๋๋ฅผ ๋ณด์ ํ๊ณ ์์ต๋๋ค. ๋ ๋ธ๋๋ ๋ชจ๋ ๋์ผํ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ง๋ง ํ ๋ง๋ ๋ค๋ฆ ๋๋ค.
๊ตฌํ:
๋จผ์ ๋ ์ด์ด๋ฅผ ์ ์ํฉ๋๋ค:
@layer base, corporate-theme, lifestyle-theme, components;
๋ค์์ผ๋ก, ๊ฐ ํ ๋ง ๋ด์์ layer-priority๋ฅผ ์ฌ์ฉํฉ๋๋ค:
@layer corporate-theme {
.button {
/* ... ๊ธฐ์ ์คํ์ผ ... */
layer-priority: var(--corporate-prominence, 0);
}
}
@layer lifestyle-theme {
.button {
/* ... ๋ผ์ดํ์คํ์ผ ์คํ์ผ ... */
layer-priority: var(--lifestyle-prominence, 0);
}
}
๊ธฐ๋ณธ์ ์ผ๋ก components ๋ ์ด์ด๊ฐ ์ฐ์ ํฉ๋๋ค. ํ์ง๋ง body์ ์ฌ์ฉ์ ์ง์ ์์ฑ์ ์ค์ ํ์ฌ ํ ๋ง๋ฅผ ํ์ฑํํ ์ ์์ต๋๋ค. 100% ๋ผ์ดํ์คํ์ผ ๋ธ๋๋ ํ์ด์ง๋ฅผ ๋ง๋ค๋ ค๋ฉด --lifestyle-prominence: 1;์ ์ค์ ํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ๋ผ์ดํ์คํ์ผ ํ ๋ง์ ๋ชจ๋ ๊ท์น์ด ์ต์๋จ์ผ๋ก ์ฌ๋ผ๊ฐ ๋ธ๋๋ ์ผ๊ด์ฑ์ ๋ณด์ฅํฉ๋๋ค. ๊ฐ์ 0.5๋ก ์ค์ ํ์ฌ ๋ธ๋๋๋ฅผ ํผํฉํ๋ UI๋ฅผ ๋ง๋ค ์๋ ์์ผ๋ฉฐ, ์ด๋ ๋ ํนํ ๊ณต๋ ๋ธ๋๋ ๋์งํธ ๊ฒฝํ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. ์ด๋ ๊ธ๋ก๋ฒ ๋ง์ผํ ์บ ํ์ธ์ ์ํ ๋งค์ฐ ๊ฐ๋ ฅํ ๋๊ตฌ์ ๋๋ค.
2. CSS์์ ์ง์ A/B ํ ์คํธ ๋ฐ ๊ธฐ๋ฅ ํ๋๊ทธ ๊ด๋ฆฌํ๊ธฐ
๊ตญ์ ์ ์ธ ์ ์ ์๊ฑฐ๋ ํ๋ซํผ์ ์ฌ๋ฌ ์ง์ญ์ ๊ฑธ์ณ ์ฌ์ฉ์ ๊ฒฝํ์ ์ต์ ํํ๊ธฐ ์ํด ๋์์์ด A/B ํ ์คํธ๋ฅผ ์คํํฉ๋๋ค. ์ด๋ฌํ ํ ์คํธ๋ฅผ ์ํ ์คํ์ผ๋ง ๊ด๋ฆฌ๋ ๋ฒ๊ฑฐ๋ก์ธ ์ ์์ต๋๋ค.
์๋๋ฆฌ์ค: ์จ๋ผ์ธ ์๋งค์ ์ฒด๊ฐ ๋ถ๋ฏธ ์์ฅ์ ํ์ค ๋์์ธ๊ณผ ๋น๊ตํ์ฌ ์ ๋ฝ ์์ฅ์ ์ํ ์๋กญ๊ณ ๋ ๊ฐ๋จํ ๊ฒฐ์ ๋ฒํผ ๋์์ธ์ ํ ์คํธํ๊ณ ์ ํฉ๋๋ค.
๊ตฌํ:
์คํ์ ์ํ ๋ ์ด์ด๋ฅผ ์ ์ํฉ๋๋ค:
@layer components, experiment-a, experiment-b;
@layer components {
.checkout-button { background-color: blue; } /* ๋์กฐ๊ตฐ ๋ฒ์ */
}
@layer experiment-b {
.checkout-button {
background-color: green;
layer-priority: var(--enable-experiment-b, 0);
}
}
๋ฐฑ์๋๋ ํด๋ผ์ด์ธํธ ์ธก ์คํฌ๋ฆฝํธ๋ ์ฌ์ฉ์์ ์ฝํธํธ์ ๋ฐ๋ผ <html> ํ๊ทธ์ ๋จ์ผ ์ธ๋ผ์ธ ์คํ์ผ์ ์ฃผ์ ํ ์ ์์ต๋๋ค: style="--enable-experiment-b: 1;". ์ด๋ DOM ์ ์ฒด์ ํด๋์ค๋ฅผ ์ถ๊ฐํ๊ฑฐ๋ ๊นจ์ง๊ธฐ ์ฌ์ด ๋ช ์๋ ์ฌ์ ์๋ฅผ ๋ง๋ค์ง ์๊ณ ๋ ์คํ์ ์ธ ์คํ์ผ์ ๊น๋ํ๊ฒ ํ์ฑํํฉ๋๋ค. ์คํ์ด ๋๋๋ฉด experiment-b ๋ ์ด์ด์ ์ฝ๋๋ ๊ธฐ๋ณธ ์ปดํฌ๋ํธ์ ์ํฅ์ ์ฃผ์ง ์๊ณ ์ ๊ฑฐํ ์ ์์ต๋๋ค.
3. ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ฅผ ์ด์ฉํ ์ปจํ ์คํธ ์ธ์ UI
์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ์ปดํฌ๋ํธ๊ฐ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ์ ์ํ ์ ์๊ฒ ํด์ค๋๋ค. ๋์ ๋ ์ด์ด ์ฐ์ ์์์ ๊ฒฐํฉํ๋ฉด ์ปดํฌ๋ํธ๋ ๋ ์ด์์๋ฟ๋ง ์๋๋ผ ๊ทผ๋ณธ์ ์ธ ์คํ์ผ๋ง๋ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค.
์๋๋ฆฌ์ค: "news-card" ์ปดํฌ๋ํธ๋ ์ข์ ์ฌ์ด๋๋ฐ์ ์์ ๋๋ ๊ฐ๋จํ๊ณ ์ค์ฉ์ ์ผ๋ก ๋ณด์ฌ์ผ ํ์ง๋ง, ๋์ ๋ฉ์ธ ์ฝํ ์ธ ์์ญ์ ์์ ๋๋ ํ๋ถํ๊ณ ์์ธํ๊ฒ ๋ณด์ฌ์ผ ํฉ๋๋ค.
๊ตฌํ:
@layer component-base, component-rich-variant;
@layer component-base {
.news-card { /* ๊ธฐ๋ณธ ์คํ์ผ */ }
}
@layer component-rich-variant {
.news-card {
/* ํฅ์๋ ์คํ์ผ: box-shadow, ๋ ํ๋ถํ ํฐํธ ๋ฑ */
layer-priority: var(--card-is-wide, 0);
}
}
์ปจํ ์ด๋ ์ฟผ๋ฆฌ๊ฐ ์ฌ์ฉ์ ์ง์ ์์ฑ์ ์ค์ ํฉ๋๋ค:
.card-container {
container-type: inline-size;
--card-is-wide: 0;
}
@container (min-width: 600px) {
.card-container {
--card-is-wide: 1;
}
}
์ด์ ์ปจํ ์ด๋๊ฐ ์ถฉ๋ถํ ๋์ด์ง๋ฉด --card-is-wide ๋ณ์๊ฐ 1์ด ๋์ด ํ๋ถํ ๋ณํ ์คํ์ผ์ ์ฐ์ ์์๋ฅผ ๋์ฌ ๊ธฐ๋ณธ ์คํ์ผ์ ์ฌ์ ์ํ๊ฒ ๋ฉ๋๋ค. ์ด๊ฒ์ ์ ์ ์ผ๋ก CSS์ ์ํด ๊ตฌ๋๋๋ ๊น์ด ์บก์ํ๋๊ณ ์ปจํ ์คํธ๋ฅผ ์ธ์ํ๋ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ญ๋๋ค.
4. ์ฌ์ฉ์ ์ฃผ๋ ์ ๊ทผ์ฑ ๋ฐ ํ ๋ง ์ค์
์ฌ์ฉ์๊ฐ ์์ ์ ๊ฒฝํ์ ๋ง์ถค ์ค์ ํ ์ ์๋๋ก ํ๋ ๊ฒ์ ์ ๊ทผ์ฑ๊ณผ ํธ์ํจ์ ์ํด ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ด๊ฒ์ ๋์ ๋ ์ด์ด ์ ์ด๋ฅผ ์ํ ์๋ฒฝํ ์ฌ์ฉ ์ฌ๋ก์ ๋๋ค.
์๋๋ฆฌ์ค: ์ฌ์ฉ์๊ฐ ์ค์ ํจ๋์์ "๊ณ ๋๋น" ๋ชจ๋๋ "๋๋ ์ฆ ์นํ์ ํฐํธ" ๋ชจ๋๋ฅผ ์ ํํ ์ ์์ต๋๋ค.
๊ตฌํ:
@layer theme, components, accessibility;
@layer accessibility {
[data-mode="high-contrast"] * {
background-color: black !important; /* ๊ธฐ์กด ๋ฐฉ์ */
color: white !important;
}
/* ์๋กญ๊ณ ๋ ๋์ ๋ฐฉ์ */
.high-contrast-text {
color: yellow;
layer-priority: var(--high-contrast-enabled, 0);
}
.dyslexia-font {
font-family: 'OpenDyslexic', sans-serif;
layer-priority: var(--dyslexia-font-enabled, 0);
}
}
์ฌ์ฉ์๊ฐ ์ค์ ์ ํ ๊ธํ๋ฉด, ๊ฐ๋จํ ์๋ฐ์คํฌ๋ฆฝํธ ํจ์๊ฐ <body>์ document.body.style.setProperty('--high-contrast-enabled', '1');๊ณผ ๊ฐ์ ์ฌ์ฉ์ ์ง์ ์์ฑ์ ์ค์ ํฉ๋๋ค. ์ด๊ฒ์ ๋ชจ๋ ๊ณ ๋๋น ๊ท์น์ ์ฐ์ ์์๋ฅผ ๋ค๋ฅธ ๋ชจ๋ ๊ฒ๋ณด๋ค ๋์ฌ, ๊ฐ๋ ฅํ !important ํ๋๊ทธ ์์ด๋ ์์ ์ ์ผ๋ก ์ ์ฉ๋๋๋ก ๋ณด์ฅํฉ๋๋ค.
๋ด๋ถ ๋ณด๊ฐ ์๋ ๋ฐฉ์ (๊ฐ๋ ์ ๋ชจ๋ธ)
๋ธ๋ผ์ฐ์ ๊ฐ ์ด๋ฅผ ์ด๋ป๊ฒ ๊ตฌํํ ์ ์๋์ง ์ดํดํ๊ธฐ ์ํด, ์ฐ๋ฆฌ๋ ์บ์ค์ผ์ด๋๋ฅผ ์ด๋ค CSS ์ ์ธ์ด ์ด๊ธฐ๋์ง๋ฅผ ๊ฒฐ์ ํ๋ ์ผ๋ จ์ ์ฒดํฌํฌ์ธํธ๋ก ์๊ฐํ ์ ์์ต๋๋ค. ์ฃผ์ ์ฒดํฌํฌ์ธํธ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์ถ์ฒ์ ์ค์๋ (์: ๋ธ๋ผ์ฐ์ ์คํ์ผ vs. ์์ฑ์ ์คํ์ผ vs. `!important`)
- ์บ์ค์ผ์ด๋ ๋ ์ด์ด
- ๋ช ์๋
- ์์ค ์์
๋์ ๋ ์ด์ด ์ฐ์ ์์ ๋ธ๋ ๋ฉ์ '์บ์ค์ผ์ด๋ ๋ ์ด์ด' ์ฒดํฌํฌ์ธํธ ๋ด์ ํ์ ๋จ๊ณ๋ฅผ ๋์ ํฉ๋๋ค. ๋ธ๋ผ์ฐ์ ๋ ๊ฐ ๊ท์น์ ๋ํ '์ต์ข ์ฐ์ ์์ ๊ฐ์ค์น'๋ฅผ ๊ณ์ฐํฉ๋๋ค. ์ด ๊ธฐ๋ฅ์ด ์์ผ๋ฉด ๋์ผํ ๋ ์ด์ด์ ๋ชจ๋ ๊ท์น์ ๋์ผํ ๋ ์ด์ด ๊ฐ์ค์น๋ฅผ ๊ฐ์ต๋๋ค.
layer-priority๋ฅผ ์ฌ์ฉํ๋ฉด ๊ณ์ฐ์ด ๋ณ๊ฒฝ๋ฉ๋๋ค. @layer L1, L2, L3;๊ณผ ๊ฐ์ ์คํ์ ๊ฒฝ์ฐ, ๋ธ๋ผ์ฐ์ ๋ ๊ธฐ๋ณธ ๊ฐ์ค์น(์: L1=100, L2=200, L3=300)๋ฅผ ํ ๋นํฉ๋๋ค. layer-priority: 0.5;๋ฅผ ๊ฐ์ง L1์ ๊ท์น์ ๊ฐ์ค์น๊ฐ ์ฌ๊ณ์ฐ๋ฉ๋๋ค. ์ด ๊ฐ์ค์น ๋ฒ์๋ 100์์ 300์ ๋๋ค. 50% ๋ณด๊ฐ์ ์๋ก์ด ๊ฐ์ค์น 200์ ์ด๋ํ์ฌ, ์ฌ์ค์ ๋ ์ด์ด L2์ ์ฐ์ ์์๊ฐ ๊ฐ์์ง๋๋ค.
์ด๋ ์ฐ์ ์์๊ฐ ๋ค์๊ณผ ๊ฐ๋ค๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค:
[L1 ๊ท์น @ ๊ธฐ๋ณธ๊ฐ] < [L2 ๊ท์น] = [L1 ๊ท์น @ 0.5] < [L3 ๊ท์น]
์ด๋ฌํ ์ธ๋ถํ๋ ์ ์ด๋ ๋จ์ํ ์ ์ฒด ๋ ์ด์ด๋ฅผ ์ฌ์ ๋ ฌํ๋ ๊ฒ๋ณด๋ค ํจ์ฌ ๋ ๋ฏธ๋ฌํ ์คํ์ผ ์ ์ฉ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
์ฑ๋ฅ ๊ณ ๋ ค์ฌํญ ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก
์ด๋ฌํ ๋์ ๊ธฐ๋ฅ์ ๋ํ ์์ฐ์ค๋ฌ์ด ์ฐ๋ ค๋ ์ฑ๋ฅ์ ๋๋ค. ์ ์ฒด ์บ์ค์ผ์ด๋๋ฅผ ์ฌํ๊ฐํ๋ ๊ฒ์ ๋ธ๋ผ์ฐ์ ๊ฐ ์ํํ ์ ์๋ ๊ฐ์ฅ ๋น์ฉ์ด ๋ง์ด ๋๋ ์์ ์ค ํ๋์ ๋๋ค. ๊ทธ๋ฌ๋ ํ๋ ๋ ๋๋ง ์์ง์ ์ด๋ฅผ ์ํด ๊ณ ๋๋ก ์ต์ ํ๋์ด ์์ต๋๋ค.
- ์ฌ๊ณ์ฐ ํธ๋ฆฌ๊ฑฐ๋ง: layer-priority๋ฅผ ๊ตฌ๋ํ๋ ์ฌ์ฉ์ ์ง์ ์์ฑ์ ๋ณ๊ฒฝํ๋ฉด, ์ฌ๋ฌ ์์์์ ์ฌ์ฉ๋๋ ๋ค๋ฅธ ์ฌ์ฉ์ ์ง์ ์์ฑ์ ๋ณ๊ฒฝํ๋ ๊ฒ๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ์คํ์ผ ์ฌ๊ณ์ฐ์ด ํธ๋ฆฌ๊ฑฐ๋ฉ๋๋ค. ๋ณ๊ฒฝ๋๋ ์คํ์ผ์ด ๋ ์ด์์(์: `width`, `position`)์ด๋ ๋ชจ์์ ์ํฅ์ ๋ฏธ์น์ง ์๋ ํ ๋ฐ๋์ ์ ์ฒด ๋ฆฌํ์ธํธ๋ ๋ฆฌํ๋ก์ฐ๋ฅผ ํธ๋ฆฌ๊ฑฐํ์ง๋ ์์ต๋๋ค.
- ์์ง ์ต์ ํ: ๋ธ๋ผ์ฐ์ ๋ ์ฐ์ ์์ ๋ณํ์ ์ ์ฌ์ ์ํฅ์ ๋ฏธ๋ฆฌ ๊ณ์ฐํ๊ณ ๋ ๋ ํธ๋ฆฌ์ ์ํฅ์ ๋ฐ๋ ์์๋ง ์ ๋ฐ์ดํธํจ์ผ๋ก์จ ์ด๋ฅผ ์ต์ ํํ ์ ์์ต๋๋ค.
์ฑ๋ฅ ์ข์ ๊ตฌํ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
- ๋์ ๋๋ผ์ด๋ฒ ์ ํ: ์์ฒ ๊ฐ์ ์ปดํฌ๋ํธ๊ฐ ์์ฒด ์ฐ์ ์์๋ฅผ ๊ด๋ฆฌํ๊ฒ ํ๋ ๋์ , ``์ด๋ `` ์์์ ๊ฐ์ ์์์ ์์ ์์ค, ์ ์ญ ์ฌ์ฉ์ ์ง์ ์์ฑ์ ์ฌ์ฉํ์ฌ ๋ ์ด์ด ์ฐ์ ์์๋ฅผ ์ ์ดํฉ๋๋ค.
- ๊ณ ๋น๋ ๋ณ๊ฒฝ ํผํ๊ธฐ: `scroll`์ด๋ `mousemove` ์ด๋ฒคํธ์ ๊ฐ์ ์ฐ์์ ์ธ ์ ๋๋ฉ์ด์ ๋ณด๋ค๋ ์ํ ๋ณ๊ฒฝ(์: ํ ๋ง ํ ๊ธ, ๋ชจ๋ฌ ์ด๊ธฐ, ์ปจํ ์ด๋ ์ฟผ๋ฆฌ์ ์๋ต)์ ์ด ๊ธฐ๋ฅ์ ์ฌ์ฉํฉ๋๋ค.
- ๋์ ์ปจํ ์คํธ ๊ฒฉ๋ฆฌ: ๊ฐ๋ฅํ๋ฉด ์ฐ์ ์์ ๋ณํ๋ฅผ ๊ตฌ๋ํ๋ ์ฌ์ฉ์ ์ง์ ์์ฑ์ ๋ฒ์๋ฅผ ํน์ ์ปดํฌ๋ํธ ํธ๋ฆฌ๋ก ์ ํํ์ฌ ์คํ์ผ ์ฌ๊ณ์ฐ์ ๋ฒ์๋ฅผ ์ ํํฉ๋๋ค.
- `contain`๊ณผ ๊ฒฐํฉ: CSS `contain` ์์ฑ์ ์ฌ์ฉํ์ฌ ๋ธ๋ผ์ฐ์ ์ ์ปดํฌ๋ํธ์ ์คํ์ผ๋ง์ด ๊ฒฉ๋ฆฌ๋์ด ์์์ ์๋ ค, ๋ณต์กํ ํ์ด์ง์ ์คํ์ผ ์ฌ๊ณ์ฐ์ ํฌ๊ฒ ๊ฐ์ํํ ์ ์์ต๋๋ค.
๋ฏธ๋: ์ด๊ฒ์ด CSS ์ํคํ ์ฒ์ ์๋ฏธํ๋ ๊ฒ
๋์ ๋ ์ด์ด ์ฐ์ ์์ ๋ธ๋ ๋ฉ๊ณผ ๊ฐ์ ๊ธฐ๋ฅ์ ๋์ ์ ์ฐ๋ฆฌ๊ฐ CSS๋ฅผ ๊ตฌ์กฐํํ๋ ๋ฐฉ์์ ์์ด ์ค์ํ ํจ๋ฌ๋ค์ ์ ํ์ ์๋ฏธํ ๊ฒ์ ๋๋ค.
- ์ ์ ์ธ ๊ฒ์์ ์ํ ๊ธฐ๋ฐ์ผ๋ก: ์ํคํ ์ฒ๋ ๊ฒฝ์ง๋๊ณ ๋ฏธ๋ฆฌ ์ ์๋ ๋ ์ด์ด ์คํ์์ ์คํ์ผ ์ฐ์ ์์๊ฐ ์ ํ๋ฆฌ์ผ์ด์ ๋ฐ ์ฌ์ฉ์ ์ปจํ ์คํธ์ ์ ์ํ๋ ๋ ์ ๋์ ์ธ ์ํ ๊ธฐ๋ฐ ์์คํ ์ผ๋ก ์ด๋ํ ๊ฒ์ ๋๋ค.
- ์๋ฐ์คํฌ๋ฆฝํธ ์์กด์ฑ ๊ฐ์: ํ์ฌ ์คํ์ผ๋ง ๋ชฉ์ ์ผ๋ก ํด๋์ค๋ฅผ ํ ๊ธํ๊ธฐ ์ํด์๋ง ์กด์ฌํ๋ ์๋น๋์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋(์: `element.classList.add('is-active')`)๊ฐ ์์ CSS ์ ๊ทผ ๋ฐฉ์์ผ๋ก ๋์ฒด๋์ด ์ ๊ฑฐ๋ ์ ์์ต๋๋ค.
- ๋ ์ค๋งํธํ ๋์์ธ ์์คํ : ๋์์ธ ์์คํ ์ ์๊ฐ์ ์ผ๋ก ์ผ๊ด๋ ๋ฟ๋ง ์๋๋ผ ์ปจํ ์คํธ์ ์ผ๋ก ์ง๋ฅ์ ์ธ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ์ ์์ผ๋ฉฐ, ๋ฐฐ์น๋ ์์น์ ์ฌ์ฉ์๊ฐ ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ์ํธ ์์ฉํ๋ ๋ฐฉ์์ ๋ฐ๋ผ ์ค์๋์ ์คํ์ผ๋ง์ ์กฐ์ ํ ์ ์์ต๋๋ค.
๋ธ๋ผ์ฐ์ ์ง์ ๋ฐ ํด๋ฆฌํ์ ๋ํ ์ฐธ๊ณ ์ฌํญ
์ด๊ฒ์ ๊ฐ๋ ์ ์ ์์ด๋ฏ๋ก ํ์ฌ ๋ธ๋ผ์ฐ์ ์ง์์ ์์ต๋๋ค. ์ด๋ CSS ์ํน ๊ทธ๋ฃน๊ณผ ๊ฐ์ ํ์ค ๊ธฐ๊ตฌ์์ ๋ ผ์๋ ์ ์๋ ์ ์ฌ์ ์ธ ๋ฏธ๋ ๋ฐฉํฅ์ ๋ํ๋ ๋๋ค. ๋ธ๋ผ์ฐ์ ์ ํต์ฌ ์บ์ค์ผ์ด๋ ๋ฉ์ปค๋์ฆ๊ณผ ๊น์ด ํตํฉ๋์ด ์๊ธฐ ๋๋ฌธ์, ์ฑ๋ฅ ์ข์ ํด๋ฆฌํ์ ๋ง๋๋ ๊ฒ์ ๋ถ๊ฐ๋ฅํ์ง๋ ์๋๋ผ๋ ๋งค์ฐ ์ด๋ ค์ธ ๊ฒ์ ๋๋ค. ํ์คํ๋๊ธฐ๊น์ง์ ๊ณผ์ ์ ์ฌ์ ๋ช ์ธ, ๋ ผ์, ๊ทธ๋ฆฌ๊ณ ๋ธ๋ผ์ฐ์ ๊ณต๊ธ์ ์ฒด์ ์ํ ๋ค์ดํฐ๋ธ ๊ตฌํ์ ํฌํจํ ๊ฒ์ ๋๋ค.
๊ฒฐ๋ก : ๋์ ์บ์ค์ผ์ด๋์ ์์ฉ
CSS ์บ์ค์ผ์ด๋ ๋ ์ด์ด๋ ์ด๋ฏธ ์ฐ๋ฆฌ์๊ฒ ์คํ์ผ์ํธ์ ์ง์๋ฅผ ๋ถ์ฌํ๋ ๊ฐ๋ ฅํ ๋๊ตฌ๋ฅผ ์ ๊ณตํ์ต๋๋ค. ๋ค์ ๊ฐ์ฒ์ง๋ ๊ทธ ์ง์์ ๋์ ์ด๊ณ ์ปจํ ์คํธ๋ฅผ ์ธ์ํ๋ ์ง๋ฅ์ ๋ถ์ด๋ฃ๋ ๊ฒ์ ๋๋ค. ๋์ ๋ ์ด์ด ์ฐ์ ์์ ๋ธ๋ ๋ฉ์ด๋ ์ ์ฌํ ๊ฐ๋ ์ CSS๊ฐ ๋จ์ํ ํํ์ ์ค๋ช ํ๋ ์ธ์ด๊ฐ ์๋๋ผ UI ์ํ๋ฅผ ๊ด๋ฆฌํ๋ ์ ๊ตํ ์์คํ ์ด ๋๋ ๋ฏธ๋๋ฅผ ์ด์ง ์ฟ๋ณผ ์ ์๊ฒ ํด์ค๋๋ค.
์คํ์ผ๋ง ๊ท์น์ ์ฐ์ ์์๋ฅผ ๋ณด๊ฐํ๊ณ ํผํฉํ ์ ์๊ฒ ํจ์ผ๋ก์จ, ์ฐ๋ฆฌ๋ ํ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ณต์ก์ฑ์ ๋ ์ ์ฒ๋ฆฌํ ์ ์๋ ๋ ํ๋ ฅ์ ์ด๊ณ , ์ ์ฐํ๋ฉฐ, ์ ์ง๋ณด์ ๊ฐ๋ฅํ ์์คํ ์ ๊ตฌ์ถํ ์ ์์ต๋๋ค. ๋ค์ค ๋ธ๋๋, ๋ค์ค ์ง์ญ ์ ํ์ ๊ตฌ์ถํ๋ ๊ธ๋ก๋ฒ ํ์๊ฒ ์ด๋ฌํ ์์ค์ ์ ์ด๋ ์ํฌํ๋ก์ฐ๋ฅผ ๋จ์ํํ๊ณ , ํ ์คํธ๋ฅผ ๊ฐ์ํํ๋ฉฐ, ์ฌ์ฉ์ ์ค์ฌ ๋์์ธ์ ์ํ ์๋ก์ด ๊ฐ๋ฅ์ฑ์ ์ด์ด์ค ์ ์์ต๋๋ค. ์บ์ผ์ด๋๋ ๋จ์ํ ๊ท์น์ ๋ชฉ๋ก์ด ์๋๋ผ ์ด์์๋ ์์คํ ์ ๋๋ค. ์ด์ ์ฐ๋ฆฌ๊ฐ ๊ทธ๊ฒ์ ๋์ ์ผ๋ก ์งํํ ์ ์๋ ๋๊ตฌ๋ฅผ ๊ฐ์ง ๋์ ๋๋ค.