lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

webLightPracticeChapter3Title

webLightPracticeChapter1Title

webLightPracticeChapter2Title

webLightPracticeChapter4Title

webLightPracticeChapter5Title

webLightPracticeChapter6Title

# primary, secondary 버튼 스타일

이번에는 버튼에 공통적으로 적용할 스타일을 정의해보겠습니다.

<br />

## primary 버튼 스타일

```css title="primary 버튼 스타일"
.btn-primary {
  background: var(--primary-color);
  color: #000000;
}
```

- `background: var(--primary-color);`: 요소의 배경색을 설정합니다. `--primary-color`라는 이름의 변수를 사용했습니다. `--primary-color` 변수는 이미 앞에서 `#ffcd42`라는 값을 설정해 두었습니다. 따라서 `background: var(--primary-color);`는 `background: #ffcd42;`과 같은 의미입니다. 변수를 사용함으로써, 나중에 보았을 때 왜 이 색을 선택했는지 의미를 더 쉽게 알 수 있습니다.

- `color: #000000;`: 글자 색상을 설정합니다. `#000000`은 검은색을 의미합니다. `#000000`은 `#RRGGBB` 형식으로 색상을 표현하는데, `RR`, `GG`, `BB`는 각각 빨강, 초록, 파랑을 의미합니다. 각 값들이 낮을수록 어두워지고, 높을수록 밝아집니다. 예를 들어 `#FF0000`은 빨강색을 의미하고, `#00FF00`은 초록색을 의미합니다. 그리고 `#000000`은 빨강, 초록, 파랑 모두 0이기 때문에 검은색을 의미합니다.

<br />

## secondary 버튼 스타일

```css title="secondary 버튼 스타일"
.btn-secondary {
  margin: 5px 0;
  background-color: var(--bg-secondary);
  color: var(--bg-primary);
}
```

- `margin: 5px 0;`: 위 아래 여백은 5px, 좌 우 여백은 0으로 설정합니다.

- `background-color: var(--bg-secondary);`: 요소의 배경색을 설정합니다. `--bg-secondary`는 `--bg-secondary`라는 변수의 값을 가져와서, 이미 해당 변수에 설정해 둔 `#ffd35c`라는 값을 사용합니다.

- `color: var(--bg-primary);`: 글자 색상을 설정합니다. `--bg-primary`는 `--bg-primary`라는 변수의 값을 가져와서, 이미 해당 변수에 설정해 둔 `#ffffff`라는 값을 사용합니다.