[CSS] 햄버거 메뉴 버튼 만들기

웹페이지나 모바일 메뉴에서 흔히 볼 수 있는 3줄로 구성된 모양의 햄버거 버튼입니다.

 

클릭 시 두 번째 줄은 투명해지고 첫 번째와 세 번째 줄이 이동하면서 각도를 바꿔 X자 형태를 만드는 원리입니다.

 

HTML, CSS, JavaScript 를 구분해 놓고 간략한 설명을 위해 주석을 달았습니다.

---

HTML

---

CSS

---

JavaScript