햄버거 버튼

CSS 응용(1) - 햄버거 버튼(메뉴바) 만들기

이번 포스팅에서는 css를 활용해 메뉴바를 만들어 보고자 한다. 웹페이지 상에서 마우스 커서에 반응하여 움직이는 메뉴바를 많이 본 적이 있을 것이다. 아래와 같이 생긴 메뉴바 혹은 버튼을 일명 "햄버거 버튼" 이라고 하는데 이 버튼을 클릭했을 때 세부 메뉴 항목들이 나올 수 있게끔 html과 css 코드를 작성해 보고자 한다. 위의 그림처럼 메뉴바를 클릭했을 때 세부 메뉴 영역이 표출되면서 메뉴바의 모양이 X 모양으로 변하는 효과를 넣어보고자 한다. 과정을 따라가면서 새롭게 등장하는 css 속성들은 그때 그때 언급하면서 알아가보도록 하자. 우선 첫째로 햄버거 버튼 모양을 만들어야 하는데, 필자는 다음과 같은 과정을 통해 만들었다. div영역을 만들고 을 이용해 높이 5px 짜리 선들을 만들어서 각각의 위..