📂 CSS 변수(--var)의 사용법과 테마 시스템 구축

📂 CSS 변수(--var)의 사용법과 테마 시스템 구축

CSS 변수(CSS Custom Properties)는 --변수명 형태로 선언하여 재사용할 수 있는 동적인 스타일 값입니다. 반복되는 색상, 폰트, 여백 값 등을 변수로 관리하면 유지보수가 쉬워지고, 다크모드나 테마 시스템 구현도 매우 유리해집니다.

---

1️⃣ CSS 변수 기본 문법

:root {
  --primary-color: #007bff;
  --font-size-base: 16px;
}

👉 :root는 전역 적용을 의미합니다 (HTML 최상위 요소).

사용 예:

.button {
  background-color: var(--primary-color);
  font-size: var(--font-size-base);
}

---

2️⃣ 변수의 스코프 (범위)

• 지역 변수는 선언된 요소와 하위에서만 사용 가능
• 전역 변수는 :root에 선언하여 전체에서 사용 가능

예:

.card {
  --card-padding: 20px;
  padding: var(--card-padding);
}

---

3️⃣ fallback(대체값) 설정

color: var(--text-color, #333);

👉 --text-color가 없으면 #333을 사용합니다.

---

4️⃣ 다크 모드 테마 구현 예시

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #f0f0f0;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

👉 document.body.dataset.theme = 'dark' 등으로 동적으로 테마 변경 가능

---

5️⃣ SCSS 변수와의 차이점

| 구분 | CSS 변수 | SCSS 변수 | |------|-----------|------------| | 문법 | --main-color | $main-color | | 동적 변경 | 가능 (JS로 테마 전환) | 불가능 (컴파일 시 고정) | | 작동 시점 | 런타임 | 빌드타임 | | 사용 목적 | 테마, 사용자 설정 등 | 코드 간결화, 반복 제거 |

정리: SCSS 변수는 빌드용, CSS 변수는 브라우저에서 실행되는 스타일 제어용

---

6️⃣ 실전 구성 예 – 테마 전용 파일 분리

/css
  ├── theme-light.css
  ├── theme-dark.css

/* theme-light.css */
:root {
  --bg-color: #fff;
  --text-color: #000;
}

/* theme-dark.css */
:root {
  --bg-color: #111;
  --text-color: #eee;
}

JS에서 <link> 교체 방식으로도 테마 전환 가능

---

📌 요약 정리

• --변수명으로 선언, var()로 사용
• :root에 선언하면 전역에서 접근 가능
• JS와 연동하여 테마 전환, 사용자 설정 적용에 매우 유용
• 다크모드, 다국어 UI, 사용자 커스터마이징 등에 적극 활용

---

📌 다음 글 예고

다음 글: Sass, SCSS 개념 및 변수/중첩/믹스인 활용 기초에서는 SCSS의 문법과 반복 제거, 유지보수 전략을 다룹니다.