HTML 네비게이션 링크: 웹사이트 네비게이션 마스터하기

소개

HTML <nav> 태그는 웹사이트에서 탐색 링크를 생성하는 데 중요한 요소입니다. 이 랩에서는 <nav> 태그를 사용하여 웹사이트에 탐색 메뉴를 만드는 방법을 배우게 됩니다.

참고: index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스는 오른쪽 하단의 'Go Live'를 클릭하여 포트 8080 에서 실행합니다. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

기본 HTML 페이지 생성

먼저, index.html이라는 새 HTML 페이지를 생성하고 기본 HTML 구조를 추가해 보겠습니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Website</title>
  </head>
  <body></body>
</html>

태그를 사용하여 네비게이션 링크 추가

이제 HTML <nav> 태그를 사용하여 탐색 메뉴를 만들어 보겠습니다. <body> 태그 안에 <nav> 요소를 생성합니다.

<body>
  <nav></nav>
</body>

태그를 사용하여 네비게이션 링크 추가

다음으로, HTML <a> 태그를 사용하여 <nav> 태그 안에 몇 개의 탐색 링크를 추가합니다.

<body>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact Us</a>
  </nav>
</body>

네비게이션 메뉴 스타일링

탐색 메뉴를 시각적으로 더 매력적으로 만들기 위해 CSS 를 추가해 보겠습니다. 다음 스타일을 HTML 에 추가합니다.

<head>
  <meta charset="UTF-8" />
  <title>My Website</title>

  <style>
    nav {
      background-color: #333;
      overflow: hidden;
    }

    a {
      float: left;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    a:hover {
      background-color: #ddd;
      color: black;
    }
  </style>
</head>

최종 페이지

최종 index.html 페이지는 다음과 같이 보일 것입니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Website</title>

    <style>
      nav {
        background-color: #333;
        overflow: hidden;
      }

      a {
        float: left;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }

      a:hover {
        background-color: #ddd;
        color: black;
      }
    </style>
  </head>
  <body>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Contact Us</a>
    </nav>
  </body>
</html>

요약

이 랩에서는 HTML <nav> 태그를 사용하여 웹사이트에 탐색 메뉴를 만드는 방법을 배웠습니다. <nav> 태그를 사용하여 탐색 메뉴를 만들고 CSS 로 스타일을 지정하면 사용자가 웹사이트를 쉽게 탐색하고 시각적으로 더 매력적으로 만들 수 있습니다.