CSS 변수란?
CSS 변수(Custom Properties)는 CSS에서 값을 저장하고 재사용할 수 있는 기능입니다. 프로그래밍 언어의 변수처럼 한 곳에서 값을 바꾸면 사용하는 모든 곳에 자동 반영됩니다.
:root {
--color-primary: #2dd4bf;
--color-bg: #080c12;
--radius-md: 8px;
}
.btn {
background: var(--color-primary);
border-radius: var(--radius-md);
}
.card {
border: 1px solid var(--color-primary);
border-radius: var(--radius-md);
}--color-primary를 한 번 바꾸면 버튼과 카드의 색상이 동시에 변합니다.
문법
선언
--로 시작하는 이름을 사용합니다. 대소문자를 구분합니다.
:root {
--primary: #2dd4bf; /* 색상 */
--spacing-md: 16px; /* 간격 */
--font-mono: 'JetBrains Mono', monospace; /* 폰트 */
--shadow-card: 0 4px 12px rgba(0,0,0,0.1); /* 그림자 */
}사용
var() 함수로 불러옵니다. 두 번째 인자는 폴백(기본값)입니다.
.element {
color: var(--primary);
padding: var(--spacing-md);
font-family: var(--font-mono);
box-shadow: var(--shadow-card);
/* 폴백: 변수가 없으면 #333 사용 */
color: var(--undefined-var, #333);
}:root에 선언하는 이유
:root는 HTML 문서의 최상위 요소(<html>)를 가리킵니다. 여기에 선언하면 페이지 전체에서 사용할 수 있습니다.
:root {
--color-primary: #2dd4bf;
}
/* 어디서든 사용 가능 */
.header { color: var(--color-primary); }
.footer { border-color: var(--color-primary); }스코프: 지역 변수
CSS 변수는 특정 요소에서 재정의할 수 있습니다. 자바스크립트의 변수 스코프와 비슷합니다.
:root {
--btn-bg: #1a1a1a;
--btn-color: white;
}
.btn-primary {
--btn-bg: #2dd4bf;
--btn-color: #080c12;
background: var(--btn-bg);
color: var(--btn-color);
}
.btn-danger {
--btn-bg: #ef4444;
background: var(--btn-bg);
color: var(--btn-color);
}같은 --btn-bg 변수지만 컨텍스트에 따라 다른 값을 가집니다.
다크 모드 구현
CSS 변수가 빛나는 순간 — 다크 모드를 매우 쉽게 구현할 수 있습니다.
:root {
--bg: #ffffff;
--text: #1a1a1a;
--surface: #f8f9fa;
--border: #e2e8f0;
}
[data-theme="dark"] {
--bg: #080c12;
--text: #e2e8f0;
--surface: #131b27;
--border: #1e293b;
}
body {
background: var(--bg);
color: var(--text);
}
.card {
background: var(--surface);
border: 1px solid var(--border);
}컴포넌트 CSS를 전혀 바꾸지 않고, 변수 값만 교체해서 다크 모드를 완성했습니다.
자바스크립트로 토글:
document.documentElement.setAttribute('data-theme', 'dark');디자인 시스템 만들기
실제 프로젝트에서 CSS 변수를 체계적으로 관리하는 방법:
:root {
/* ===== Colors ===== */
--color-primary: #2dd4bf;
--color-primary-hover: #14b8a6;
--color-danger: #ef4444;
--color-warning: #f59e0b;
--color-success: #22c55e;
/* ===== Text ===== */
--text-primary: #e2e8f0;
--text-secondary: #94a3b8;
--text-muted: #64748b;
/* ===== Background ===== */
--bg-deep: #080c12;
--bg-surface: #131b27;
--bg-elevated: #1a2435;
/* ===== Spacing ===== */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
/* ===== Typography ===== */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 2rem;
/* ===== Border Radius ===== */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
/* ===== Shadows ===== */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
--shadow-md: 0 4px 12px rgba(0,0,0,0.15);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.2);
/* ===== Transitions ===== */
--transition-fast: 0.15s ease;
--transition-base: 0.2s ease;
--transition-slow: 0.3s ease;
}이렇게 정리해두면 디자이너가 색상을 변경해도 변수 값 몇 개만 바꾸면 사이트 전체에 반영됩니다.
calc()와 조합
CSS 변수는 calc() 함수와 조합할 수 있습니다.
:root {
--header-height: 64px;
}
.main {
min-height: calc(100vh - var(--header-height));
padding-top: var(--header-height);
}JavaScript에서 읽기/쓰기
// 읽기
getComputedStyle(document.documentElement)
.getPropertyValue('--color-primary'); // '#2dd4bf'
// 쓰기
document.documentElement.style
.setProperty('--color-primary', '#ff6b6b');사용자가 테마 색상을 직접 고를 수 있는 커스터마이저를 만들 때 유용합니다.
SCSS 변수와의 차이
| 특성 | CSS 변수 | SCSS 변수 |
|---|---|---|
| 런타임 변경 | 가능 (JS로) | 불가능 (컴파일 시 고정) |
| 스코프 | CSS 캐스케이드 따름 | 블록 스코프 |
| 미디어 쿼리 내 변경 | 가능 | 불가능 |
| 브라우저 지원 | 모든 모던 브라우저 | 빌드 도구 필요 |
SCSS 변수($primary)는 빌드 시 값으로 치환되어 사라집니다. CSS 변수는 브라우저에서 실제로 동작하므로 다크 모드, 반응형 값 변경 등에 활용할 수 있습니다.
정리
- 선언:
--name: value(:root에 전역, 요소에 지역) - 사용:
var(--name, fallback) - 다크 모드: 선택자별로 변수 값만 교체
- 디자인 시스템: 색상, 간격, 폰트 등 토큰화
- JavaScript 연동:
setProperty/getPropertyValue
CSS 변수는 유지보수 가능한 CSS 코드의 기반입니다.