Guidelines
Practice
햄버거 메뉴 스타일
이번 수업에서는 햄버거 메뉴에 스타일이 어떻게 적용되었는지 살펴볼게요.
HTML:
<nav class="navbar">
이 태그는 전체 내비게이션 바를 위한 컨테이너로 사용됩니다. 웹사이트의 메뉴 항목을 그룹화하는 주된 태그입니다.
<nav class="navbar"></nav>
<span id="logo">
이 영역은 웹사이트의 로고나 타이틀을 표시합니다. 클릭 가능한 링크로 설정되어 있습니다.
<span id="logo"> <a href="https://example.com">Website Title</a> </span>
<ul class="nav-menu">
주 메뉴 항목들을 포함하는 목록입니다. 각 항목은 <li>
태그로 표현됩니다.
<ul class="nav-menu"> <li><a class="nav-link" href="#about">소개</a></li> <!-- 다른 메뉴 항목들 --> </ul>
<div class="hamburger">
모바일 화면에서 사용자가 메뉴를 토글(Toggle, On/Off)하는데 사용되는 햄버거 메뉴 아이콘입니다.
<div class="hamburger"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </div>
CSS:
@media (max-width: 670px)
는 화면의 너비가 670px 이하일 때 아래의 스타일을 적용한다는 의미입니다.
.navbar .nav-menu
모바일 화면에서 메뉴 항목들의 스타일입니다.
CSS
.navbar .nav-menu { position: fixed; right: -100vw; /* ... 다른 스타일 속성들 ... */ }
.nav-menu.active
메뉴가 활성화되었을 때(즉, 햄버거 아이콘을 클릭했을 때) 적용되는 스타일입니다.
CSS
.nav-menu.active { right: 20px; }
.hamburger 햄버거 메뉴 아이콘의 기본 스타일입니다.
CSS
.hamburger { display: block; cursor: pointer; /* ... */ }
.hamburger.active .bar
햄버거 아이콘이 활성화되었을 때(메뉴가 열렸을 때) 각 선의 스타일을 변화시킵니다.
CSS
.hamburger.active .bar:nth-child(2) { opacity: 0; } .hamburger.active .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
이렇게 설정하면 사용자가 햄버거 아이콘을 클릭하면 메뉴가 슬라이드 아웃으로 나타나고, 아이콘은 'X' 모양으로 변합니다. 다시 클릭하면 메뉴는 사라지고 아이콘은 원래 상태로 돌아갑니다.
이 동작을 실행하기 위해서는 추가적인 JavaScript 코드가 필요합니다. 다음 수업에서 JavaScript가 어떻게 적용되었는지 살펴보겠습니다.
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help