개요
CSS 사용자 지정 속성(CSS Variables, Custom Properties)은 재사용 가능한 값을 선언하고 문서 전반에서 참조하기 위한 메커니즘 반복되는 색상, 간격, Z-index 같은 값을 의미 있는 이름으로 관리해 전역 치환 리스크를 줄이고 테마 전환 같은 요구에 유연하게 대응 가능 사용자 지정 속성은 일반 CSS 규칙에 포함되어 캐스케이딩과 상속의 영향을 받음
핵심 개념
- 표기 규칙: 이름은 두 개의 대시로 시작, 예) –main-color
- 대소문자 구분: –my-color와 –My-color는 서로 다른 속성
- 참조 방식: var(–name) 형태로 값 참조
- 기본값 지원: var(–name, fallback) 형태로 값이 없을 때 대체값 지정 가능
- 속성 값 위치에서만 사용 가능, 선택자나 미디어 쿼리 조건, 속성 이름에는 사용 불가
동작 원리와 스코프
- 사용자 지정 속성은 선언된 규칙의 선택자 범위에만 유효
- 상속 특성 보유, 상위에서 선언하면 하위에서 참조 가능
- :root에 선언하면 문서 전역 범위의 기본값으로 동작
- 동일한 변수 이름을 더 구체적인 선택자나 조건에서 재정의하면 캐스케이드에 따라 해당 범위에서 우선 적용
사용법과 짧은 예시
전역 선언과 기본 참조
:root { --main-bg-color: brown }
element { background-color: var(--main-bg-color) }기본값(fallback) 지정
a { color: var(--link-color, #0076d1) }스코프 한정 재정의 예시
.card { --padding: 12px }
.card.compact { --padding: 8px }
.card > .content { padding: var(--padding) }다크 모드 적용 패턴
미디어 쿼리에서 :root의 변수만 교체해 전체 테마 전환 수행
:root {
--background: #fff;
--text: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #202b38;
--text: #dbdbdb;
}
}
body {
background: var(--background);
color: var(--text);
}핵심은 컴포넌트 스타일이 변수에만 의존하도록 구성하는 것 테마 전환 시 변수 집합만 바꾸면 개별 규칙 수정 없이 전체 스타일이 갱신됨
주의 사항과 베스트 프랙티스
- 유효성 규칙: var()가 가리키는 변수가 정의되지 않고 fallback도 없으면 해당 선언은 무효 처리됨
- 타입 검증 시점: 사용자 지정 속성은 파싱 단계에서 타입이 정해지지 않으며 최종 계산 단계에서 값으로 치환됨, 따라서 잘못된 단위를 끼워 넣으면 최종 계산 시점에 무효 처리 가능
- 사용 위치 제약: 선택자, @media 조건, 속성 이름에는 사용 불가, 속성 값에서만 사용
- 네이밍: 역할 중심 네이밍 권장, 예) –color-primary, –spacing-md 같은 스케일 기반 명명
- 스코프 전략: 공통값은 :root, 컴포넌트 특화값은 컴포넌트 컨테이너에서 재정의
- 테마 전환: prefers-color-scheme 또는 data-theme 속성 토글로 변수 집합 재정의, 로직은 CSS에 두고 JS 개입 최소화
- 성능 관점: 동적으로 자주 바뀌는 상위 노드에서 광범위한 변수 재정의 남발 지양, 불필요한 스타일 재계산 범위 확대 가능
- 점진적 적용: 기존 하드코딩 값을 우선 변수명으로 치환하고, 이후 테마나 상태별 재정의를 도입하는 단계적 전환 권장
정리
CSS 사용자 지정 속성은 캐스케이드와 상속에 자연스럽게 녹아드는 런타임 변수 체계 전역 기본값은 :root에 두고, 필요한 범위에서만 재정의하는 구조가 유지보수와 테마 전환에 유리함 var()와 fallback을 적절히 사용해 안전하게 적용하고, 선택자나 미디어 조건 등 사용 불가 영역을 피하는 것이 핵심
참고자료
- MDN Using CSS custom properties