CSS Variables를 활용한 동적 스타일링

**CSS Variables(변수)**는 CSS에서 값을 재사용 가능하게 정의할 수 있는 기능으로, 웹 디자인의 일관성을 유지하면서도 동적 스타일링을 손쉽게 구현할 수 있습니다. CSS 변수는 --로 시작하며, JavaScript와 결합하면 실시간으로 스타일을 변경하는 강력한 도구가 됩니다. 이 글에서는 CSS 변수의 기본 사용법과 동적 스타일링의 다양한 사례를 소개합니다.

---

1. CSS Variables의 기본 개념과 문법

CSS Variables는 다른 프로그래밍 언어의 변수와 유사하게 동작하며, 특정 값을 선언한 후 재사용할 수 있습니다.

1. CSS Variables 선언
   • CSS 변수는 --로 시작하며, 주로 :root에 선언하여 전역적으로 사용할 수 있습니다.
     :root { --primary-color: #3498db; --font-size: 16px; }
2. CSS Variables 사용
   • var() 함수를 사용해 변수를 참조합니다.
     body { background-color: var(--primary-color); font-size: var(--font-size); }
3. 기본값 설정
   • 변수가 선언되지 않았을 경우 var() 함수에서 기본값을 제공할 수 있습니다.
     h1 { color: var(--secondary-color, #2ecc71); /* 변수 없을 경우 #2ecc71 사용 */ }
4. 변수의 상속
   • CSS 변수는 DOM 구조를 따라 상속됩니다. 이를 활용해 특정 영역에서 변수 값을 변경할 수 있습니다.
     .theme-dark { --primary-color: #2c3e50; }
     .theme-light { --primary-color: #ecf0f1; }

---

2. CSS Variables를 사용한 반응형 디자인 구현

CSS Variables는 미디어 쿼리와 결합하여 다양한 화면 크기에 적응하는 동적 스타일링을 지원합니다.

1. 미디어 쿼리에서 변수 값 변경
   • 특정 화면 크기에서 변수 값을 변경하여 반응형 스타일을 적용할 수 있습니다.
     :root { --font-size: 16px; }
     @media (max-width: 768px) { :root { --font-size: 14px; } }
     body { font-size: var(--font-size); }
2. 동적 레이아웃 설정
   • 레이아웃의 여백이나 크기를 변수로 정의하여 화면 크기에 따라 유동적으로 조정합니다.
     :root { --container-width: 1200px; }
     @media (max-width: 1024px) { :root { --container-width: 90%; } }
     .container { width: var(--container-width); margin: 0 auto; }

---

3. JavaScript와 CSS Variables를 활용한 동적 스타일링

CSS Variables는 JavaScript와 결합하면 실시간으로 스타일을 변경하는 강력한 도구가 됩니다.

1. JavaScript로 변수 값 변경
   • document.documentElement.style.setProperty()를 사용해 변수 값을 동적으로 변경할 수 있습니다.
     const root = document.documentElement; const themeToggle = document.getElementById('theme-toggle'); themeToggle.addEventListener('click', () => { root.style.setProperty('--primary-color', '#e74c3c'); });
2. 슬라이더로 글꼴 크기 조정
   • 사용자 입력 값에 따라 변수 값을 변경합니다.
     <input type="range" id="font-size-slider" min="12" max="24" value="16">
     <p>조정 가능한 텍스트</p>
     <script> const slider = document.getElementById('font-size-slider'); slider.addEventListener('input', () => { document.documentElement.style.setProperty('--font-size', `${slider.value}px`); }); </script>
3. 테마 변경 구현
   • 다크 모드와 라이트 모드를 토글할 수 있습니다.
     :root { --background-color: #ffffff; --text-color: #000000; }
     .dark-theme { --background-color: #000000; --text-color: #ffffff; }
     body { background-color: var(--background-color); color: var(--text-color); }
   • const toggleButton = document.getElementById('toggle-theme'); toggleButton.addEventListener('click', () => { document.documentElement.classList.toggle('dark-theme'); });

---

4. CSS Variables로 테마 시스템 구축하기

CSS Variables는 여러 테마를 쉽게 정의하고 관리하는 데 유용합니다.

1. 테마별 변수 설정
   • 테마에 따라 전역 변수 값을 변경합니다.
     :root { --primary-color: #3498db; --secondary-color: #2ecc71; }
     .dark-theme { --primary-color: #34495e; --secondary-color: #1abc9c; }
2. CSS 파일 분리
   • 각 테마를 별도의 CSS 파일로 분리하여 필요할 때만 로드할 수 있습니다.
     <link rel="stylesheet" href="light-theme.css" id="theme-stylesheet">
     <script> const toggleTheme = () => { const themeStylesheet = document.getElementById('theme-stylesheet'); themeStylesheet.href = themeStylesheet.href.includes('light') ? 'dark-theme.css' : 'light-theme.css'; }; </script>
3. 실시간 테마 변경
   • 사용자 입력에 따라 테마를 동적으로 변경합니다.
     <button onclick="toggleTheme()">테마 변경</button>

---

CSS Variables 활용의 장점

1. 유지보수 용이성
   • 모든 스타일 값을 변수로 관리하여 코드 중복을 줄이고, 디자인 변경 시 수정 작업을 간소화합니다.
2. 동적 스타일링 지원
   • JavaScript와 결합하여 사용자 입력이나 조건에 따라 실시간 스타일 변경이 가능합니다.
3. 반응형 및 확장성
   • 미디어 쿼리와 결합해 화면 크기와 디바이스에 따라 유연한 디자인을 제공합니다.
4. 효율적인 테마 관리
   • 다크 모드, 라이트 모드와 같은 다양한 테마를 손쉽게 구현할 수 있습니다.

---

결론

CSS Variables는 현대적인 웹 디자인에서 필수적인 도구로, 동적 스타일링과 반응형 디자인을 간소화하고 효율적으로 관리할 수 있습니다. CSS Variables와 JavaScript를 결합하면 더욱 창의적이고 상호작용적인 웹 경험을 제공할 수 있습니다. 이를 활용해 더 나은 사용자 경험을 제공하고 프로젝트의 품질을 한 단계 끌어올려 보세요.