⭐️ CSS 변수(Custom Properties) 활용하기

🎨 1. CSS 변수란?

CSS 변수(CSS Custom Properties)는 재사용 가능한 값을 CSS 내에서 저장하고 관리할 수 있게 해주는 기능입니다.

기본 문법

/* 변수 선언 */
:root {
  --main-color: #007bff;
  --text-color: #333;
  --spacing-unit: 8px;
}

/* 변수 사용 */
.button {
  background-color: var(--main-color);
  color: white;
  padding: var(--spacing-unit);
}

🔄 2. CSS 변수의 장점

1. 재사용성

   • 한 번 정의한 값을 여러 곳에서 사용 가능
   • 값 변경 시 한 곳만 수정하면 됨

2. 유지보수 용이성

   • 테마 변경, 다크 모드 등 구현이 쉬워짐
   • 일관된 스타일 관리 가능

3. 동적 변경 가능

   • JavaScript를 통해 실시간으로 값 변경 가능
   • 사용자 설정에 따른 스타일 변경 용이

🌓 3. 다크 모드 구현 예시

HTML

<div class="app">
  <button onclick="toggleTheme()">테마 변경</button>
  <div class="content">
    <h1>안녕하세요!</h1>
    <p>이것은 다크 모드 예시입니다.</p>
  </div>
</div>

CSS

/* 라이트 모드 (기본) */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --secondary-bg: #f0f0f0;
  --border-color: #dddddd;
}

/* 다크 모드 */
[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
  --secondary-bg: #2d2d2d;
  --border-color: #444444;
}

/* 스타일 적용 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: all 0.3s ease;
}

.content {
  background-color: var(--secondary-bg);
  border: 1px solid var(--border-color);
  padding: 20px;
  margin: 20px;
}

JavaScript

function toggleTheme() {
  const root = document.documentElement;
  const currentTheme = root.getAttribute('data-theme');
  
  if (currentTheme === 'dark') {
    root.removeAttribute('data-theme');
  } else {
    root.setAttribute('data-theme', 'dark');
  }
}

🛠 4. 실용적인 활용 팁

1. 반응형 디자인에서 활용

:root {
  --container-width: 1200px;
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
}

@media (max-width: 768px) {
  :root {
    --container-width: 100%;
    --spacing-large: 16px;
  }
}

2. 컴포넌트별 변수 범위 설정

.card {
  --card-padding: 16px;
  --card-border-radius: 8px;
  
  padding: var(--card-padding);
  border-radius: var(--card-border-radius);
}

.card.small {
  --card-padding: 8px;
}

3. JavaScript와 연동

// CSS 변수 값 가져오기
const rootStyles = getComputedStyle(document.documentElement);
const mainColor = rootStyles.getPropertyValue('--main-color');

// CSS 변수 값 설정하기
document.documentElement.style.setProperty('--main-color', '#ff0000');

💡 5. 브라우저 지원 및 폴백(Fallback) 처리

폴백 값 지정

.element {
  /* 폴백으로 사용할 값을 먼저 지정 */
  color: #333;
  /* CSS 변수를 지원하는 브라우저에서는 이 값이 사용됨 */
  color: var(--text-color, #333);
}

@supports 활용

@supports (--css: variables) {
  /* CSS 변수를 지원하는 브라우저에서만 적용될 스타일 */
  .element {
    color: var(--text-color);
  }
}

📝 느낀 점

• CSS 변수를 활용하면 테마 구현이나 스타일 관리가 훨씬 편리해짐
• JavaScript와의 연동이 쉬워 동적인 스타일 변경이 용이함
• 브라우저 호환성이 좋아 실무에서 안심하고 사용할 수 있음
• 특히 다크 모드 구현 시 매우 유용하게 활용 가능