🌱 기초 프론트엔드
CSS 변수는 어떻게 쓰나요?
쉽게 이해하기
회사에서 자주 쓰는 문구를 매번 타이핑하는 대신 텍스트 단축키로 저장해두면 편하죠. CSS 변수도 마찬가지예요. 자주 쓰는 색상이나 크기를 변수로 저장해두면 나중에 한 번만 바꿔도 전체 사이트에 적용돼요.
핵심 정리
CSS 변수를 사용하면 색상이나 여백 같은 값을 한 곳에서 관리할 수 있어요.
자세히 알아보기
CSS 변수(CSS Custom Properties)는 CSS에서 재사용 가능한 값을 저장하는 기능이에요. --main-color처럼 이름을 정의하고, var(--main-color)로 불러와서 사용합니다.
예를 들어 웹사이트의 메인 컬러가 파란색이라면, :root { --primary: #3b82f6; } 로 정의하고, 버튼, 링크, 헤더 등 여러 곳에서 color: var(--primary); 로 사용할 수 있어요. 나중에 브랜드 컬러가 바뀌면 한 줄만 수정하면 전체가 바뀌죠.
다크모드 구현할 때도 유용해요. :root에 --bg-color: white; 를 정의하고, .dark-mode { --bg-color: black; } 로 전환하면 간단하게 테마를 바꿀 수 있어요.
CSS 변수는 상속도 되고, JavaScript로도 접근할 수 있어서 동적으로 스타일을 변경할 때도 편리합니다. 프로젝트가 커질수록 유지보수가 훨씬 쉬워지는 핵심 도구예요.