이번 편의 결과물: :root에 시안의 색상·타이포·간격 토큰이 전부 변수로 정의됩니다(본격적인 적용은 05편부터입니다). 다루는 개념: 커스텀 속성(--변수) 문법과 상속, :root에 값 모으기, var()와 폴백 값
지금까지 styles.css에는 #0969da 같은 값을 직접 썼습니다. 이 값이 열 군데에 흩어지면 브랜드 색 하나 바꾸는 데 열 곳을 고쳐야 합니다. 디자인 토큰(design token)은 이런 값에 이름을 붙여 한 곳에서만 관리하는 방법입니다.
이 편에서 만드는 파일
web-practice/portfolio/
├── index.html ~ (<link> 한 줄 추가)
├── projects.html ~ (<link> 한 줄 추가)
├── contact.html ~ (<link> 한 줄 추가)
└── css/
├── tokens.css + (신규: 색·타이포·간격 변수)
└── styles.css (이번 편에서는 수정하지 않음)개념 정리
커스텀 속성(custom property)은 --로 시작하는 이름에 값을 저장하는 CSS 문법입니다.
:root {
--color-primary: #0969da;
}:root는 문서 최상위 요소(<html>)를 가리키는 선택자입니다. 여기에 변수를 정의하면 CSS의 상속 규칙에 따라 문서 안 모든 요소가 이 값을 물려받아 쓸 수 있습니다.
저장한 값은 var() 함수로 꺼내 씁니다.
.logo {
color: var(--color-primary);
}var()는 두 번째 인자로 폴백(fallback) 값을 받을 수 있습니다. 변수가 정의되지 않았을 때만 이 값이 쓰입니다.
color: var(--color-primary, #0969da);| 방식 | 값 위치 | 브랜드 색을 바꿀 때 |
|---|---|---|
하드코딩(#0969da 반복) | 쓰이는 곳마다 흩어짐 | 쓰인 곳을 전부 찾아 고쳐야 함 |
커스텀 속성(var(--color-primary)) | :root 한 곳 | :root의 값 한 줄만 고치면 전체 반영 |
일반 값과 달리 커스텀 속성 이름은 대소문자를 구분하고, 하이픈 두 개(--)로 시작해야 합니다. 시안 스펙에 정의된 이름을 그대로 씁니다.
실습
1. tokens.css 파일 만들기
web-practice/portfolio/css/ 안에 tokens.css를 새로 만듭니다.
2. 토큰 작성
시안 스펙(design-spec.md 3절)의 색·타이포·간격·레이아웃 값을 그대로 옮겨 적습니다.
/* web-practice/portfolio/css/tokens.css */
:root {
/* 색 */
--color-bg: #ffffff;
--color-surface: #f6f7f9;
--color-text: #1f2328;
--color-text-muted: #59636e;
--color-primary: #0969da;
--color-primary-hover: #0550ae;
--color-border: #d0d7de;
--color-accent: #bf3989;
/* 타이포 */
--font-sans: 'Pretendard', 'Noto Sans KR', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.25rem;
--text-xl: 1.5rem;
--text-2xl: 2rem;
--text-3xl: 3rem;
--leading: 1.6;
/* 간격 (4px 배수) */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;
/* 레이아웃 */
--container-max: 72rem;
--radius: 0.5rem;
--shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 4px 12px rgb(0 0 0 / 0.06);
--header-height: 4rem;
}각 값 옆 주석의 px 환산(예: 1rem = 16px)은 브라우저 기본 글꼴 크기 16px 기준입니다. 앞으로 모든 편에서 숫자를 직접 쓰지 않고 이 이름들을 var()로 불러 씁니다.
3. HTML에 tokens.css 연결
세 HTML 파일의 <head>에서 styles.css를 연결한 줄 바로 위에 tokens.css 링크를 추가합니다. index.html의 관련 부분은 다음과 같습니다.
<!-- web-practice/portfolio/index.html -->
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
<link rel="stylesheet" href="css/tokens.css" />
<link rel="stylesheet" href="css/styles.css" />tokens.css를 styles.css보다 먼저 연결해야, styles.css 안에서 var(--color-primary)를 쓸 때 이미 :root에 값이 정의된 상태가 됩니다. projects.html·contact.html에도 같은 위치에 같은 두 줄이 있는지 확인합니다(이미 styles.css 링크는 01편에서 넣었으므로 tokens.css 링크 한 줄만 그 위에 추가합니다).
4. 확인
- 화면 모습은 아직 바뀌지 않습니다.
tokens.css는 값을 저장만 할 뿐 어디에도 쓰지 않았습니다. - DevTools Elements 탭에서
<html>요소를 선택하고 Styles 패널을 보면:root규칙 아래--color-primary: #0969da;같은 변수들이 나열됩니다. - Computed 탭에서
Show all체크박스를 켜면 커스텀 속성 값도 계산된 값 목록에 포함되어 보입니다.
직접 해보기
styles.css의 .logo 규칙에서 color: #0969da;를 color: var(--color-primary);로 딱 한 줄만 바꿔 보세요. 화면에 보이는 색은 그대로지만, 이제 이 색은 tokens.css의 값 하나를 참조합니다.
확인 방법
.logo {
color: var(--color-primary);
font-weight: 700;
}바꾼 뒤 tokens.css의 --color-primary 값을 잠깐 다른 색(예: #bf3989)으로 바꿔 저장하면 로고 색도 함께 바뀝니다. 확인 후 원래 값으로 되돌립니다. 나머지 하드코딩된 값들은 05편부터 순서대로 변수로 바꿔 나갑니다.
자주 하는 실수
| 증상 | 원인 | 고치는 법 |
|---|---|---|
var(--color-primary)가 안 먹고 검은색으로 보인다 | tokens.css 링크를 styles.css보다 아래(뒤)에 둠 | <head>에서 tokens.css 링크를 styles.css 링크보다 위로 옮김 |
| 변수 이름을 썼는데 무시된다 | --를 하나만 쓰거나 대소문자를 다르게 씀(-color-primary, --Color-Primary) | 시안 스펙의 이름을 그대로 복사해 붙여넣기 |
:root가 아니라 body에 변수를 정의했다 | :root와 body를 같은 것으로 오해 | :root(<html>)는 body보다 상위이므로 변수 정의는 :root에 모음 |
| 값 뒤 세미콜론을 빠뜨렸다 | 다른 언어의 변수 선언 문법과 혼동 | CSS 선언은 각각 세미콜론(;)으로 끝남 |