햄버거 메뉴 스타일

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

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

Copy
<nav class="navbar"></nav>

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

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

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

Copy
<ul class="nav-menu">
  <li><a class="nav-link" href="#about">소개</a></li>
  <!-- 다른 메뉴 항목들 -->
</ul>

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

Copy
<div class="hamburger">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</div>

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

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

Copy
.navbar .nav-menu {
  position: fixed;
  right: -100vw;
  /* ... 다른 스타일 속성들 ... */
}

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

Copy
.nav-menu.active {
  right: 20px;
}

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

Copy
.hamburger {
  display: block;
  cursor: pointer;
  /* ... */
}

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

Copy
.hamburger.active .bar:nth-child(2) {
  opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

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

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