lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

webLightPracticeChapter3Title

webLightPracticeChapter1Title

webLightPracticeChapter2Title

webLightPracticeChapter4Title

webLightPracticeChapter5Title

webLightPracticeChapter6Title

# 메뉴 컨테이너 스타일

메뉴 리스트를 가로로 배치하기 위해 `display: flex;`를 설정합니다.

```css title="메뉴 컨테이너 스타일"
.navbar .nav-menu {
  display: flex;
  align-items: center;
  background: white;
}
```

`display: flex;`는 요소를 가로로 배치할 때 사용됩니다.

`align-items: center;`는 요소들을 수직으로 가운데 정렬할 때 사용됩니다.

이렇게 설정하면 메뉴 리스트가 가로로 배치되며 수직으로 가운데 정렬됩니다.

<br />

## 메뉴 항목 스타일

```css title="메뉴 항목 스타일"
.navbar .nav-link {
  margin: 0 16px;
  font-size: 14px;
  font-weight: var(--weight-semibold);
}
```

메뉴 항목 사이의 간격을 위해 `margin: 0 16px;`를 설정합니다.

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

`margin` 속성은 위쪽, 오른쪽, 아래쪽, 왼쪽 순서로 값을 설정할 수 있습니다.

예를 들어, `margin: 2px 4px 6px 8px;`는 위쪽, 오른쪽, 아래쪽, 왼쪽 순서로 설정됩니다.

만약 헷갈린다면, `margin-top`, `margin-bottom`, `margin-left`, `margin-right` 속성을 따로 사용하는 것도 가능합니다.

메뉴 항목의 글자 크기를 설정하기 위해 `font-size: 14px;`를 설정합니다.

`font-weight: var(--weight-semibold);`는 글자의 굵기를 설정합니다.

`var(--weight-semibold);`는 `--weight-semibold`라는 이름의 변수를 사용하는 것으로, 사전에 정의된 `font-weight` 값을 참조합니다.