lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

webLightPracticeChapter3Title

webLightPracticeChapter1Title

webLightPracticeChapter2Title

webLightPracticeChapter4Title

webLightPracticeChapter5Title

webLightPracticeChapter6Title

# 메뉴란?

웹페이지의 **메뉴**는 웹 사이트의 다양한 위치로 이동할 수 있는 링크들을 모아놓은 것입니다.

일반적으로 웹페이지의 상단에 위치하며, 다른 주소로 이동할 수도 있고 같은 페이지 내에서 다른 위치로 이동할 수도 있습니다.

```html title="메뉴 예시 코드 - html"

<ul class="nav-menu">
  <li><a class="nav-link" href="#about">소개</a></li>
  <li><a class="nav-link" href="#interests">취미</a></li>
  <li><a class="nav-link" href="#memory">추억</a></li>
</ul>
```

```css title="메뉴 예시 코드 - css"
.navbar .nav-menu {
  display: flex;
  align-items: center;
  background: white;
}

.navbar .nav-link {
  margin: 0 16px;
  font-size: 14px;
  font-weight: var(--weight-semibold);
}
```

<br />

## 메뉴 리스트 구성

```html title="메뉴 리스트 구성"
<ul class="nav-menu">
  ...
</ul>
```

먼저, 메뉴 리스트를 구성합니다.

메뉴 리스트는 `<ul>` 태그를 이용해 구성됩니다. `<ul>` 태그는 리스트를 구성할 때 사용됩니다.

유사한 태그로 `<ol>` 태그가 있습니다.

`<ol>` 태그는 `<ul>` 태그와 비슷하지만, 순서가 있는 리스트를 구성할 때 사용됩니다.