CSS 변수
페이지 정보
작성자
DocsArchives
작성일
2025.09.07 19:26
본문
유지보수를 쉽게 만드는 도구
CSS도 점점 더 복잡해지고 있습니다. 색상, 폰트 크기, 여백 값 등이 여러 군데에 반복되면 유지보수가 어려워집니다. 이때 강력한 도구가 바로 CSS 변수(Custom Properties) 입니다.
CSS 변수 기본 문법
:root { --main-color: #3498db; --font-size-lg: 18px;}.button { background-color: var(--main-color); font-size: var(--font-size-lg);}:root는 문서 전체에서 사용할 수 있는 전역 변수를 의미합니다. var(--변수명)으로 불러옵니다.장점
-
사이트 전체 색상/폰트 일괄 변경 가능
-
다크 모드 지원: 변수를 재정의하여 테마 전환 가능
-
유지보수성 향상: 한 번만 수정해도 전체 적용
:root { --bg-color: white; --text-color: black;}body { background: var(--bg-color); color: var(--text-color);}.dark-theme { --bg-color: black; --text-color: white;}위 코드를 사용하면
body에 .dark-theme 클래스를 붙이는 것만으로 다크 모드가 구현됩니다.CSS 변수는 단순한 편의 기능을 넘어 디자인 시스템을 만드는 핵심 도구입니다. 유지보수를 쉽게 하고, 테마 변경을 간단하게 만들며, 현대적인 웹 개발에서 빼놓을 수 없는 기술입니다.
댓글 0