CSS 변수 — 색상과 값을 한 곳에서 관리하기

색상을 10군데에 써뒀는데 바꾸려니…

button { background-color: #0070f3; }
a { color: #0070f3; }
.highlight { border-color: #0070f3; }
/* ... */

브랜드 색상을 바꾸려면 10군데를 다 찾아서 바꿔야 합니다. 하나라도 놓치면 일관성이 깨집니다.

CSS 변수(Custom Properties) 로 이 문제를 해결합니다.

CSS 변수 기본 사용법

/* 변수 선언: :root에 두면 전체 페이지에서 사용 가능 */
:root {
  --color-primary: #0070f3;
  --color-text: #333333;
  --color-bg: #ffffff;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --radius: 8px;
}

/* 변수 사용: var(--변수명) */
button {
  background-color: var(--color-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius);
}

a {
  color: var(--color-primary);
}

변수 이름은 반드시 --로 시작합니다. :root는 HTML 문서 전체를 나타내는 최상위 선택자입니다.

변수의 장점

1. 한 곳에서 전체 변경

:root {
  --color-primary: #e94560;   /* 파란색 → 빨간색으로 한 번에 교체 */
}

이것만 바꾸면 버튼, 링크, 테두리 등 이 변수를 쓰는 모든 곳이 한꺼번에 바뀝니다.

2. 기본값 지정

color: var(--color-accent, #ff6b6b);   /* 변수가 없으면 #ff6b6b 사용 */

3. 계산에 활용

:root {
  --base-size: 16px;
}

h1 {
  font-size: calc(var(--base-size) * 2.5);   /* 40px */
}

실전 디자인 토큰 시스템

:root {
  /* === 색상 === */
  --color-primary: #0070f3;
  --color-primary-hover: #0051cc;
  --color-secondary: #7928ca;
  --color-success: #0cce6b;
  --color-warning: #f5a623;
  --color-danger: #e00;

  /* === 텍스트 색상 === */
  --color-text: #111111;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;

  /* === 배경 색상 === */
  --color-bg: #ffffff;
  --color-bg-subtle: #f9fafb;
  --color-border: #e5e7eb;

  /* === 간격 === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* === 폰트 크기 === */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */

  /* === 기타 === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
}

다크 모드 맛보기

CSS 변수를 활용하면 다크 모드를 비교적 쉽게 구현할 수 있습니다.

:root {
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-border: #e5e7eb;
}

/* 시스템 설정이 다크 모드일 때 */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #111111;
    --color-text: #f0f0f0;
    --color-border: #333333;
  }
}

/* 변수를 쓰는 코드는 그대로 */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

prefers-color-scheme: dark는 사용자의 운영 체제 다크 모드 설정을 감지합니다.

변수로 컴포넌트 테마 만들기

:root {
  --btn-bg: var(--color-primary);
  --btn-color: white;
  --btn-padding: var(--space-2) var(--space-4);
  --btn-radius: var(--radius-md);
}

.btn {
  background-color: var(--btn-bg);
  color: var(--btn-color);
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn:hover {
  --btn-bg: var(--color-primary-hover);
}

/* 변형: 위험 버튼 */
.btn-danger {
  --btn-bg: var(--color-danger);
}

/* 변형: 외곽선 버튼 */
.btn-outline {
  --btn-bg: transparent;
  --btn-color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

직접 해보기 ✏️

HTML 프로젝트 CSS에 변수 시스템을 도입해 보세요.

:root에 주요 색상 변수 3~5개 정의
기존 하드코딩된 색상값을 변수로 교체
변수 하나를 바꿔서 전체 색상이 바뀌는지 확인
(도전) @media (prefers-color-scheme: dark) 로 다크 모드 추가

/* 시작 템플릿 */
:root {
  --primary: #0070f3;
  --text: #222222;
  --bg: #ffffff;
  --border: #e0e0e0;
}

정리

개념	내용
CSS 변수 선언	`--변수명: 값;`
`:root`	전체 페이지 범위 변수
변수 사용	`var(--변수명)`
기본값	`var(--변수명, 기본값)`
다크 모드	`@media (prefers-color-scheme: dark)`

다음 편은 CSS 시리즈의 마지막 — 완성 프로젝트입니다. HTML 프로젝트 페이지에 지금까지 배운 모든 CSS를 적용해 멋진 소개 사이트로 만들어 봅니다.