메뉴란?

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

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

메뉴 예시 코드 - html

<!-- Navbar links -->
<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

.navbar .nav-menu {
  display: flex;
  align-items: center;
  background: white;
}

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

메뉴 리스트 구성

메뉴 리스트 구성

<ul class="nav-menu">
  ...
</ul>

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

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

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

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