네비게이션이란?

네비게이션(Navigation)은 웹페이지에서 사용자가 다른 페이지로 이동하거나 웹 사이트의 주요 섹션으로 이동할 수 있는 링크를 제공하는 부분을 말합니다.

일반적으로 네비게이션은 웹 사이트의 상단이나 사이드 바에 배치되며, 사용자가 원하는 페이지로 쉽게 이동할 수 있도록 돕습니다.

예를 들어 메뉴 항목을 클릭하면 해당 페이지로 이동하거나, 로고를 클릭하면 메인 페이지로 돌아갈 수 있습니다.

또한 웹 사이트의 구조와 내비게이션 흐름을 결정하는 중요한 역할을 하며, 사용자가 웹 사이트를 쉽게 탐색하고 필요한 정보를 찾을 수 있도록 돕는 역할을 합니다.

네비게이션 바 만들기

HTML과 CSS를 사용하여 구현되며, HTML에서는 주로 <nav> 태그를 사용해 네비게이션 영역을 정의하고, 링크를 포함하는 <ul>과 <li> 태그를 사용하여 메뉴를 작성합니다.

이후 CSS를 사용하여 디자인과 스타일을 지정합니다.

네비게이션을 잘 구성하면 사용자가 웹 사이트를 보다 쉽게 탐색할 수 있고, 사용성을 향상시킬 수 있습니다.

이제 배울 코드를 살펴보겠습니다.

네비게이션 바 예시 코드 - html

<nav class="navbar">
  <div class="container"></div>
</nav>

네비게이션 바 예시 코드 - css

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: white;
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  height: 80px;
  width: 100%;
}

다음 가이드라인에서 이 코드를 하나씩 자세히 살펴보겠습니다.