lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

webLightPracticeChapter3Title

webLightPracticeChapter1Title

webLightPracticeChapter2Title

webLightPracticeChapter4Title

webLightPracticeChapter5Title

webLightPracticeChapter6Title

# 네비게이션이란?

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

일반적으로 **네비게이션**은 웹 사이트의 상단이나 사이드 바에 배치되며, 사용자가 원하는 페이지로 쉽게 이동할 수 있도록 돕습니다. 예를 들어, 메뉴 항목을 클릭하면 해당 페이지로 이동하거나, 로고를 클릭하면 메인 페이지로 돌아갈 수 있습니다.

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

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

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

<br />

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

```html title="네비게이션 바 예시 코드 - html"
<nav class="navbar">
  <div class="container"></div>
</nav>
```

```css title="네비게이션 바 예시 코드 - 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%;
}
```

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