๋จ์ ํ ์คํธ ๋ฐ ์คํ์ผ ๊ฒ์ฆ์ ๋ํ ํ์ ์ ์ธ ์ ๊ทผ๋ฒ์ธ CSS @test๋ฅผ ํ์ํ์ฌ, ๋ค์ํ ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๊ธฐ์์ ์ผ๊ด๋๊ณ ๊ฒฌ๊ณ ํ ์น ๋์์ธ์ ๋ณด์ฅํ์ธ์.
CSS @test: ๊ฒฌ๊ณ ํ ์น ๊ฐ๋ฐ์ ์ํ ๋จ์ ํ ์คํธ ๋ฐ ์คํ์ผ ๊ฒ์ฆ
๋์์์ด ์งํํ๋ ์น ๊ฐ๋ฐ ํ๊ฒฝ์์ CSS ์คํ์ผ์ ํ์ง๊ณผ ์ผ๊ด์ฑ์ ๋ณด์ฅํ๋ ๊ฒ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ๊ธฐ์กด์ CSS ๊ฐ๋ฐ์ ์ข
์ข
์๋์ ์ธ ์๊ฐ์ ๊ฒ์ฌ์ ์์ ํ
์คํธ์ ์์กดํ๋๋ฐ, ์ด๋ ์๊ฐ์ด ๋ง์ด ๊ฑธ๋ฆฌ๊ณ ์ค๋ฅ๊ฐ ๋ฐ์ํ๊ธฐ ์ฌ์ฐ๋ฉฐ, ํนํ ๊ธ๋ก๋ฒ ํ์ด ์๋ ๋๊ท๋ชจ ํ๋ก์ ํธ์์๋ ํ์ฅํ๊ธฐ ์ด๋ ต์ต๋๋ค. CSS @test์ ๋์
์ ์ด๋ฌํ ๋ฌธ์ ๋ค์ ํด๊ฒฐํ๊ธฐ ์ํ ํ๊ธฐ์ ์ธ ์ ๊ทผ๋ฒ์ ์ ์ํ๋ฉฐ, ๋จ์ ํ
์คํธ์ ์๋ํ๋ ์คํ์ผ ๊ฒ์ฆ์ ์์น์ CSS ๊ฐ๋ฐ์ ์ต์ ์ ์ผ๋ก ๊ฐ์ ธ์ต๋๋ค.
CSS @test๋ ๋ฌด์์ธ๊ฐ?
CSS @test๋ ๊ฐ๋ฐ์๊ฐ ์คํ์ผ์ํธ ๋ด์์ ์ง์ ๋จ์ ํ
์คํธ๋ฅผ ์์ฑํ ์ ์๋๋ก ํ๋ ๋ค์ดํฐ๋ธ CSS ๊ธฐ๋ฅ์ ๋ํ ์ ์์
๋๋ค. ์ด๋ CSS ๊ท์น์ ์์ ๋์์ ๋ํ ๋จ์ธ(assertion)์ ์ ์ํ๋ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํ์ฌ, ๋ค์ํ ๋ธ๋ผ์ฐ์ ์ ํ๊ฒฝ์์ ์คํ์ผ์ ๋ํ ์๋ํ๋ ๊ฒ์ฆ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. ๋ง์น Jest๋ Mocha์ ๊ฐ์ ๋จ์ ํ
์คํธ ํ๋ ์์ํฌ์ ๊ฐ๋ ฅํจ๊ณผ ์ ๋ขฐ์ฑ์ CSS์ ์ธ๊ณ๋ก ๊ฐ์ ธ์ค๋ ๊ฒ์ด๋ผ๊ณ ์๊ฐํ ์ ์์ต๋๋ค.
์์ง ์ ์ ๋จ๊ณ์ด๊ณ ์ฃผ์ ๋ธ๋ผ์ฐ์ ์ ๊ตฌํ๋์ง๋ ์์์ง๋ง, @test์ ๊ฐ๋
์ ์น ๊ฐ๋ฐ ์ปค๋ฎค๋ํฐ ๋ด์์ ์๋นํ ๊ด์ฌ๊ณผ ๋
ผ์๋ฅผ ๋ถ๋ฌ์ผ์ผ์ผฐ์ต๋๋ค. ๋ ๋์ ์คํ์ผ ์ํคํ
์ฒ๋ฅผ ์ด์งํ๊ณ , ํ๊ท(regression)๋ฅผ ์ค์ด๋ฉฐ, ์ ๋ฐ์ ์ธ ์ฝ๋ ํ์ง์ ํฅ์์ํด์ผ๋ก์จ CSS ๊ฐ๋ฐ์ ํ์ ํ ์ ์๋ ์ ์ฌ๋ ฅ์ ๋ถ์ธํ ์ ์์ต๋๋ค.
CSS ๋จ์ ํ ์คํธ์ ํ์์ฑ
@test์ ์ธ๋ถ ์ฌํญ์ ์ดํด๋ณด๊ธฐ ์ ์, ์ CSS ๋จ์ ํ
์คํธ๊ฐ ํ๋ ์น ๊ฐ๋ฐ์ ํ์์ ์ธ์ง ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค:
- ์ผ๊ด์ฑ: ๋ค์ํ ๋ธ๋ผ์ฐ์ ์ ์ฅ์น์์ ์ผ๊ด๋ ์คํ์ผ๋ง์ ๋ณด์ฅํ์ฌ ๋ ๊ท ์ผํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค. ์ด๋ ๋ค์ํ ์ฅ์น ์ฌ์ฉ๋์ ๊ฐ์ง ๊ธ๋ก๋ฒ ๊ณ ๊ฐ์ ๋์์ผ๋ก ํ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ํนํ ์ค์ํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ๋ฒํผ ์คํ์ผ์ ๋ถ๋ฏธ์ ๋ฐ์คํฌํฑ, ์์์์ ๋ชจ๋ฐ์ผ ์ฅ์น, ๋๋ ์ ๋ฝ์ ํ๋ธ๋ฆฟ์์ ๋ณด๋๋ผ๋ ์ผ๊ด๋๊ฒ ๋ณด์ด๊ณ ๋์ํด์ผ ํฉ๋๋ค.
- ์ ์ง๋ณด์์ฑ: ์๋ํ์ง ์์ ๋ถ์์ฉ์ ์ผ์ผํค์ง ์๊ณ CSS ์ฝ๋๋ฅผ ๋ฆฌํฉํ ๋งํ๊ณ ์ ๋ฐ์ดํธํ๊ธฐ ์ฝ๊ฒ ๋ง๋ญ๋๋ค. ๊ธฐ๋ณธ ์คํ์ผ์ ๋ณ๊ฒฝํ ๋, ๋จ์ ํ ์คํธ๋ ๊ตญ์ ์ ์ธ ์ฝ๋๋ฒ ์ด์ค ์ ๋ฐ์ ๊ฑธ์ณ ๊นจ์ง ์ปดํฌ๋ํธ๋ฅผ ์ ์ํ๊ฒ ์ฐพ์๋ผ ์ ์์ต๋๋ค.
- ํ๊ท ๋ฐฉ์ง: ์์๋ ๋์์์ ๋ฒ์ด๋๋ ์คํ์ผ ๋ณ๊ฒฝ์ ์๋์ผ๋ก ๊ฐ์งํ์ฌ ํ๊ท๋ฅผ ๋ฐฉ์งํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค. ์๋ก์ด ๋์์ธ ๋ณ๊ฒฝ์ ๋ฐฐํฌํ๋ฉด์ ํน์ ์ง์ญ์์ ์ฃผ๋ก ์ฌ์ฉ๋๋ ๋ ์ผ๋ฐ์ ์ธ ๋ธ๋ผ์ฐ์ ์์ ์ค์ํ ์ปดํฌ๋ํธ์ ๋ ์ด์์์ด ์์ ๋ ๋ชจ๋ฅด๊ฒ ๊นจ์ง๋ ์ํฉ์ ์์ํด ๋ณด์ญ์์ค. ๋จ์ ํ ์คํธ๋ ์ค์ ์ฌ์ฉ์์๊ฒ ์ํฅ์ ๋ฏธ์น๊ธฐ ์ ์ ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ์ก์๋ผ ์ ์์ต๋๋ค.
- ํ์ : CSS ๊ท์น์ ์์ ๋์์ ๋ํ ๋ช ํํ๊ณ ๋ฌธ์ํ๋ ์ฌ์์ ์ ๊ณตํ์ฌ ๊ฐ๋ฐ์ ๊ฐ์ ํ์ ์ ๊ฐ์ ํฉ๋๋ค. ๊ธ๋ก๋ฒํ๊ฒ ๋ถ์ฐ๋ ํ์ ๊ฒฝ์ฐ, ์ด๋ ํ์๋ค์ด ์๋ก ๋ค๋ฅธ ๋ฌธํ์ ๋ฐฐ๊ฒฝ์ด๋ ์์ฌ์ํต ์คํ์ผ์ ๊ฐ์ง๊ณ ์๋๋ผ๋ ์คํ์ผ์ ๋ํ ๊ณตํต๋ ์ดํด๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ํ์ฅ์ฑ: ์คํ์ผ ๊ฒ์ฆ์ ์๋ํํ๊ณ ์๋์ ์ธ ์๊ฐ์ ๊ฒ์ฌ์ ํ์์ฑ์ ์ค์์ผ๋ก์จ CSS ๊ฐ๋ฐ ๋ ธ๋ ฅ์ ํ์ฅํ ์ ์๊ฒ ํฉ๋๋ค. ์ด๋ ๋ณต์กํ ์คํ์ผ ์ํคํ ์ฒ์ ์ ์ธ๊ณ์ ์๋ง์ ๊ธฐ์ฌ์๊ฐ ์๋ ๋๊ท๋ชจ ํ๋ก์ ํธ์ ๋งค์ฐ ์ค์ํฉ๋๋ค.
CSS @test์ ์๋ ๋ฐฉ์ (๊ฐ์ ๊ตฌํ)
@test์ ๊ตฌ์ฒด์ ์ธ ๊ตฌ๋ฌธ๊ณผ ๊ตฌํ ์ธ๋ถ ์ฌํญ์ ๋ค๋ฅผ ์ ์์ง๋ง, ์ผ๋ฐ์ ์ธ ๊ฐ๋
์ CSS ํ์ผ ๋ด์์ ์ง์ ํ
์คํธ ์ผ์ด์ค๋ฅผ ์ ์ํ๋ ๊ฒ์ ํฌํจํฉ๋๋ค. ์ด๋ฌํ ํ
์คํธ ์ผ์ด์ค๋ ํน์ ์กฐ๊ฑด ํ์์ ํน์ CSS ์์ฑ์ด ํน์ ๊ฐ์ ๊ฐ์ ธ์ผ ํ๋ค๊ณ ๋จ์ธํ ๊ฒ์
๋๋ค.
๋ค์์ ๊ฐ๋ ์ ์ธ ์์์ ๋๋ค:
/* ๋ฒํผ ์คํ์ผ ์ ์ */
.button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
@test .button {
/* ๋ฐฐ๊ฒฝ์์ด ์ฌ๋ฐ๋ฅธ์ง ํ
์คํธ */
assert-property: background-color;
assert-value: #007bff;
/* ํ
์คํธ ์์์ด ์ฌ๋ฐ๋ฅธ์ง ํ
์คํธ */
assert-property: color;
assert-value: white;
/* ํจ๋ฉ์ด ์ฌ๋ฐ๋ฅธ์ง ํ
์คํธ */
assert-property: padding;
assert-value: 10px 20px;
}
@test .button:hover {
/* hover ์ ๋ฐฐ๊ฒฝ์์ด ๋ณ๊ฒฝ๋๋์ง ํ
์คํธ */
assert-property: background-color;
assert-value: #0056b3;
}
์ด ์์์ @test ๋ธ๋ก์ .button ํด๋์ค์ ๋ํ ์ผ๋ จ์ ๋จ์ธ์ ์ ์ํฉ๋๋ค. ๊ฐ ๋จ์ธ์ CSS ์์ฑ๊ณผ ์์ ๊ฐ์ ์ง์ ํฉ๋๋ค. ๊ทธ๋ฌ๋ฉด ํ
์คํธ ๋๊ตฌ๊ฐ ์ด๋ฌํ ํ
์คํธ๋ฅผ ์๋์ผ๋ก ์คํํ๊ณ ์คํจ๋ฅผ ๋ณด๊ณ ํฉ๋๋ค.
๊ฐ์ @test ๊ตฌํ์ ์ฃผ์ ์ธก๋ฉด:
- ์ ํ์: ํ
์คํธ๋ ํน์ CSS ์ ํ์(์:
.button,.button:hover)์ ์ฐ๊ด๋ฉ๋๋ค. - ๋จ์ธ: ๋จ์ธ์ CSS ์์ฑ์ ์์ ๊ฐ์ ์ ์ํฉ๋๋ค(์:
assert-property: background-color; assert-value: #007bff;). - ์กฐ๊ฑด: ํ
์คํธ๋ ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ ๋ค๋ฅธ CSS ๊ธฐ๋ฅ์ ๊ธฐ๋ฐ์ผ๋ก ์กฐ๊ฑด๋ถ์ผ ์ ์์ต๋๋ค(์: ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ๋ํ ๋ค๋ฅธ ์คํ์ผ ํ
์คํธ, ์ด๋ ๋ฐ์ํ ๋์์ธ ๊ฒ์ฆ์ ํ์์ ์
๋๋ค). ์์ ํ๋ฉด์์ ํ๋ฒ๊ฑฐ ๋ฉ๋ด๋ก ๋ณํ๋๋ ๋ด๋น๊ฒ์ด์
๋ฉ๋ด๋ฅผ ํ
์คํธํ๋ค๊ณ ์์ํด ๋ณด์ญ์์ค.
@test๋ ๋ค์ํ ๋ทฐํฌํธ ํฌ๊ธฐ์์ ์ฌ๋ฐ๋ฅธ ๋ฉ๋ด ๊ตฌ์กฐ์ ์คํ์ผ๋ง์ ๊ฒ์ฆํ ์ ์์ต๋๋ค. - ๋ณด๊ณ : ํ ์คํธ ๋๊ตฌ๋ ์ด๋ค ํ ์คํธ๊ฐ ํต๊ณผํ๊ฑฐ๋ ์คํจํ๋์ง๋ฅผ ๋ํ๋ด๋ ๋ณด๊ณ ์๋ฅผ ์ ๊ณตํ์ฌ ๊ฐ๋ฐ์๊ฐ ์คํ์ผ ๋ฌธ์ ๋ฅผ ์ ์ํ๊ฒ ์๋ณํ๊ณ ์์ ํ๋๋ก ๋์ต๋๋ค. ๋ณด๊ณ ์๋ ๊ตญ์ ํ์ ๋๋ฒ๊น ์ ์ฉ์ดํ๊ฒ ํ๊ธฐ ์ํด ๋ค๋ฅธ ์ธ์ด๋ก ํ์งํ๋ ์๋ ์์ต๋๋ค.
CSS @test ์ฌ์ฉ์ ์ด์
CSS @test๋ฅผ ์ฑํํ ๋์ ์ ์ฌ์ ์ด์ ์ ์๋นํฉ๋๋ค:
- CSS ํ์ง ํฅ์: ๊ฐ๋ฐ์๋ค์ด ๋ ๋ชจ๋ํ๋๊ณ , ์ ์ง๋ณด์ ๊ฐ๋ฅํ๋ฉฐ, ํ ์คํธ ๊ฐ๋ฅํ CSS ์ฝ๋๋ฅผ ์์ฑํ๋๋ก ์ฅ๋ คํฉ๋๋ค.
- ํ๊ท ๋ฒ๊ทธ ๊ฐ์: ์๋ํ์ง ์์ ์คํ์ผ ๋ณ๊ฒฝ์ ์๋์ผ๋ก ๊ฐ์งํ์ฌ ํ๊ท ๋ฒ๊ทธ๋ฅผ ์๋ฐฉํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
- ๋ ๋น ๋ฅธ ๊ฐ๋ฐ ์ฃผ๊ธฐ: ์คํ์ผ ๊ฒ์ฆ์ ์๋ํํ์ฌ ์๋์ ์ธ ์๊ฐ์ ๊ฒ์ฌ์ ํ์์ฑ์ ์ค์ด๊ณ ๊ฐ๋ฐ ์ฃผ๊ธฐ๋ฅผ ๋จ์ถํฉ๋๋ค.
- ํ์ ๊ฐํ: CSS ๊ท์น์ ์์ ๋์์ ๋ํ ๋ช ํํ๊ณ ๋ฌธ์ํ๋ ์ฌ์์ ์ ๊ณตํ์ฌ, ํนํ ์ ์ธ๊ณ์ ๋ถ์ฐ๋ ํ์์ ๊ฐ๋ฐ์ ๊ฐ์ ํ์ ์ ๊ฐ์ ํฉ๋๋ค.
- ๋ ๋์ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ ํธํ์ฑ: ๋ค์ํ ๋ธ๋ผ์ฐ์ ์ ํ๊ฒฝ์์ CSS๋ฅผ ํ ์คํธํ์ฌ ์ ์ธ๊ณ ๋ชจ๋ ์ฌ์ฉ์์๊ฒ ์ผ๊ด๋ ์คํ์ผ๋ง์ ๋ณด์ฅํ๋ ๊ฒ์ ์ฉ์ดํ๊ฒ ํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ํ ์คํธ๋ ๋ถ๋ฏธ์ ์ ๋ฝ์ Chrome, ์ ๋ฝ์ Firefox, ๊ทธ๋ฆฌ๊ณ ์ผ๋ถ ์์์ ๊ตญ๊ฐ์์ ์ธ๊ธฐ ์๋ UC Browser์ ๊ฐ์ ์ง์ญ๋ณ ๋ธ๋ผ์ฐ์ ์ ๋ํด ์คํ๋๋๋ก ๊ตฌ์ฑํ ์ ์์ต๋๋ค.
- ์์ ๊ฐ ์ฆ๊ฐ: ๊ฐ๋ฐ์๋ค์๊ฒ ์์ ์ CSS ์ฝ๋๊ฐ ์ฒ ์ ํ ํ ์คํธ๋๊ณ ๊ฒ์ฆ๋์๋ค๋ ์ฌ์ค์ ์๋ ค์ฃผ์ด ๋ ํฐ ์์ ๊ฐ์ ์ค๋๋ค.
๊ณผ์ ๋ฐ ๊ณ ๋ ค์ฌํญ
CSS @test์ ๊ฐ๋
์ ์ ๋งํ์ง๋ง, ์ผ๋์ ๋์ด์ผ ํ ๋ช ๊ฐ์ง ๊ณผ์ ์ ๊ณ ๋ ค์ฌํญ๋ ์์ต๋๋ค:
- ๋ธ๋ผ์ฐ์ ์ง์: ์ ์๋ ๊ธฐ๋ฅ์ผ๋ก์
@test๋ ์์ง ์ด๋ค ์ฃผ์ ๋ธ๋ผ์ฐ์ ์์๋ ์ง์๋์ง ์์ต๋๋ค. ์ฑํ ์ฌ๋ถ๋ ๋ธ๋ผ์ฐ์ ๊ณต๊ธ์ ์ฒด๊ฐ ์ด ๊ธฐ๋ฅ์ ๊ตฌํํ๋์ง์ ๋ฌ๋ ค ์์ต๋๋ค. - ๋๊ตฌ: CSS ํ ์คํธ๋ฅผ ์คํํ๊ณ ๊ฒฐ๊ณผ๋ฅผ ๋ณด๊ณ ํ๊ธฐ ์ํ ํจ๊ณผ์ ์ธ ๋๊ตฌ๊ฐ ํ์ํฉ๋๋ค. ์ด ๋๊ตฌ๋ ๊ธฐ์กด ๋น๋ ํ๋ก์ธ์ค ๋ฐ CI/CD ํ์ดํ๋ผ์ธ์ ํตํฉ๋ ์ ์์ต๋๋ค. ํ์ด ์ ํธํ๋ ์ธ์ด๋ก ํ ์คํธ๋ฅผ ์์ฑํ๊ฑฐ๋ ์ง์ญ๋ณ ๋์์ธ ๊ฐ์ด๋๋ผ์ธ์ ๋ฐ๋ผ ์คํ์ผ์ ๊ฒ์ฆํ ์ ์๋๋ก ๊ตญ์ ํ๋ฅผ ์ง์ํ๋ ๋๊ตฌ๋ฅผ ๊ณ ๋ คํ์ญ์์ค.
- ํ์ต ๊ณก์ : ๊ฐ๋ฐ์๋ CSS ํ ์คํธ๋ฅผ ์์ฑํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์์ผ ํ๋ฉฐ, ์ด๋ ์ฌ๊ณ ๋ฐฉ์๊ณผ ์์ ํ๋ฆ์ ์ ํ์ ์๊ตฌํ ์ ์์ต๋๋ค. ๊ต์ก ์๋ฃ, ํํ ๋ฆฌ์ผ, ์ฝ๋ ์์ ๊ฐ ์ฑ๊ณต์ ์ธ ์ฑํ์ ๋งค์ฐ ์ค์ํ ๊ฒ์ ๋๋ค.
- ํ ์คํธ ์ปค๋ฒ๋ฆฌ์ง: ๋ชจ๋ CSS ๊ท์น์ ๋ํด ํฌ๊ด์ ์ธ ํ ์คํธ ์ปค๋ฒ๋ฆฌ์ง๋ฅผ ๋ฌ์ฑํ๋ ๊ฒ์, ํนํ ํฌ๊ณ ๋ณต์กํ ํ๋ก์ ํธ์์ ์ด๋ ค์ธ ์ ์์ต๋๋ค. ์ฐ์ ์์ ์ง์ ๊ณผ ์ ๋ต์ ์ธ ํ ์คํธ ๊ณํ์ด ํ์์ ์ ๋๋ค. ์ค์ํ ์ปดํฌ๋ํธ์ ๊ณตํต UI ํจํด์ ๋จผ์ ํ ์คํธํ๋ ๋ฐ ์ง์คํ์ญ์์ค.
- ๋ช ์์ฑ ๋ฌธ์ : CSS ๋ช ์์ฑ์ ์ ํํ๊ณ ์ ๋ขฐํ ์ ์๋ ํ ์คํธ๋ฅผ ์์ฑํ๊ธฐ ์ด๋ ต๊ฒ ๋ง๋ค ์ ์์ต๋๋ค. CSS ์ํคํ ์ฒ์ ์ ํ์ ์ค๊ณ์ ์ธ์ฌํ ์ฃผ์๊ฐ ์ค์ํฉ๋๋ค.
- ๋์ ์คํ์ผ: JavaScript์ ์ํด ๋์ ์ผ๋ก ์์ ๋๋ ์คํ์ผ์ ํ ์คํธํ๋ ๊ฒ์ ๋ ๋ณต์กํ ์ ์์ผ๋ฉฐ JavaScript ํ ์คํธ ํ๋ ์์ํฌ์์ ํตํฉ์ด ํ์ํ ์ ์์ต๋๋ค.
CSS @test์ ๋์
@test์ ๋ํ ๋ค์ดํฐ๋ธ ๋ธ๋ผ์ฐ์ ์ง์์ ๊ธฐ๋ค๋ฆฌ๋ ๋์, CSS ์คํ์ผ์ ๊ฒ์ฆํ๋ ๋ฐ ์ฌ์ฉํ ์ ์๋ ๋ช ๊ฐ์ง ๋์์ ์ธ ์ ๊ทผ๋ฒ์ด ์์ต๋๋ค:
- ์๊ฐ์ ํ๊ท ํ ์คํธ: BackstopJS, Percy, Chromatic๊ณผ ๊ฐ์ ๋๊ตฌ๋ ์ฌ๋ฌ ํ๊ฒฝ์์ ์น ํ์ด์ง์ ์คํฌ๋ฆฐ์ท์ ๋น๊ตํ์ฌ ์๊ฐ์ ์ฐจ์ด๋ฅผ ๊ฐ์งํฉ๋๋ค. ์ด๋ ์๊ฐ์ ํ๊ท๋ฅผ ์ก์๋ด๋ ํจ๊ณผ์ ์ธ ๋ฐฉ๋ฒ์ด์ง๋ง, ๋จ์ ํ ์คํธ๋ณด๋ค ์๊ฐ์ด ๋ ๋ง์ด ๊ฑธ๋ฆฌ๊ณ ๋ ๋ง์ ์๋ ๊ฒํ ๊ฐ ํ์ํ ์ ์์ต๋๋ค. ์๊ฐ์ ํ๊ท ํ ์คํธ๋ ์น์ฌ์ดํธ์ ํ์งํ๋ ๋ฒ์ ๊ฐ์ ์ผ๊ด์ฑ์ ๋ณด์ฅํ๊ณ , ๊ทธ๋ ์ง ์์ผ๋ฉด ๋์ ๋์ง ์์ ์ ์๋ ๋ ์ด์์์ด๋ ํ์ดํฌ๊ทธ๋ํผ์ ๋ฏธ๋ฌํ ์ฐจ์ด๋ฅผ ์ก์๋ด๋ ๋ฐ ๋งค์ฐ ์ ์ฉํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ์ค๊ตญ์ด ๋ฒ์ ์ฌ์ดํธ์ ํฐํธ ๋ ๋๋ง ๋ณ๊ฒฝ์ ์๊ฐ์ ํ๊ท ํ ์คํธ๋ฅผ ์ฌ์ฉํ์ฌ ์ฝ๊ฒ ์๋ณํ ์ ์์ต๋๋ค.
- Stylelint: ์ฝ๋ฉ ํ์ค๊ณผ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ฐ์ ํ๋ ๊ฐ๋ ฅํ CSS ๋ฆฐํฐ์ ๋๋ค. Stylelint๋ CSS ์ฝ๋์ ์ค๋ฅ์ ๋ถ์ผ์น๋ฅผ ๋ฐฉ์งํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ง๋ง, ๋จ์ ํ ์คํธ๋ฅผ ์ํ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํ์ง๋ ์์ต๋๋ค. Stylelint๋ ๋ค๋ฅธ ์ง์ญ์ด๋ ๋์์ธ ์์คํ ์ ํน์ ํ ๊ท์น์ผ๋ก ๊ตฌ์ฑํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ์ ๋ฝ ์น์ฌ์ดํธ์ ๋ถ๋ฏธ ์น์ฌ์ดํธ์ ๋ํด ์ง์ญ์ ๋์์ธ ์ ํธ๋๋ฅผ ๋ฐ์ํ์ฌ ๋ค๋ฅธ ๋ฆฐํ ๊ท์น์ ๊ฐ์ง ์ ์์ต๋๋ค.
- CSS ๋ชจ๋ ๋ฐ ์คํ์ผ๋ ์ปดํฌ๋ํธ: ์ด๋ฌํ ๊ธฐ์ ์ ๋ชจ๋์ CSS ๊ฐ๋ฐ์ ์ด์งํ์ฌ ์คํ์ผ์ ์ถ๋ก ํ๊ณ ํ ์คํธํ๊ธฐ ์ฝ๊ฒ ๋ง๋ญ๋๋ค. ์คํ์ผ์ ์ปดํฌ๋ํธ ๋ด์ ์บก์ํํจ์ผ๋ก์จ ์คํ์ผ ์ถฉ๋์ ์ํ์ ์ค์ด๊ณ ์ ์ง๋ณด์์ฑ์ ํฅ์์ํต๋๋ค. ์ด๋ฌํ ์ ๊ทผ ๋ฐฉ์์ ์ ํ๋ ์ธ์ด์ ๋ฐ๋ผ ์คํ์ผ๋ง์ ๋ณํ์ ์ฝ๊ฒ ๊ด๋ฆฌํ ์ ์๊ฒ ํด์ฃผ๋ฏ๋ก ๋ค๊ตญ์ด ์น์ฌ์ดํธ๋ฅผ ๋ค๋ฃฐ ๋ ํนํ ์ ์ฉํฉ๋๋ค.
- ์๋ ์๊ฐ์ ๊ฒ์ฌ: ์ด์์ ์ด์ง๋ ์์ง๋ง, ์๋ ์๊ฐ์ ๊ฒ์ฌ๋ ์ฌ์ ํ CSS ์คํ์ผ์ ๊ฒ์ฆํ๋ ์ผ๋ฐ์ ์ธ ๊ดํ์ ๋๋ค. ๊ทธ๋ฌ๋ ์ด ์ ๊ทผ ๋ฐฉ์์ ์๊ฐ์ด ๋ง์ด ๊ฑธ๋ฆฌ๊ณ , ์ค๋ฅ๊ฐ ๋ฐ์ํ๊ธฐ ์ฌ์ฐ๋ฉฐ, ํ์ฅํ๊ธฐ ์ด๋ ต์ต๋๋ค.
- JavaScript ํ ์คํธ ํ๋ ์์ํฌ์์ ํตํฉ: Jest๋ Mocha์ ๊ฐ์ JavaScript ํ ์คํธ ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ์ฌ DOM๊ณผ ์ํธ ์์ฉํ๊ณ ์์์ ๊ณ์ฐ๋ ์คํ์ผ์ ๋ํด ๋จ์ธํจ์ผ๋ก์จ CSS ์คํ์ผ์ ํ ์คํธํ ์ ์์ต๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ๋ ๋์ ์ด๊ณ ๋ณต์กํ ํ ์คํธ ์๋๋ฆฌ์ค๋ฅผ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
์ค์ฉ์ ์ธ ์์ ๋ฐ ์ฌ์ฉ ์ฌ๋ก
CSS @test์ ์ ์ฌ๋ ฅ์ ์ค๋ช
ํ๊ธฐ ์ํด ๋ช ๊ฐ์ง ์ค์ฉ์ ์ธ ์์์ ์ฌ์ฉ ์ฌ๋ก๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค:
- ๋ฐ์ํ ๋์์ธ ๊ฒ์ฆ:
@test๋ฅผ ์ฌ์ฉํ์ฌ CSS ์คํ์ผ์ด ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ์ฅ์น์ ์ฌ๋ฐ๋ฅด๊ฒ ์ ์ํ๋์ง ํ์ธํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ๋ด๋น๊ฒ์ด์ ๋ฉ๋ด๊ฐ ์์ ํ๋ฉด์์ ํ๋ฒ๊ฑฐ ๋ฉ๋ด๋ก ๋ณํ๋๋์ง ํ ์คํธํ ์ ์์ต๋๋ค. ๋ค์ํ ๋ทฐํฌํธ ํฌ๊ธฐ์ ๋ํ ํ ์คํธ๋ ๋ค์ํ ์ฅ์น๋ฅผ ๊ฐ์ง ๊ธ๋ก๋ฒ ๊ณ ๊ฐ์๊ฒ ๋งค์ฐ ์ค์ํฉ๋๋ค. - ์ปดํฌ๋ํธ ์คํ์ผ ํ ์คํธ: ๋ฒํผ, ํผ, ์นด๋์ ๊ฐ์ ๊ฐ๋ณ UI ์ปดํฌ๋ํธ์ ์คํ์ผ์ ๊ฒ์ฆํ์ฌ ์ฌ๋ฐ๋ฅด๊ณ ์ผ๊ด๋๊ฒ ๋ ๋๋ง๋๋์ง ํ์ธํฉ๋๋ค. ์ด๋ ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฑธ์ณ ์ผ๊ด๋ ๋์์ธ ์ธ์ด๋ฅผ ์ ์งํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
- ํ
๋ง ์ปค์คํฐ๋ง์ด์ง ๊ฒ์ฆ: ํ
๋ง ์ปค์คํฐ๋ง์ด์ง์ด ์ฌ๋ฐ๋ฅด๊ฒ ์ ์ฉ๋๊ณ ํ๊ท๋ฅผ ์ผ์ผํค์ง ์๋์ง ํ
์คํธํฉ๋๋ค. ์ด๋ ์ฌ์ฉ์๊ฐ ์ธํฐํ์ด์ค์ ๋ชจ์๊ณผ ๋๋์ ์ฌ์ฉ์ ์ ์ํ ์ ์๋ ์ ํ๋ฆฌ์ผ์ด์
์ ํนํ ์ค์ํฉ๋๋ค. ๋ค์ํ ๋ฌธํ์ ๋ฏธํ์ ๋ง๋ ํ
๋ง๋ฅผ ์ ๊ณตํ๋ ์ ํ๋ฆฌ์ผ์ด์
์ ์๊ฐํด ๋ณด์ญ์์ค.
@test๋ ๊ฐ ํ ๋ง๊ฐ ์ ์ธ๊ณ์ ์ผ๋ก ์์๋๋ก ๋ ๋๋ง๋๋๋ก ๋ณด์ฅํ ๊ฒ์ ๋๋ค. - ์ ๊ทผ์ฑ ๋ณด์ฅ:
@test๋ฅผ ์ฌ์ฉํ์ฌ ์ถฉ๋ถํ ์์ ๋๋น ๋ฐ ์ ์ ํ ํฌ์ปค์ค ํ์๊ธฐ์ ๊ฐ์ ์ ๊ทผ์ฑ ์๊ตฌ ์ฌํญ์ CSS ์คํ์ผ์ด ์ถฉ์กฑํ๋์ง ํ์ธํฉ๋๋ค. ์ด๋ ์ฅ์ ๊ฐ ์๋ ์ฌ๋๋ค๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ์ฉํ ์ ์๋๋ก ๋ณด์ฅํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค. ์ ๊ทผ์ฑ ํ์ค์ ์ง์ญ๋ง๋ค ๋ค๋ฆ ๋๋ค. ์๋ฅผ ๋ค์ด, ์ ๋ฝ์ EN 301 549๋ฅผ ๋ฐ๋ฅด๊ณ , ๋ฏธ๊ตญ์ ์น์ 508์ ์ค์ํฉ๋๋ค.@test๋ ํน์ ์ง์ญ์ ์ ๊ทผ์ฑ ํ์ค์ ๋ฐ๋ผ ์คํ์ผ์ ๊ฒ์ฆํ๋๋ก ์กฐ์ ํ ์ ์์ต๋๋ค. - ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ ํธํ์ฑ ํ
์คํธ:
@test๋ฅผ ๋ค์ํ ๋ธ๋ผ์ฐ์ ์ ํ๊ฒฝ์ ๋ํด ์คํํ๋๋ก ๊ตฌ์ฑํ์ฌ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ ํธํ์ฑ ๋ฌธ์ ๋ฅผ ์๋ณํ๊ณ ์์ ํฉ๋๋ค. ์ด๋ ๋ธ๋ผ์ฐ์ ๋ ์ฅ์น์ ๊ด๊ณ์์ด ๋ชจ๋ ์ฌ์ฉ์๊ฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ๋ฐ๋ฅด๊ฒ ๋ ๋๋งํ๋๋ก ๋ณด์ฅํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค. ์๋ฎฌ๋ ์ดํฐ์ ์๋ฎฌ๋ ์ดํฐ์์์ ํ ์คํธ๋ ์ค์ํ์ง๋ง, ๋ค๋ฅธ ์ง์ญ์ ์ค์ ์ฅ์น์์ ํ ์คํธํ๋ ๊ฒ์ด ๊ฐ์ฅ ์ ํํ ๊ฒฐ๊ณผ๋ฅผ ์ ๊ณตํฉ๋๋ค. - CSS ์ ๋๋ฉ์ด์
๋ฐ ์ ํ ํ
์คํธ:
@test๋ฅผ ์ฌ์ฉํ์ฌ CSS ์ ๋๋ฉ์ด์ ๋ฐ ์ ํ์ ๋์์ ๊ฒ์ฆํ์ฌ ๋ค์ํ ๋ธ๋ผ์ฐ์ ์์ ๋ถ๋๋ฝ๊ณ ์ฑ๋ฅ์ด ์ข์์ง ํ์ธํฉ๋๋ค. ์ด๋ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ๊ณ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ๋ฐฉ์งํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค. - RTL (์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ) ๋ ์ด์์ ๊ฒ์ฆ: RTL ์ธ์ด(์: ์๋์ด, ํ๋ธ๋ฆฌ์ด)๋ฅผ ์ง์ํ๋ ์ ํ๋ฆฌ์ผ์ด์
์ ๊ฒฝ์ฐ,
@test๋ฅผ ์ฌ์ฉํ์ฌ ๋ ์ด์์๊ณผ ์คํ์ผ์ด ์ฌ๋ฐ๋ฅด๊ฒ ๋ฏธ๋ฌ๋ง๋๋์ง ํ์ธํฉ๋๋ค. ์ด๋ RTL ์ธ์ด ์ฌ์ฉ์์๊ฒ ์ํํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค.
๊ธ๋ก๋ฒ ํ์ ์ํ ์คํ ๊ฐ๋ฅํ ํต์ฐฐ๋ ฅ
๊ธ๋ก๋ฒ ์น ๊ฐ๋ฐ ํ์๊ฒ @test๋ ๋์์ ์ธ ๋ฐฉ๋ฒ์ ํตํด CSS ํ
์คํธ๋ฅผ ํตํฉํ๋ ๊ฒ์ ์์
์ ํ์ง๊ณผ ์ผ๊ด์ฑ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ์คํ ๊ฐ๋ฅํ ํต์ฐฐ๋ ฅ์
๋๋ค:
- CSS ์คํ์ผ ๊ฐ์ด๋ ์๋ฆฝ: ์ฝ๋ฉ ํ์ค, ๋ชจ๋ฒ ์ฌ๋ก ๋ฐ ๋์์ธ ์์น์ ๊ฐ๊ดํ๋ ํฌ๊ด์ ์ธ CSS ์คํ์ผ ๊ฐ์ด๋๋ฅผ ๋ง๋ญ๋๋ค. ์ด๋ ์ ์ฒด ํ๋ก์ ํธ์์ ์ผ๊ด์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ๋ณด์ฅํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค. ๊ตญ์ ํ ๊ฐ์ ์ดํด๋ฅผ ์ฆ์ง์ํค๊ธฐ ์ํด ์คํ์ผ ๊ฐ์ด๋๋ฅผ ์ฌ๋ฌ ์ธ์ด๋ก ๋ฒ์ญํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค.
- CSS ๋ฆฐํ ํ๋ก์ธ์ค ๊ตฌํ: Stylelint์ ๊ฐ์ CSS ๋ฆฐํฐ๋ฅผ ์ฌ์ฉํ์ฌ ์ฝ๋ฉ ํ์ค์ ๊ฐ์ ํ๊ณ ์ค๋ฅ๋ฅผ ๋ฐฉ์งํฉ๋๋ค. ๋ฆฐํฐ๋ฅผ CSS ์คํ์ผ ๊ฐ์ด๋์ ์ผ์นํ๋๋ก ๊ตฌ์ฑํ๊ณ ์ง์ญ๋ณ ๋์์ธ ์ ํธ๋์ ๋ฐ๋ผ ๊ท์น์ ์ฌ์ฉ์ ์ ์ํฉ๋๋ค.
- ๋ชจ๋์ CSS ์ํคํ ์ฒ ์ฑํ: CSS ๋ชจ๋์ด๋ ์คํ์ผ๋ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ์ฌ ๋ชจ๋์ฑ๊ณผ ์บก์ํ๋ฅผ ์ด์งํฉ๋๋ค. ์ด๋ ์คํ์ผ์ ์ถ๋ก ํ๊ณ ํ ์คํธํ๊ธฐ ์ฝ๊ฒ ๋ง๋ญ๋๋ค.
- CI/CD ํ์ดํ๋ผ์ธ์ CSS ํ ์คํธ ํตํฉ: CI/CD ํ์ดํ๋ผ์ธ์ ์ผ๋ถ๋ก CSS ํ ์คํธ๋ฅผ ์๋ํํ์ฌ ๊ฐ๋ฐ ํ๋ก์ธ์ค ์ด๊ธฐ์ ์คํ์ผ ๋ฌธ์ ๋ฅผ ์ก์๋ ๋๋ค. ํ์ดํ๋ผ์ธ์ด ๋ค์ํ ๋ธ๋ผ์ฐ์ ์ ํ๊ฒฝ์ ๋ํด ํ ์คํธ๋ฅผ ์คํํ๋๋ก ๊ตฌ์ฑํฉ๋๋ค.
- ํ ์คํธ ์ปค๋ฒ๋ฆฌ์ง ์ฐ์ ์์ ์ง์ : ์ค์ํ ์ปดํฌ๋ํธ์ ๊ณตํต UI ํจํด์ ๋จผ์ ํ ์คํธํ๋ ๋ฐ ์ง์คํฉ๋๋ค. ํ๋ก์ ํธ๊ฐ ๋ฐ์ ํจ์ ๋ฐ๋ผ ์ ์ฐจ์ ์ผ๋ก ํ ์คํธ ์ปค๋ฒ๋ฆฌ์ง๋ฅผ ํ์ฅํฉ๋๋ค.
- ๊ต์ก ๋ฐ ์ง์ ์ ๊ณต: ๊ฐ๋ฐ์์๊ฒ CSS ํ ์คํธ ์์ฑ ๋ฐฉ๋ฒ์ ๋ํ ๊ต์ก ๋ฐ ์ง์์ ์ ๊ณตํฉ๋๋ค. ํ ๋ด์์ ์ง์ ๊ณต์ ์ ํ์ ์ ์ฅ๋ คํฉ๋๋ค.
- ํ์งํ ํ๊ณผ์ ํ์ ์ฅ๋ ค: ํ์งํ ํ๊ณผ ๊ธด๋ฐํ ํ๋ ฅํ์ฌ CSS ์คํ์ผ์ด ๋ค๋ฅธ ์ธ์ด์ ์ง์ญ์ ๋ง๊ฒ ์ฌ๋ฐ๋ฅด๊ฒ ์กฐ์ ๋๋๋ก ํฉ๋๋ค. ์๊ฐ์ ๋๋ ๋ ์ด์์ ๋ฌธ์ ๋ฅผ ์ก์๋ด๊ธฐ ์ํด ํ์งํ ํ์ ํ ์คํธ ํ๋ก์ธ์ค์ ์ฐธ์ฌ์ํต๋๋ค.
- ๋ณต์กํ ๋ ์ด์์์ ์๊ฐ์ ํ๊ท ํ ์คํธ ์ฌ์ฉ: ๋ณต์กํ ๋ ์ด์์์ด๋ ์๊ฐ์ ์ผ๋ก ์ค์ํ ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ, ๋จ์ ํ ์คํธ ์ธ์ ์๊ฐ์ ํ๊ท ํ ์คํธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค. ์ด๋ ๋จ์ ํ ์คํธ์์ ๋์น ์ ์๋ ๋ฏธ๋ฌํ ์๊ฐ์ ์ฐจ์ด๋ฅผ ์ก์๋ด๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
- ์ค์ ์ฌ์ฉ์ ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง: ์ค์ ํ๊ฒฝ์์ CSS ์คํ์ผ์ ์ฑ๋ฅ์ ๋ชจ๋ํฐ๋งํฉ๋๋ค. Google PageSpeed Insights์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ณ ํด๊ฒฐํฉ๋๋ค.
- ํ์ง ๋ฌธํ ์์ฉ: ๊ฐ๋ฐ ํ ๋ด์์ ํ์ง ๋ฌธํ๋ฅผ ์กฐ์ฑํฉ๋๋ค. ๊ฐ๋ฐ์๋ค์ด ์์ ์ ์ฝ๋์ ๋ํ ์ฃผ์ธ์์์ ๊ฐ๊ณ ํ ์คํธ์ ๊ฒ์ฆ์ ์ฐ์ ์ํ๋๋ก ์ฅ๋ คํฉ๋๋ค.
CSS ํ ์คํธ์ ๋ฏธ๋
CSS ํ
์คํธ์ ๋ฏธ๋๋ ์ ๋งํด ๋ณด์
๋๋ค. ์น ๊ฐ๋ฐ์ด ๊ณ์ ์งํํจ์ ๋ฐ๋ผ, ๊ฒฌ๊ณ ํ๊ณ ์๋ํ๋ ์คํ์ผ ๊ฒ์ฆ์ ํ์์ฑ์ ๋์ฑ ์ปค์ง ๊ฒ์
๋๋ค. CSS @test๋ ์ ์ฌํ ๋ค์ดํฐ๋ธ ๋ธ๋ผ์ฐ์ ๊ธฐ๋ฅ์ ๋์
์ CSS ๊ฐ๋ฐ์ ํ์ ํ์ฌ ๋ ํจ์จ์ ์ด๊ณ , ์ ๋ขฐํ ์ ์์ผ๋ฉฐ, ํ์ฅ ๊ฐ๋ฅํ๊ฒ ๋ง๋ค ์ ์ฌ๋ ฅ์ ๊ฐ์ง๊ณ ์์ต๋๋ค. ์ฐ๋ฆฌ๋ ๋ค์๊ณผ ๊ฐ์ ๋ ์ ๊ตํ CSS ํ
์คํธ ๋๊ตฌ์ ๊ธฐ์ ์ ๋ฐ์ ์ ์์ํ ์ ์์ต๋๋ค:
- AI ๊ธฐ๋ฐ CSS ํ ์คํธ: AI๋ฅผ ์ฌ์ฉํ์ฌ CSS ํ ์คํธ๋ฅผ ์๋์ผ๋ก ์์ฑํ๊ณ ์ ์ฌ์ ์ธ ์คํ์ผ ๋ฌธ์ ๋ฅผ ์๋ณํฉ๋๋ค.
- AI๋ฅผ ํ์ฉํ ์๊ฐ์ ํ ์คํธ: AI๋ฅผ ํ์ฉํ์ฌ ์๊ฐ์ ํ๊ท ํ ์คํธ์ ์ ํ์ฑ๊ณผ ํจ์จ์ฑ์ ํฅ์์ํต๋๋ค.
- ๋์์ธ ์์คํ ๊ณผ์ ํตํฉ: CSS ํ ์คํธ๋ฅผ ๋์์ธ ์์คํ ๊ณผ ์ํํ๊ฒ ํตํฉํ์ฌ ์คํ์ผ์ด ๋์์ธ ๊ฐ์ด๋๋ผ์ธ์ ์ค์ํ๋๋ก ๋ณด์ฅํฉ๋๋ค.
- ์ค์๊ฐ CSS ํ ์คํธ: ๊ฐ๋ฐ์๊ฐ ์ฝ๋๋ฅผ ์์ฑํ ๋ CSS ํ ์คํธ๋ฅผ ์๋์ผ๋ก ์คํํ์ฌ ์คํ์ผ ๋ฌธ์ ์ ๋ํ ์ฆ๊ฐ์ ์ธ ํผ๋๋ฐฑ์ ์ ๊ณตํฉ๋๋ค.
- ํด๋ผ์ฐ๋ ๊ธฐ๋ฐ CSS ํ ์คํธ ํ๋ซํผ: ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ ํธํ์ฑ ํ ์คํธ ๋ฐ ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง์ ํฌํจํ ํฌ๊ด์ ์ธ CSS ํ ์คํธ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ ํด๋ผ์ฐ๋ ๊ธฐ๋ฐ ํ๋ซํผ์ ๋๋ค.
๊ฒฐ๋ก
CSS @test๋ CSS ๊ฐ๋ฐ์ ์งํ์ ์์ด ์ค์ํ ์ง์ ์ ๋ํ๋
๋๋ค. ๋จ์ ํ
์คํธ์ ์๋ํ๋ ์คํ์ผ ๊ฒ์ฆ์ ์์น์ CSS์ ๋์
ํจ์ผ๋ก์จ ์ฝ๋ ํ์ง์ ํฅ์์ํค๊ณ , ํ๊ท ๋ฒ๊ทธ๋ฅผ ์ค์ด๋ฉฐ, ๊ฐ๋ฐ์ ๊ฐ์ ํ์
์ ๊ฐํํ ์ ์ฌ๋ ฅ์ ๊ฐ์ง๊ณ ์์ต๋๋ค. ์ฃผ์ ๋ธ๋ผ์ฐ์ ์์์ ๊ตฌํ์ ๊ธฐ๋ค๋ฆฌ๋ ๋์, @test์ ๊ฐ๋
์ ์ด๋ฏธ ๊ฐ์น ์๋ ๋
ผ์๋ฅผ ์ด๋ฐ์์ผฐ๊ณ CSS ํ
์คํธ์ ๋ํ ํ์ ์ ์ธ ์ ๊ทผ๋ฒ์ ์๊ฐ์ ์ฃผ์์ต๋๋ค. ์น ๊ฐ๋ฐ ํ์ด ์ด๋ฌํ ์ ๊ทผ๋ฒ์ ์์ฉํจ์ ๋ฐ๋ผ, ๊ทธ๋ค์ ๊ธ๋ก๋ฒ ๊ณ ๊ฐ์ ์ํด ๋ ๊ฒฌ๊ณ ํ๊ณ , ์ ์ง๋ณด์ ๊ฐ๋ฅํ๋ฉฐ, ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ธ ์น ์ ํ๋ฆฌ์ผ์ด์
์ ๊ตฌ์ถํ ์ ์์ต๋๋ค. ํต์ฌ์, ์ฌ์ฉ ๊ฐ๋ฅํ ๋ชจ๋ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ ์ ์ ์ ์ธ CSS ํ
์คํธ๋ ๋ ์ด์ ์ ํ ์ฌํญ์ด ์๋๋ผ๋ ๊ฒ์
๋๋ค. ์ด๋ ์ค๋๋ ์ ๋ค์ํ ๋์งํธ ํ๊ฒฝ์์ ๊ณ ํ์ง์ ์ผ๊ด๋ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ฐ ์์ด ์ค์ํ ์ธก๋ฉด์
๋๋ค.