CSS에서 변수(Custom Properties)를 사용하면 스타일 값을 재사용하고 관리하기 쉽게 만듭니다. CSS 변수는 --로 시작하며, :root 선택자나 특정 범위 내에서 정의할 수 있습니다. 정의된 변수는 var() 함수로 호출할 수 있습니다.
기본 사용법
/* 변수 정의 */
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
/* 변수 사용 */
body {
color: var(--main-color);
background-color: var(--secondary-color);
font-size: var(--font-size);
}
/* 변수 재정의 */
.dark-theme {
--main-color: #ecf0f1;
--secondary-color: #34495e;
}
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
/* 변수 사용 */
body {
color: var(--main-color);
background-color: var(--secondary-color);
font-size: var(--font-size);
}
/* 변수 재정의 */
.dark-theme {
--main-color: #ecf0f1;
--secondary-color: #34495e;
}
주요 특징
- 범위 제한 가능: CSS 변수는 특정 요소에 한정하여 정의할 수 있으며, 그 하위 요소에서만 적용됩니다.
- 상속 가능: 정의된 변수는 자식 요소에도 상속됩니다.
- JavaScript와 연동: JavaScript를 사용해 CSS 변수를 동적으로 변경할 수 있습니다.
JavaScript로 변수 변경
// 변수 변경
document.documentElement.style.setProperty('--main-color', '#e74c3c');
// 변수 값 가져오기
const mainColor = getComputedStyle(document.documentElement).getPropertyValue('--main-color');
console.log(mainColor); // '#e74c3c'
document.documentElement.style.setProperty('--main-color', '#e74c3c');
// 변수 값 가져오기
const mainColor = getComputedStyle(document.documentElement).getPropertyValue('--main-color');
console.log(mainColor); // '#e74c3c'
실용적인 사용 사례
- 다크 모드/라이트 모드 전환: 변수로 색상을 정의해 테마를 쉽게 변경할 수 있습니다.
- 테마 관리: 브랜드 색상이나 공통 스타일 요소를 변수로 정의하여 일괄 관리.
- 반응형 디자인: 폰트 크기나 간격 등 뷰포트 크기에 따라 조정.
장점
- 스타일 재사용 및 유지보수가 용이.
- 동적인 스타일 변경에 유용.
- 코드 가독성 증가.
CSS 변수를 활용하면 더욱 효율적인 스타일 작성이 가능합니다!
