# CSS 변수 (Custom Properties)

CSS 변수(커스텀 프로퍼티)는 재사용 가능한 값을 저장하고 활용할 수 있는 기능이야.
반복되는 색상, 크기, 간격 등을 변수로 선언하면 유지보수가 쉬워져!

CSS 변수는 `--`(대시 두 개)로 시작하는 이름을 사용해 정의해.
`var(--변수이름)` 형식으로 값을 가져올 수 있어!

```css
:root {
  --main-color: blue;
  --font-size: 18px;
}
p {
  color: var(--main-color);
  font-size: var(--font-size);
}
/* --main-color 변수에 저장된 값을 가져와서 텍스트 색상으로 사용! */
```

## CSS 변수 선언 및 사용법

### :root에서 전역 변수 선언
:root를 사용하면 모든 요소에서 변수 사용 가능!
```css
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --text-color: #333;
}
```
### 특정 요소에서 로컬 변수 선언
특정 요소 안에서만 변수 적용 가능!
```css
.card {
  --card-bg: lightgray; /* 이 변수는 .card 내부에서만 사용 가능! */
  background-color: var(--card-bg);
}
```

### var(--변수명)으로 변수 사용
```css
h1 {
  color: var(--primary-color);
}
p {
  color: var(--text-color);
}
```

## CSS 변수의 장점
* 재사용 가능 :	여러 곳에서 동일한 스타일을 적용 가능
* 유지보수 쉬움 :	변수 값만 변경하면 전체 스타일 수정 가능
* 반응형 디자인 활용 가능 :	calc(), media query와 함께 사용 가능




## 예시
### 다크 모드
```css
: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 클래스를 추가하면 다크 모드 자동 적용! */
```
### 반응형 디자인
```css
:root {
  --font-size: 16px;
}
@media (max-width: 768px) {
  :root {
    --font-size: 14px;
  }
}
p {
  font-size: var(--font-size);
}
/* 화면 크기에 따라 자동으로 폰트 크기 조절! */
```
### calc()와 함께 사용
```css
:root {
  --base-size: 10px;
}
.box {
  width: calc(var(--base-size) * 5); /* 50px */
}
```