[챗GPT가 알려주는] 사용자 지정 CSS 속성 (Custom Properties, 또는 CSS 변수)란?

✅ 사용자 지정 CSS 속성 (Custom Properties, 또는 CSS 변수)란?

사용자 지정 CSS 속성은 CSS에서 변수처럼 값을 저장해서 여러 곳에서 재사용할 수 있게 해주는 기능입니다. CSS 코드의 유지보수성과 일관성을 높여주는 데 아주 유용합니다.

---

🔧 문법

:root {
  --main-color: #3498db;
  --padding: 16px;
}

• --main-color, --padding은 사용자 지정 속성명
• :root 선택자는 전역(Global)에서 사용할 수 있도록 설정합니다.

---

🎨 사용 방법

.box {
  background-color: var(--main-color);
  padding: var(--padding);
}

• var(--속성명) 형태로 값을 불러와 사용할 수 있습니다.

---

💡 장점

1. 반복 줄이기: 같은 색상이나 값을 여러 번 쓰지 않아도 됨
2. 유지보수 쉬움: 한 곳만 고치면 전체가 반영됨
3. 테마 변경 쉬움: 다크모드나 색상 테마 구현 시 유용

---

🌙 예시: 다크 모드

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #f5f5f5;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}