[HTML 하이퍼링크 & 네비게이션] #02 내비게이션 메뉴 만들기 (<nav> 태그 활용법)

 

 

안녕하세요 토스트데브입니다.
이번 글에서는 웹사이트의 핵심 구조 중 하나인 내비게이션(Navigation) 메뉴를 HTML의 <nav> 태그와 <a> 태그를 활용하여 만드는 방법을 정리해드리겠습니다.

 

 

🧭 내비게이션이란?

웹사이트에서 사용자가 다른 페이지나 섹션으로 이동할 수 있도록 도와주는 메뉴 또는 링크 모음을 의미합니다.
예: 홈, 회사소개, 서비스, 블로그, 로그인

 

 

🧱 <nav> 태그란?

<nav>는 HTML5에서 도입된 시맨틱 태그 중 하나로, 내비게이션 영역을 명확하게 구분하기 위해 사용됩니다.

<nav>
  <a href="/home">홈</a>
  <a href="/about">회사소개</a>
  <a href="/service">서비스</a>
  <a href="/contact">문의하기</a>
</nav>

 

• 내부에 <a> 태그를 사용하여 각 페이지로 이동하는 링크를 구성합니다.
• 보통 <header> 안에 포함되며, 여러 메뉴가 한 번에 제공됩니다.

 

 

💡 왜 <nav>를 사용해야 할까?

이유	설명
✅ 의미 있는 구조 제공	단순한 <div>보다 문서의 구조가 명확해짐
✅ 웹 접근성 향상	스크린 리더가 내비게이션 영역으로 인식 가능
✅ SEO(검색엔진 최적화)	검색엔진이 메뉴 영역을 빠르게 인식

 

 

 

🎨 예제: 기본적인 내비게이션 바

<header>
  <nav>
    <ul>
      <li><a href="/">홈</a></li>
      <li><a href="/products">제품</a></li>
      <li><a href="/about">회사소개</a></li>
      <li><a href="/contact">문의</a></li>
    </ul>
  </nav>
</header>

 

• <ul>과 <li>를 함께 사용하여 구조화된 메뉴 리스트를 만듭니다.
• CSS를 이용하면 수평 메뉴, 드롭다운 메뉴 등 다양한 형태로 꾸밀 수 있습니다.

 

 

✨ CSS 예시 (기본 수평 메뉴)

nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  padding: 0;
}

nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

 

✅ 이렇게 꾸미면 기본적인 가로형 내비게이션 메뉴가 만들어집니다.

 

 

🧩 <nav>는 어디에 사용해야 할까?

위치	설명
<header> 내부	가장 일반적, 상단 메뉴
<footer> 내부	푸터 내 서브 메뉴용
<aside> 내부	사이드바 메뉴용

✔️ 단, 사이트 내에 주요 내비게이션을 담당하는 경우에만 <nav> 태그를 사용하는 것이 좋습니다.

 

 

📌 마무리

<nav> 태그는 웹사이트 구조를 의미 있게 구분하고, 사용자의 탐색을 돕는 시맨틱 구조의 핵심 요소입니다.
여기에 <a> 태그와 <ul>, <li>를 조합하면 깔끔하고 접근성 높은 내비게이션 메뉴를 손쉽게 만들 수 있습니다.

HTML을 잘 다루고 싶다면, <nav>부터 꼭 익혀보세요!

 

 

#HTML #a태그 #nav태그 #내비게이션 #웹메뉴 #시맨틱태그 #웹접근성 #프론트엔드기초 #웹퍼블리싱 #웹개발입문 #HTML강의 #HTML기초 #toastdev #하이퍼링크 #HTML구조 #코딩입문