CSS 변수(Custom Properties) – :root로 스타일을 똑똑하게 관리하기

 

 

CSS를 쓰다 보면 이런 생각이 들죠.
“어? 이 색상 여러 군데에서 계속 반복되는데, 수정하려면 다 찾아서 바꿔야 하나?”

 

그럴 때 쓰는 게 바로 **CSS 변수(Custom Properties)**입니다.
한 번만 선언해두면 어디서든 재사용할 수 있고, 유지보수도 엄청 쉬워져요!

---

✅ 기본 문법

:root {
  --main-color: #FF4200;
  --font-large: 24px;
}

h1 {
  color: var(--main-color);
  font-size: var(--font-large);
}

 

--변수이름으로 선언하고, var(--변수이름)으로 사용할 수 있어요.

---

✅ :root는 어떤 역할?

:root는 모든 요소에 적용되는 CSS의 가장 바깥 범위예요.
여기서 선언하면 어디서든 접근 가능하다는 뜻이죠!

---

✅ 예시 코드

/* 모든 요소에서 사용 가능한 변수 */
:root {
  --font-small: 8px;
  --font-normal: 16px;
  --font-large: 24px;
  --font-x-large: 32px;
  --font-xx-large: 40px;
  --font-xxx-large: 48px;

  --font-w-normal: 400;
  --font-w-bold: 600;
  --font-w-extrabold: 900;

  --color-main: #FF4200;
  --color-sub: #865A55;
  --color-text: #49281C;
}

 

---

✅ 특정 요소에만 사용할 수도 있어요

u {
  --not-good: wavy underline orange;
  --wrong: wavy underline red;
}

.wrong {
  --warn: yellow;
}

 

이렇게 하면 해당 요소 안에서만 사용할 수 있는 지역 변수가 됩니다.

---

💡 CSS 변수는 어디서 유용할까?

• 브랜드 컬러 설정할 때
• 폰트 크기나 굵기를 통일하고 싶을 때
• 다크 모드 전환 같은 테마 관리할 때
• 요소 간 스타일을 일관성 있게 유지할 때