CSS 변수
1.:root
2. CSS Variables
CSS Variables(CSS 사용자 정의 속성)는 --로 시작하는 이름을 가지며, var() 함수를 사용하여 값을 참조할 수 있습니다. 이를 통해 스타일을 더 쉽게 재사용하고 관리할 수 있습니다.
CSS Variables는 특히 브랜드 디자인 시스템을 구축할 때 매우 유용하며, 색상 시스템, 그리드 시스템, 아이콘 시스템 등의 카테고리로 나누어 체계적으로 관리할 수 있습니다.
var은 첫번째 인자로 가져올 값의 변수 이름을, 두번째로는 해당 변수에 값을 가져오지 못했을 때 적용할 대체값을 작성합니다. 대체값은 필수는 아니지만 보다 안전하게 화면을 구성할 수 있다는 장점이 있습니다.
이렇게 변수를 이용하면 전체적인 디자인 일관성을 유지하기 쉽고, 수정이 필요할 때 한 곳만 수정하면 되기 때문에 유지보수성이 향상됩니다.
2.1 테마 전환
CSS 변수는 테마 전환에 특히 유용합니다. 다크 모드와 라이트 모드를 쉽게 구현할 수 있습니다.
:root {
/* 라이트 모드 (기본) */
--background-color: #ffffff;
--text-color: #333333;
--accent-color: #0066cc;
}
[data-theme='dark'] {
/* 다크 모드 */
--background-color: #222222;
--text-color: #f0f0f0;
--accent-color: #4d9fff;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
a {
color: var(--accent-color);
}:root {
/* 라이트 모드 (기본) */
--background-color: #ffffff;
--text-color: #333333;
--accent-color: #0066cc;
}
[data-theme='dark'] {
/* 다크 모드 */
--background-color: #222222;
--text-color: #f0f0f0;
--accent-color: #4d9fff;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
a {
color: var(--accent-color);
}JavaScript에서는 간단히 아래와 같이 테마를 전환할 수 있습니다.
// 다크 모드로 전환
document.documentElement.setAttribute('data-theme', 'dark');
// 라이트 모드로 전환
document.documentElement.removeAttribute('data-theme');// 다크 모드로 전환
document.documentElement.setAttribute('data-theme', 'dark');
// 라이트 모드로 전환
document.documentElement.removeAttribute('data-theme');