본문으로 건너뛰기

네비게이션이란?

네비게이션이란?

자동차 네비게이션 이미지

네비게이션(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%;
}

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