메뉴 항목 구성

<li> 태그는 리스트의 각 항목을 구성할 때 사용됩니다.

메뉴 항목 구성

<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>

<ul>이나 <ol>과 같은 리스트 태그 안에 <li> 태그를 이용해 리스트 내용이 구성됩니다.

메뉴 리스트 안에는 메뉴 항목을 구성합니다.

메뉴 항목은 <li> 태그를 이용해 구성됩니다.

그리고 <li>로 만들어진 메뉴 항목 안에는 <a> 태그를 이용해 링크를 설정했습니다.

<a>는 링크를 설정하는데 사용되며, 외부 주소로 이동할 수도 있고 같은 페이지 내에서 다른 위치로 이동할 수도 있습니다.

여기서는 같은 페이지 내에서 다른 위치로 이동하는 것을 목표로 합니다.

앞으로 만들 내부 페이지 내에서 특정한 위치로 이동하려면, href 속성에 #을 입력하고, # 뒤에는 이동하고 싶은 위치에 있는 요소의 아이디를 입력하면 됩니다.

차후 코드에서 #about, #interests, #memory 등의 아이디를 가진 요소를 만들고, 이동할 것입니다.

#about은 소개 섹션으로 이동하고, #interests는 취미 섹션으로 이동하고, #memory는 추억 섹션으로 이동하는 것입니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!

강의 등록하기로그인하기