모바일 메뉴 만들기
먼저 간단한 반응형 페이지를 만듭니다. CSS초기화를 시켜주는 normalize.css를 사용하여 편리하게 CSS를 사용합니다. 실전에서 쉽게 사용가능한 가장 기본적인 뼈대의 html과 css를 새로 만듭니다.
구글 아이콘을 이미지가 아니라 소스코드로 넣습니다. 그리고 간단한 자바스크립트를 사용하여 모바일 메뉴를 구현합니다.
CSS에 트랜지션(transition) 속성을 추가하여 옆에서 튀어나오는 메뉴 애니메이션을 완성해봅시다. 트랜지션은 UI에서 가장 빈번하게 사용되는 애니메이션 효과입니다. 큐빅-베지어(cubic-bezier)를 통해서 원하는 가속도의 움직임을 완성합니다.
메뉴에 주었던 간단한 자바스크립트를 제대로 익혀봅시다. 간단한 문법만으로도 html페이지 안에서 요소들의 인터랙션을 제어하고 CSS를 변경할 수 있습니다.