[CSS] CSS 변수

프로젝트를 진행하면서 급하게 수정해야할 문제가 생겼는데
해당 문제를 해결하면서 알게된 css변수!
뭔지 한 번 알아보자!

🎨 CSS 변수(커스텀 프로퍼티)란?

CSS 변수(커스텀 프로퍼티)는 CSS에서 값을 변수처럼 저장하고 재사용할 수 있는 기능
반복되는 값을 줄이고, 유지보수를 쉽게 하기 위해 사용

---

📌 기본 문법

CSS 변수는 --변수명 형식으로 선언하고 var(--변수명)으로 사용

:root {
  --main-color: #3498db;   /* 변수 선언 */
  --padding-size: 16px;
}

.box {
  background-color: var(--main-color);  /* 변수 사용 */
  padding: var(--padding-size);
}

📌 설명

• :root → CSS 변수의 전역 선언 (모든 요소에서 사용 가능)
• --main-color → 변수 이름
• var(--main-color) → 변수 값 사용

---

🚀 CSS 변수를 쓰면 좋은 이유

1️⃣ 반복 줄이기 & 유지보수 편리

/* ❌ 변수 없이 작성 (중복 발생) */
.button { background-color: #3498db; }
.card { border: 2px solid #3498db; }
.text { color: #3498db; }

/* ✅ 변수 사용 (한 곳에서 수정 가능) */
:root { --primary-color: #3498db; }
.button { background-color: var(--primary-color); }
.card { border: 2px solid var(--primary-color); }
.text { color: var(--primary-color); }

✔ 색상을 바꾸려면 변수 값만 수정하면 끝!

---

2️⃣ 반응형 디자인에서 유용

:root {
  --spacing: 16px;
}

.box {
  padding: var(--spacing);
}

@media (max-width: 600px) {
  :root {
    --spacing: 8px;  /* 작은 화면에서는 padding 줄이기 */
  }
}

✔ 미디어 쿼리를 활용해 변수 값만 변경하면 자동 적용!

---

3️⃣ 다크 모드 적용 쉽게 가능

:root {
  --bg-color: white;
  --text-color: black;
}

.dark-mode {
  --bg-color: black;
  --text-color: white;
}

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

✔ 클래스만 바꾸면 다크 모드로 전환 가능! (.dark-mode 추가하면 변경됨)

---

🔹 변수의 기본값 설정

변수가 없을 때 기본값을 지정할 수도 있다

.box {
  background-color: var(--bg, lightgray); /* --bg가 없으면 lightgray 사용 */
}

---

📌 결론

✅ CSS 변수는 유지보수에 강하고, 반복되는 스타일을 줄여준다
✅ 반응형 디자인, 테마 변경(다크 모드) 등에 유용하다
✅ 값을 한 곳에서 관리하므로 수정이 쉽다