프로젝트 전체에 흩어진 색상 코드를 일일이 찾아 바꾸느라 고생한 적 있나요? CSS 변수(Custom Properties)를 사용하면 색상 관리가 훨씬 쉬워집니다.
CSS 변수 기본 사용법
:root에 --primary-color: #007BFF; 처럼 선언하고, color: var(--primary-color);로 사용합니다. 한 곳만 바꾸면 전체가 바뀝니다.
체계적인 색상 변수 구조
--color-primary, --color-secondary, --color-success, --color-error 처럼 의미 기반으로 이름 짓습니다. --color-blue-500 같은 값 기반 이름과 병행하면 더 유연합니다. 색상 변환기로 정확한 색상 값을 확인하세요.
다크모드 전환
@media (prefers-color-scheme: dark)에서 변수 값만 재정의하면 다크모드가 완성됩니다. JavaScript 없이도 테마 전환이 가능합니다.
Sass와 함께 사용
Sass 변수로 기본값을 정의하고 CSS 변수로 내보내면 컴파일 타임과 런타임의 장점을 모두 활용할 수 있습니다.
CSS 변수 fallback
color: var(--primary-color, #007BFF);처럼 fallback 값을 지정할 수 있습니다. 변수가 정의되지 않았거나 브라우저가 지원하지 않을 때 사용됩니다. 색상 변환기로 fallback에 쓸 HEX 값을 확인하세요.
런타임 변경
JavaScript로 document.documentElement.style.setProperty("--primary-color", "#FF0000")처럼 변수 값을 바꿀 수 있습니다. 사용자가 테마 색상을 선택할 수 있는 기능을 만들 때 유용합니다.
calc()와 조합
CSS calc()와 CSS 변수를 조합하면 동적인 색상 조작이 가능합니다. 다만 직접적인 색상 계산보다는 HSL 변수를 분리해서 각 채널을 개별 변수로 관리하는 방식이 더 유연합니다.
최종 점검
프로젝트에서 사용하는 모든 색상을 문서화하세요. HEX, RGB, HSL 형식을 함께 기록하면 어떤 상황에서도 바로 사용할 수 있습니다. 색상 변환기로 일괄 변환하면 편리합니다.