(css, js) 햄버거 메뉴 애니메이션 만들기
1. 미리보기 메뉴에서 많이 쓰이는 햄버거 메뉴 애니메이션을 만들어보자! 이 애니메이션을 만들기 위해서는 transform을 사용해야한다. See the Pen by KumJungMin (@kumjungmin) on CodePen. 2. 코드 설명 (1) html label의 for="checkbox_id"를 이용하면, label 영역을 클릭시 checkbox가 checked가 된다. label 내부에 3개의 bar들을 배치한다. (2) css translate(x축, y축)을 이용해 요소의 위치를 변경할 수 있다. rotate(각도)를 사용해 요소를 회전시킬 수 있다. .center { position: absolute; top: 50%; left: 50%; transform: translate(-50..
2021. 9. 26.
