CSS Custom Properties(변수)는 스타일의 일관성을 유지하면서도 유지보수성을 높이는 강력한 기능입니다. 전역 변수 활용, 다크 모드 적용, 동적 테마 변경을 통해 효율적인 스타일 관리를 구현하는 방법을 살펴보겠습니다.
1. CSS Custom Properties란?
CSS Custom Properties(변수)는 -- 접두사를 사용하여 선언하는 사용자 정의 속성으로, JavaScript를 이용한 동적 변경도 가능합니다. 기존의 SCSS 변수와 다르게, CSS 자체에서 정의 및 재정의할 수 있는 점이 특징입니다.
✅ CSS 변수의 기본 문법
:root {
--main-color: #3498db;
--font-size: 16px;
}
button {
background-color: var(--main-color);
font-size: var(--font-size);
}
➡ var(--변수명)을 사용하여 정의된 값을 참조할 수 있습니다.
2. 전역 변수 활용법
전역 변수를 사용하면 스타일의 일관성을 유지할 수 있습니다. 일반적으로 :root에 변수들을 정의하여 모든 요소에서 활용할 수 있도록 설정합니다.
📌 전역 변수 설정 예시
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--background-light: #ffffff;
--background-dark: #121212;
--text-color: #333;
--font-size-base: 16px;
}
이제, 이를 다양한 요소에 적용하면 스타일 변경이 쉬워집니다.
body {
background-color: var(--background-light);
color: var(--text-color);
font-size: var(--font-size-base);
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
✅ 장점:
- 전체적인 디자인의 일관성을 유지할 수 있음
- 한 곳에서 변수만 수정하면 전체 스타일이 자동 변경됨
- 유지보수 및 확장이 용이
3. 다크 모드 적용
CSS Custom Properties를 활용하면 다크 모드를 쉽게 구현할 수 있습니다.
📌 다크 모드 변수 적용
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
.dark-mode {
--bg-color: #121212;
--text-color: #ffffff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
➡ .dark-mode 클래스를 body 태그에 추가하면 자동으로 다크 모드가 적용됩니다.
📌 JavaScript를 활용한 다크 모드 토글
const toggleDarkMode = () => {
document.body.classList.toggle('dark-mode');
};
document.querySelector('#darkModeButton').addEventListener('click', toggleDarkMode);
✅ 장점:
- CSS만으로 간단한 다크 모드 구현 가능
- JavaScript를 활용하면 동적으로 테마 전환 가능
- 기존 스타일을 변경할 필요 없이 새로운 테마만 정의
4. 동적 테마 변경
CSS 변수를 사용하면 테마를 유연하게 변경할 수 있습니다.
📌 테마 변수 정의
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
}
.theme-red {
--primary-color: #e74c3c;
--secondary-color: #c0392b;
}
.theme-green {
--primary-color: #2ecc71;
--secondary-color: #27ae60;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
➡ .theme-red, .theme-green 클래스를 body에 추가하면 테마가 즉시 변경됩니다.
📌 JavaScript를 활용한 테마 변경
const setTheme = (theme) => {
document.body.classList.remove('theme-red', 'theme-green');
document.body.classList.add(theme);
};
document.querySelector('#redThemeButton').addEventListener('click', () => setTheme('theme-red'));
document.querySelector('#greenThemeButton').addEventListener('click', () => setTheme('theme-green'));
✅ 장점:
- CSS 변수만 수정하여 여러 개의 테마를 쉽게 적용 가능
- JavaScript 이벤트와 결합하여 동적 변경 가능
- 유지보수성과 확장성이 뛰어남
✅ 전역 변수를 사용하여 스타일을 일관성 있게 관리
✅ 다크 모드를 간단한 CSS 변수 변경으로 적용
✅ 동적 테마 변경을 활용하여 다양한 스타일을 손쉽게 적용
CSS Custom Properties를 활용하면 유지보수하기 쉬운 스타일을 작성할 수 있으며, 다크 모드 및 테마 변경 같은 동적 스타일링도 유연하게 처리할 수 있습니다. 🚀
