lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

webIntroBioChapter2Title

webIntroBioChapter1Title

webIntroBioChapter3Title

# 햄버거 메뉴 스타일

이번 수업에서는 햄버거 메뉴에 스타일이 어떻게 적용되었는지 살펴볼게요.

## HTML:

### `<nav class="navbar">`
이 태그는 전체 내비게이션 바를 위한 컨테이너로 사용됩니다. 웹사이트의 메뉴 항목을 그룹화하는 주된 태그입니다.

```html
<nav class="navbar"></nav>
```

<br />

### `<span id="logo">`

이 영역은 웹사이트의 로고나 타이틀을 표시합니다. 클릭 가능한 링크로 설정되어 있습니다.

```html
<span id="logo">
  <a href="https://example.com">Website Title</a>
</span>
```

<br />

### `<ul class="nav-menu">`

주 메뉴 항목들을 포함하는 목록입니다. 각 항목은 `<li>` 태그로 표현됩니다.

```html
<ul class="nav-menu">
  <li><a class="nav-link" href="#about">소개</a></li>
  
</ul>
```

<br />

### `<div class="hamburger">`

모바일 화면에서 사용자가 메뉴를 토글(Toggle, On/Off)하는데 사용되는 햄버거 메뉴 아이콘입니다.

```html
<div class="hamburger">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</div>
```

<br />

## CSS:

`@media (max-width: 670px)`는 화면의 너비가 670px 이하일 때 아래의 스타일을 적용한다는 의미입니다.

### .navbar .nav-menu

모바일 화면에서 메뉴 항목들의 스타일입니다.

```css title="CSS"
.navbar .nav-menu {
  position: fixed;
  right: -100vw;
  /* ... 다른 스타일 속성들 ... */
}
```

<br />

### .nav-menu.active

메뉴가 활성화되었을 때(즉, 햄버거 아이콘을 클릭했을 때) 적용되는 스타일입니다.

```css title="CSS"
.nav-menu.active {
  right: 20px;
}
```

<br />

**.hamburger**
햄버거 메뉴 아이콘의 기본 스타일입니다.

```css title="CSS"
.hamburger {
  display: block;
  cursor: pointer;
  /* ... */
}
```

<br />

### .hamburger.active .bar

햄버거 아이콘이 활성화되었을 때(메뉴가 열렸을 때) 각 선의 스타일을 변화시킵니다.

```css title="CSS"
.hamburger.active .bar:nth-child(2) {
  opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
```

<br />

이렇게 설정하면 사용자가 햄버거 아이콘을 클릭하면 메뉴가 슬라이드 아웃으로 나타나고, 아이콘은 'X' 모양으로 변합니다. 다시 클릭하면 메뉴는 사라지고 아이콘은 원래 상태로 돌아갑니다.

이 동작을 실행하기 위해서는 추가적인 JavaScript 코드가 필요합니다. 다음 수업에서 JavaScript가 어떻게 적용되었는지 살펴보겠습니다.