CSS 변수(var()) 완전 정복 – 테마 변경과 유지보수를 편하게 하는 방법

 

 

안녕하세요 😊
CSS에서 색상이나 폰트 크기 같은 값을 여러 군데서 반복해서 쓰다 보면,
한 번 변경하려고 해도 모든 곳을 찾아 수정해야 해서 번거롭습니다.
이럴 때 **CSS 변수(Custom Properties)**를 사용하면 유지보수가 훨씬 쉬워집니다.

---

📍 1. CSS 변수란?

• CSS에서 값을 변수처럼 저장하고 재사용할 수 있는 기능
• --변수명 형식으로 선언, var(--변수명)으로 사용
• 변수의 스코프(범위) 설정 가능

---

📍 2. 기본 문법

:root {
  --main-color: #4CAF50;
  --font-size-lg: 20px;
}

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

• :root는 문서 전체에 변수를 적용하는 전역 범위
• 변수명은 소문자+하이픈 권장

---

📍 3. 변수 덮어쓰기

.card {
  --main-color: #ff5722; /* 이 범위 안에서만 적용 */
  color: var(--main-color);
}

• 특정 요소 범위 안에서 변수 값을 새로 정의 가능 → 테마 변경에 유용

---

📍 4. 기본값 지정

p {
  color: var(--text-color, #333); /* 변수 없으면 #333 사용 */
}

• 두 번째 인자로 기본값 설정 가능

---

📍 5. JavaScript와 함께 쓰기

document.documentElement.style.setProperty('--main-color', '#2196F3');

• JS로 동적으로 CSS 변수 값 변경 가능
• 다크 모드, 사용자 설정 테마에 활용

---

📍 6. 실무 활용 – 다크 모드 예제

:root {
  --bg-color: #fff;
  --text-color: #000;
}

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

.dark-theme {
  --bg-color: #000;
  --text-color: #fff;
}

document.body.classList.toggle('dark-theme');

• 버튼 클릭 시 테마 색상 전체 변경 가능

---

✅ 마무리

CSS 변수는 유지보수와 테마 변경에 강력한 기능입니다.
특히 JavaScript와 결합하면 실시간 스타일 변경도 가능해집니다.
앞으로 색상·폰트·여백 등 반복되는 값을 변수로 관리해보세요. 😊