🌱 기초 프론트엔드
CSS 변수(Custom Property)란?
쉽게 이해하기
자주 쓰는 전화번호를 연락처에 저장해두는 것과 비슷해요. 매번 긴 번호를 입력하는 대신 이름만 눌러서 전화를 걸 수 있죠. CSS 변수도 색상, 크기 같은 값을 한 번 정의해두고 이름으로 불러서 쓸 수 있어요.
핵심 정리
CSS에서 값을 저장해두고 재사용할 수 있는 변수 기능이에요.
자세히 알아보기
CSS 변수는 '--'로 시작하는 이름으로 정의하고, var() 함수로 사용해요. 예를 들어 --main-color: #3498db;로 색을 정의하고, color: var(--main-color);처럼 쓰는 거죠.
왜 유용할까요? 사이트 전체에서 쓰는 브랜드 컬러를 바꾸려면, 변수 없이는 수십 개 파일에서 일일이 찾아 바꿔야 해요. 하지만 CSS 변수를 쓰면 한 곳만 수정하면 모든 곳에 반영돼요.
실무에서는 디자인 시스템을 만들 때 필수로 써요. --spacing-small: 8px, --spacing-medium: 16px 같은 식으로 간격을 변수로 관리하면 일관성 있는 디자인을 유지할 수 있거든요. 다크모드 구현할 때도 아주 유용해요.
CSS 변수는 JavaScript에서도 접근할 수 있어요. document.documentElement.style.setProperty()로 값을 동적으로 바꿀 수 있죠. 사용자가 테마 색상을 직접 커스텀하는 기능을 만들 때 자주 쓰입니다.