You Can Become A
๋ฆ๊ฒ ์์ํด๋ ๋๊ตฌ๋ ์ง ๋ ธ๋ ฅํ๋ฉด ๊ฐ๋ฐ์๊ฐ ๋ ์ ์์ด์ !
CSS
๐ first-child / first-of-type ์์ฑ ์ฐจ์ด์
first-child ์ first-of-type ์ฐจ์ด์ first-child ์ first-of-type์ ๋๊ฐ์ด ์์ ํ์ ์์ ๊ณ ๋ฅด๋๊ฒ๊ฐ์๋ฐ ๋ฌด์์ด ๋ค๋ฅผ๊น? ํ๋ฐฉ์ ์ดํดํ๊ธฐ ์ฝ๊ฒ ๊ฐ๋จ๋ช ๋ฃํ๊ฒ ์ค๋ช ํ๋ฉด ์ด๋ ๋ค. div > p:first-child 'div ํ์์ p ์์ ์ค ์ฒซ๋ฒ์งธ ์์' ๋ก ์ฝ๋ ๊ฒ ์๋๋ผ 'div ํ์์ ์ฒซ๋ฒ์งธ ์์์ธ ์์๊ฐ p ์์' ์ด๋ฉด์ด๋ค. ์ฆ, div์ ์์ ์์์ค์ first-child๋ฅผ ๊ณ ๋ฅด๋๋ฐ ๊ทธ๊ฒ p์ด๋ฉด ์คํ์ผ์ ์ ์ฉํ๋ค. ๋ง์ผ p๊ฐ ์๋ค๋ฉด ์คํ์ผ์ ์ ์ฉํ์ง ์๋๋ค. 'div first-child is p' ๋ผ๊ณ ์์ด ๋ฌธ์ฅ์ผ๋ก ์ดํดํ๋ฉด ๋๋ค. .parent > span:first-child { background: lightgreen; } .parent2 > p:fi..
๐ @media๋ ์ด์ ๊ทธ๋ง ! ์ต์ @container ์ฌ์ฉ๋ฒ
์ปจํ ์ด๋ ์ฟผ๋ฆฌ vs ๋ฏธ๋์ด ์ฟผ๋ฆฌ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ๊ฐ์ด ๋ฌธ์์ ์คํ์ผ์ ๋ฐ์ํ์ผ๋ก ์ง์ ํ ์ ์๋ค. ์ด ๋์ ์๋ ๋ฐฉ์์ ์ ์ฌํ์ง๋ง, ์ฐจ์ด์ ์ ์ด๋ ๊ฒ์ ๊ธฐ๋ฐ์ผ๋ก ๋์๋๋๋ ์ ์ด๋ค. ์๋ฅผ๋ค์ด ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ ๋๋ฐ์ด์ค ๋๋ ๋ฏธ๋์ด ์ ํ์ ๊ธฐ๋ฐ์ผ๋ก ๋ทฐํฌํธ์ ์ํด ๋ฐ์ํ์ง๋ง, ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ํ์ด์ง๋ด์ ํน์ ์ปดํฌ๋ํธ ์์ ๊ธฐ๋ฐ์ผ๋ก ๋ฐ์ํ๋ค. ์๋ ๊ทธ๋ฆผ์ ๋ณด๋ฉด ์ดํด๊ฐ ๋ ํ ๋ฐ, ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ ๋ธ๋ผ์ฐ์ ๋๋น๋ฅผ ๊ธฐ์ค์ผ๋ก ๋ฐ์ํ์ง๋ง, ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ๋ฌธ์ ๋ด ๊ฐ ์์ ์ ํฌ๊ธฐ๋ ๋ชจ์์ ๋ฐ๋ผ ๋ฐ์ํ ์ฟผ๋ฆฌ๋ฅผ ์ง์ ํ ์ ์๋ค๋ ์ ์์ ์์ ํธํ์ด๋ผ๊ณ ํ ์ ์๋ค. ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๊ฐ ์์์ ์์ ์๋ ์๋ฐ์คํฌ๋ฆฝํธ์ Resize Observer ๊ธฐ์ ์ ํตํด ํน์ ์์์ ํฌ๊ธฐ ๋ณํ๋ฅผ ๊ด์ฐฐํ์ฌ ์คํฌ๋ฆฝํธ๋ก ์คํ์ผ๋ง์ ํด์ฃผ์ด์ผ..
๐ CSS ์ ํ์๋ฅผ ๋ชจ๋ํ๊ฒ :where() / :is() / :has() / :not()
:where() ๊ฐ์ ์ ํ์ :where ์์ฌ ํด๋์ค ์ ํ์๋ css ์ฝ๋ฉํ ๋ ์ ํ์์ ์ค๋ณต์ ์ค์ด๋ ๋ฐ ๋์์ด ๋๋ ๋ ์์ด๋ค. ์๋ฅผ๋ค์ด ๋ค์๊ณผ ๊ฐ์ด ์ฌ๋ฌ ์๋ฆฌ๋จผํธ ์์ ์๋ anchor ํ๊ทธ์ hover ํจ๊ณผ๋ฅผ ์ฃผ๊ธฐ์ํด์ ๊ฐ ์ ํ์๋ค์ ์ฝค๋ง๋ฅผ ์ด์ด ๋์ดํ์ฌ ํํํ์ฌ์ผ ํ์๋ค. element 1 element 2 element 3 nav > ul a:hover, footer > ol a:hover, aside > p a:hover { color: purple; text-decoration: underline wavy deeppink; } ๊ทธ๋ฐ๋ฐ ์ฝ๋๋ฅผ ๋ณด๋ฉด a:hover ๋ถ๋ถ์ด ๊ฐ ์ ํ์๋ง๋ค ์ค๋ณต๋๋ ๊ฒ์ ํ์ธ ํ ์ ์์ ๊ฒ์ด๋ค. ๊ฑฐ๊ธฐ๋ค ์ ์ฉํด์ผํ ์์๊ฐ ๋ง์ผ๋ฉด ๋ง์ ์๋ก ์ ํ์์ ์๋ ๋์ด๋ ๋์ค์ ..
๐ ์คํฌ๋กค ๋ฐ(Scrollbar) ์คํ์ผ๋ง ๐ฏ ์ด์ ๋ฆฌ
Custom Scrollbar ์คํ์ผ๋ง ์ ํ๋ธ ํํ์ด์ง๋ฅผ ๋ณด๋ฉด ์คํฌ๋กค๋ฐ๊ฐ ์ผ๋ฐ ๋ธ๋ผ์ฐ์ ์คํฌ๋กค๋ฐ์๋ ๋ฌ๋ฆฌ ๋๊ทธ๋๊ฒ ์คํ์ผ๋ง ๋์ด ์์์ ๋ณผ ์ ์๋ค. ์ด์ฒ๋ผ ์คํฌ๋กค๋ฐ ์ญ์ ๋ค๋ฅธ ์์์ฒ๋ผ CSS ์คํ์ผ๋ง์ด ๊ฐ๋ฅํ์ฌ, ๋ณด๋ค ์์ ์ ์น์ฌ์ดํธ ๋๋ณด์ผ ์ ์๊ฒ ํ์ฌ ๋ฐฉ๋ฌธ์์๊ฒ ์กฐ๊ธ ๋ ๊ธฐ์ต์ ๋จ๊ฒ ๋ง๋ค ์ ์๋ค. ๋ค๋ง ์คํฌ๋กค๋ฐ ์์๋ ์น ์ฝํ ์ธ ๊ฐ ์๋ ๋ธ๋ผ์ฐ์ ๋ด๋ถ ์ธํฐํ์ด์ค๋ก ์ทจ๊ธ๋๊ธฐ ๋๋ฌธ์ ์ผ๋ฐ์ ์ธ css ์ฌ์ฉ์ ์์ด ๊ธฐ๋ฅ์ด ์ ํ์ ์ธ ๊ฒ์ด ๋ง๋ค. ์ฐ๋ฆฌ๊ฐ ๋ธ๋ผ์ฐ์ ์ alert ์ฐฝ์ ์คํ์ผ๋ง ํ ์ ์๋ฏ์ด ๋ง์ด๋ค. ์ฆ, css๋ฅผ ์ฌ์ฉํ์ฌ ๋ธ๋ผ์ฐ์ ์คํฌ๋กค๋ฐ ์๊น์ด๋ ๋๊ป๋ฅผ ๋ฐ๊ฟ ์๋ ์์ผ๋ ์ด์ธ์ ๋ณต์กํ ์คํ์ผ๋ง์๋ ์ ํ์ ์ด๋ผ๊ณ ๋ณด๋ฉด ๋๋ค. ํนํ ์ ์ํด์ผ ํ ์ ์ CSS scrollbar ๊ด๋ จ ์ ํ์๋ค์ ํ์ค์ด ์๋..
๐น๏ธ CSS ์์ ์ํ/์์ง ์ ๋ ฌ ๊ธฐ๋ฒ ๋ชจ์
์ํ ์ค์ ์ ๋ ฌ ๐ข inline / inline-block ์์ ์ ๋ ฌ ๋์ ์์(inline)์ ๋ถ๋ชจ ์์(block)์ text-align: center;๋ฅผ ์ง์ ํ๋ค. inline, inline-block, inline-table, inline-flex, ๊ธฐํ ๋ฑ๋ฑ์ ์ ์ฉ๋๋ค. One Two Three Four โ ์์์์๊ฐ block์์์ด๋ฉด, ๊ฐ์ ๋ก ์์์์๋ฅผ inline-block์์๋ก ๋ง๋ค์ด์ฃผ๋ ๋ฐฉ๋ฒ๋ ์๋ค. I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is block-like with my siblings and we're centered in a row. I h..
๐ ๋ฏธ๋์ด ์ฟผ๋ฆฌ ๋ฒ์ ์ง์ ์ต์ ๋ฌธ๋ฒ (๊ฐํธํด์ง โ)
CSS media query ๋ฒ์ ์ต์ ๋ฌธ๋ฒ CSS์์ ๋ฐ์ํ ์ฟผ๋ฆฌ๋ฅผ ์์ฑํ ๋ ๊ฐ์ฅ ์ดํด๊ฐ ์๋์๋ ์ ์ด ๋ฐ๋ก ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ width, height ๋ฒ์ ์ง์ ๋ฌธ๋ฒ์ด๋ค. ์ ๋งํ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์์ ๋ฒ์ ์ง์ ์ ๊ธฐํธ๋ฅผ ํตํด ๋ฒ์์ง์ ์ ํ์ง๋ง CSS์์๋ ๋ฏธ๋์ด ์ฟผ๋ฆฌ ๋ฒ์ ์ง์ ์ ๋ค์๊ณผ ๊ฐ์ด ํ์๋ค. ์ ํํ max-width ๊ฐ ์๋ฏธํ๋ ๊ฒ์ด '์ด์' ์ธ์ง '์ดํ' ์ด์๋์ง ์ ๊น ๋ฌธ๋ฒ์ด ํ๊น๋ฆด ๋๋ ์์์ผ๋ฉฐ, ๊ธฐ๋ณธ์ ์ผ๋ก '๊ฐ๊ฑฐ๋ ์๋ค' ๋ก ํต์ฉ๋๊ธฐ ๋๋ฌธ์ ๋ง์ผ '๋ฌด์กฐ๊ฑด ์๋ค' ๋ก ์ค์ ํ๋ ค๋ฉด, ์๋์ ๊ฐ์ด 319.99px ๋ก ์ง์ ํด์ผ๋ ์ฐํํ๋ ๋ฐฉ๋ฒ์ ์จ์ผ ํ๋ค. /* viewports
๐ ์ด๋ฏธ์ง ์ฌ์ด์ฆ ๋น์จ ๋ง์ถ๋ 3๊ฐ์ง ๋ฐฉ๋ฒ (object-fit / background-size / position)
ํ๋ก ํธ๋ฅผ ์์ ํ ๋, ์ปจํ ์ด๋์ ํฌ๊ธฐ๋ ๊ณ ์ ๋์ด ์๋๋ฐ, ํด๋น ์ปจํ ์ด๋ ์์ ๋ค์ด๊ฐ ์ด๋ฏธ์ง์ ํฌ๊ธฐ๋ ๋ค์ํ ๊ฒฝ์ฐ๊ฐ ์๋ค. ์๋ฅผ๋ค์ด ์ด๋ฏธ์ง๋ฅผ ํ๋/์ถ์ ํ๊ฑฐ๋ ํน์ ๋น์จ๋ก ๋ํ๋๊ฒ ํ๊ธฐ์ํด, CSS๋ฅผ ์ด์ฉํ์ฌ ๋ ์์๊ฐ์ ์ค๋ธ์ ํธ๋ค์ ์กฐ์ ํด์ผ ๋๋๋ฐ ๋ฐฉ๋ฒ์ด ๊ฒฐ์ฝ ๋ น๋ก์น ์๋ค. ์ด๋ฒ ์๊ฐ์๋ background-img ํน์ ํ๊ทธ๋ก ์ด๋ฏธ์ง๋ฅผ ๊ฐ์ ธ์, ๋ด๊ฐ ์ํ๋ ์ฌ์ด์ฆ์ ๋ฐ์ค ์์ ์ด๋ฏธ์ง ์ปจํ ์ธ ๋ฅผ ๋ฐฐ์นํ๊ณ ๋น์จ์ ์กฐ์ ํด ๊พธ๋ฐ๋, ์ด๋ค css ์์ฑ์ ์ฌ์ฉํ์ฌ ๋ค๋ฃจ๋์ง 3๊ฐ์ง ๋ฐฉ๋ฒ์ ๋ํด ํ๋ฐฉ ์ ๋ฆฌํ๋ ์๊ฐ์ ๊ฐ์ ธ๋ณด์. background ์์ฑ์ ์ด์ฉํด ์กฐ์ background-size ์์ฑ ๋จผ์ css์ background-img : url() ์์ฑ์ ํตํด ์ด๋ฏธ์ง๋ฅผ ๋ถ๋ฌ์ ์ฌ์ฉํ ๋, ์ฌ์ด์ฆ๋ฅผ ์กฐ์ ํ๋ ๋ฐฉ๋ฒ์ ์์..
๐จ SVG ๋ค๋ฃจ๊ธฐ ์ ๋ฆฌ (ํฌ๊ธฐ / ์์ ๋ณ๊ฒฝ)
SVG (Scalabe Vector Graphic) SVG๋ ํ์ฅ ๊ฐ๋ฅํ ๋ฒกํฐ ๊ทธ๋ํฝ(Scalable Vector Graphics)์ ์ค์๋ง์ด๋ค. SVG ์ด๋ฏธ์ง ํ์ผ์ XML ๋ฌธ๋ฒ์ ๊ธฐ๋ณธ์ผ๋ก ํ๋ ๋ฌธ์์ด๋ฉฐ ๋ก๊ณ ๋ ์์ด์ฝ, ๊ทธ๋ํ ๋ฑ ๋๋ฆฌ ์ฌ์ฉ๋๋ค. ์ฆ, 2์ฐจ์ ๊ทธ๋ํฝ์ ํํํ๊ธฐ ์ํด ๋ง๋ค์ด์ง XMLํ์ผ ํ์์ ๋งํฌ์ ์ธ์ด์ด๋ผ๊ณ ๋ด๋ ๋๋ค. ๋ค๋ฅธ png๊ณผ jpg ์ด๋ฏธ์ง ํ์ผ์ ๋นํด ํ ์คํธ ํธ์ง๊ธฐ์์ CSS๋ JS๋ก ์์ ์ด ๊ฐ๋ฅํ๋ค๋ ์ ์ด ๊ฐ์ฅ ํฐ ์ฅ์ ์ด๋ผ ํ ์ ์๋ค. ๊ฐ์ฅ ํฐ ํน์ง์ผ๋ก๋ ํ์ฅ์ด ๊ฐ๋ฅํ๋ค๋ ์ ์์ ํ๋ํด๋ ํ์ง์ด ๋จ์ด์ง์ง ์๋๋ค๋ ํน์ง์ด ์๋ค. ์๋ฅผ ๋ค์ด ํ์ํฌ์ธํธ์์ ์ด๋ฏธ์ง๋ฅผ ๋๋ฆฌ๊ฑฐ๋ ์ค์ผ๋ ํ์ง์ด ๊นจ์ง์ง ์๋ ๊ฒ๋ ๋ฐ๋ก ์ด ์๋ฆฌ๋ฅผ ์ด์ฉํ ๊ฒ์ด๋ค. SVG ์ด๋ฏธ์ง๋ ํฌ๊ธฐ๋ฅผ ์ค์ด๊ฑฐ๋ ๋๋ฆฌ๋๋ผ..
๐จ ์์์ ๊ธฐ๋ณธ ๋์์ธ ๋ฆฌ์ - all ์์ฑ
CSS - all ์์ฑ all ๋จ์ถ ์์ฑ์ ์์์ unicode-bidi (en-US), direction (en-US), CSS ์ฌ์ฉ์ ์ง์ ์์ฑ์ ์ ์ธํ ๋ชจ๋ ์์ฑ์ ์ด๊ธฐํ ํ๋ค. ์๋ฅผ๋ค์ด ๋ฒํผ์ ์์ฑํ๋ฉด ๋ธ๋ผ์ฐ์ ๋ง๋ค ๊ธฐ๋ณธ์ ์ผ๋ก ์ ์ฉ๋์ด์๋ ๋ฒํผ์ ๊ธฐ๋ณธ ์คํ์ผ ๊ฐ์ ์ด๊ธฐํ ์์ผ์ค ์ ์๋ค. Click Me ! all: unset; ์ ํด์ฃผ๋ฉด ๊ธฐ๋ณธ ๋ฒํผ ๋ชจ์์ด ์ด๊ธฐํ๋์ด, ํ ์คํธ๋ง ๋จ๊ฒ๋๋ค. button{ all: unset; } ๊ณผ ์ ๋์์ธ์ ํต์ผํ๊ธฐ ์ํด์ ๋ฑ, ํ๊ทธ์ ๋ํดํธ ๋์์ธ์ ์์ ๊ฑฐ๋ ํต์ผํ ๊ฒฝ์ฐ์ ๊ฐ์ด ํธ๋ฆฌํ๊ฒ ์ธ ์ ์๋ค. button{ all: unset; /* ์ ์ํ ์ ์ ์ ์ํ ๋ ๊ฐ์ฅ ์ฒ์์ ์จ์ค์ผ ๋๋ค. ๋ค์๋ค ์จ์ฃผ๋ฉด ๊ทธ ์์ ์คํ์ผ๋ค๋ ์ด๊ธฐํ๋๊ฒ ๋๋ค. */ background..
๐จ :before :after ์ ::before ::after ์ฐจ์ด์
๊ฐ์ ์ ํ์ (pseudo selector) ๊ฐ์ ์ ํ์(pseudo selector)์๋ ๊ฐ์ ํด๋์ค(pseudo class)์ ๊ฐ์ ์๋ฆฌ๋จผํธ(pseudo element)๊ฐ ์กด์ฌํ๋ค. ๋์ด ๋น๊ตํ์๋ฉด, ๊ฐ์ ํด๋์ค๋ ์๋ฆฌ๋จผํธ ์ ์ฒด๋ ์๋ฆฌ๋จผํธ ์ํ๋ฅผ ์ ํํ๊ณ , ๊ฐ์ ์๋ฆฌ๋จผํธ๋ ์๋ฆฌ๋จผํธ์ ํ์ ์์๋ ๋ ์ธ๋ถํํ์ฌ ์ ํ๊ฐ๋ฅํ๋ค. ๊ฐ์ ์๋ฆฌ๋จผํธ (Pseudo Elements) ::before , ::after , ::first-letter , ::first-line , ::selection ๊ฐ์ ํด๋์ค (Pseudo Classes) :active , :checked , :disabled , :focus , :hover ๋ฑ CSS 2.1์์๋ ๊ฐ์ํด๋์ค, ๊ฐ์์๋ฆฌ๋จผํธ ๋ชจ๋ ์ฑ๊ธ ์ฝ๋ก ์ ์ฌ์ฉํ์๋ค. ํ์ง๋ง CS..
๐จ position sticky - ์์ ํค๋๋ฅผ ๊ณ ์ ํ์
๋ค๋น๊ฒ์ด์ ํค๋ ๊ณ ์ ํ๊ธฐ ๋๋ค์์ ์ฌ์ดํธ๊ฐ ์๋จ ๋ค๋น๊ฒ์ด์ ์์ญ ๋ถ๋ถ์ด ์คํฌ๋กค์ ๋ด๋ฆฌ๋ฉด ๊ฐ์ด ๋ฐ๋ผ ๋ด๋ ค์ค๋ ํ์ด์ง ์์๋ฅผ ํ๋ฒ ์ฏค์ ๋ด์์ ๊ฒ์ด๋ค. ์ด์ ์๋ ์ด๋ฌํ ๊ธฐ๋ฅ์ ๋ง๋ค๋ ค๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ณต์กํ ๊ตฌ์ฑ์ ํ์ฌ์ผ ํ์ง๋ง ์ด์ ๋ ๊ฐ๋จํ๊ฒ css์ position: sticky ์์ฑ์ผ๋ก ๊ตฌํ์ด ๊ฐ๋ฅํ๋ค. ์๋ฅผ๋ค์ด ์๋์ ๊ฐ์ด ์์ ์์ญ ๋ถ๋ถ์ ์คํฌ๋กค์ ๋ด๋ ค๋ ์๋จ์ ๊ณ ์ ์ํค๊ณ ์ถ๋ค๋ฉด, Logo Menu1 Menu2 Menu3 ๋ด์ฉ ... See the Pen position-sticky-0 by barzz12 (@inpaSkyrim) on CodePen. ์๋์ ๊ฐ์ด ์์ฑ์ ์ค์ ํด์ฃผ๋ฉด ์๋จ ํค๋ ๊ณ ์ ์ด ๋๊ฒ ๋๋ค. header { ... position: sticky; top: 0; } See the P..
๐จ CSS ๋ณ์(--variable) ์ฌ์ฉ๋ฒ & ์์ฉ ์ ๋ฆฌ
CSS ๋ณ์ ๊ธฐ๋ฅ ๋ณต์กํ ์น์ฌ์ดํธ ๊ฐ์ ๊ฒฝ์ฐ ์์ฒญ๋ ์์ CSS๋ฅผ ๊ฐ์ง๊ณ ์๋๋ฐ, ์ ์ง๋ณด์๋ฅผ ํ๋ค ๋ณด๋ฉด ์ฌ๋ฌ ๊ณณ์์ ์ฌ์ฉํ ์์์ ๊ฐ์ ํ๊บผ๋ฒ์ ๋ฐ๊ฟ์ผ ํ ๋๊ฐ ์๋ค. ๊ทธ ๊ฐ๋ค์ ํ๋์ฉ ์ฐพ์์ ์ผ์ผ์ด ๋ฐ๊พธ๋ ค๋ฉด ์๋นํ ํผ๊ณคํ ๊ฒ์ด๊ณ , ๋์ ๋ฐ๋ผ ์ค์๋ ๋ง์ ๊ฒ์ด๋ค. ๊ทธ๋์ ์ฌํ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ฒ๋ผ ๋ณ์๋ฅผ ์ด์ฉํ๋ฉด, ์์ ์ ๋ฐ์ ๊ฑธ์ณ ์ฌ์ฉ๋๋ ์์์ ๊ฐ์ ๋ณ์์ ์ ์ฅํ๊ณ ํธ์ถํ๋ฉด ๋ณด๋ค ํจ์จ์ ์ธ ํ๋ก๊ทธ๋๋ฐ์ด ๊ฐ๋ฅํด์ง๋ค. CSS ๋ณ์ ์ ์ธ ๋ฐ ํธ์ถ CSS์์ ๋ณ์์ ์ด๋ฆ์ ์ง์ ํ ๋๋ ๋ณ์ ๋งจ ์์ -- ๋ฅผ ๋ถ์ฌ์ฃผ์ด์ผ ํ๋ค. ๊ทธ๋ฆฌ๊ณ ๋ณ์๋ฅผ ํธ์ถํด ์ฌ์ฉํ ๋๋ var(๋ณ์๋ช )ํ์์ ์ฌ์ฉํ๋ค. :root { --main-font-color: #000f22; /* CSS ์ ์ญ ๋ณ์ ์ ์ธ */ } div { color..