lesson1Title

lesson2Title

lesson3Title

lesson4Title

webIntroGalleryChapter1Title

lesson5Title

lesson6Title

webIntroGalleryChapter2Title

webIntroGalleryChapter3Title

# CSS 변수란?

CSS 변수는 CSS의 값을 저장하고 재사용하는 기능입니다. 이 변수들은 대부분 `--` 접두사로 시작합니다.

예를 들어, 웹사이트에서 반복적으로 사용되는 특정 색상이 있다면, 이 색상 값을 변수에 저장하고 원할 때마다 그 변수를 사용하여 쉽게 접근할 수 있습니다.

<br />

## 사용 방법

1. **변수 선언**: 변수는 주로 `:root` 또는 특정 선택자 내부에서 선언됩니다.

```css title="CSS"
:root {
  --main-color: #ff4500;
}
```

위 코드에서 `--main-color`라는 변수에 `#ff4500` 색상을 저장했습니다.

2. **변수 사용**: 저장된 변수는 `var()` 함수를 통해 사용됩니다.

```css title="CSS"
h1 {
  color: var(--main-color);
}
```

위 코드는 모든 `h1` 태그의 색상을 `--main-color` 변수에 저장된 값, 즉 `#ff4500`로 설정합니다.

<br />

## 장점

1. **재사용성**: 한 번 변수에 값을 지정하면, 웹사이트의 여러 위치에서 동일한 값을 쉽게 사용할 수 있습니다.

2. **유지 보수**: 만약 디자인이 변경되어 특정 색상을 다른 색상으로 변경해야 한다면, 변수 값을 한 번만 바꾸면 됩니다. 이렇게 하면 해당 변수를 사용하는 모든 위치에서 값이 자동으로 업데이트됩니다.

3. **적응성**: CSS 변수는 JavaScript와 연동이 가능하므로, 동적으로 스타일을 변경하는데 유용합니다.