햄버거 메뉴 모션
🍔 햄버거 메뉴 모션 (Burger to X)
모바일 웹에서 가장 흔히 볼 수 있는 ☰ 형태의 햄버거 메뉴 아이콘이 클릭 시 부드럽게 X 모양으로 변하는 애니메이션입니다.
위에서 배운 "체크박스 해킹 기법"을 응용하여 상태를 관리하고, 3개의 선(span) 중 위아래 선은 transform: translateY(이동)와 rotate(회전)로 X자를 만들며, 가운데 선은 opacity: 0으로 스윽 사라지게 만드는 것이 핵심 원리입니다.
<div class="burger-wrapper">
<!-- 체크박스 해킹 기법을 활용하여 클릭(열림/닫힘) 상태를 저장합니다 -->
<input type="checkbox" id="burgerToggle" class="burger-checkbox">
<!-- 실제 화면에 보이고 클릭되는 라벨 (햄버거 아이콘) -->
<label for="burgerToggle" class="burger-icon">
<span></span> <!-- 위쪽 선 -->
<span></span> <!-- 가운데 선 -->
<span></span> <!-- 아래쪽 선 -->
</label>
</div>🔒 localhost:8000/preview