기록창고

이번에는 버튼을 클릭하면 버튼의 모양을 바꾸게 할 것이다. 기존의 햄버거 모양에서 X로, X에서 다시 햄버거 모양으로 바뀌게 할 것이다. 이를 위해 이번에는 자바스크립트 코드를 작성할 것이다. 시작 전, 기본 HTML 코드는 아래와 같다. 햄버거 버튼을 위한 선 버튼에 hamburger_button이라는 id를 추가하였다. 그리고 저번 글에는 button의 class에 clicked가 있었다. 하지만 clicked는 버튼이 클릭된 경우 추가될 클래스이며 버튼은 처음에는 클릭되지 않은 상태이기에 clicked를 제거하였다. 이제 본격적으로 코드를 작성하기 전, 대략적인 의사 코드를 구상해보자. 버튼 요소를 선택한다. 버튼 요소가 클릭되는 것을 감지한다. 버튼이 클릭되었을 경우, clicked 클래스를 추가..

햄버거 버튼을 위한 선 저번에 만들었던 햄버거 버튼을 이어서 진행할 것이다. 이번에는 버튼을 누를 경우 햄버거에서 X자로 바뀌게 할 것이다. 이를 위해 button의 class에 "clicked"를 추가한다. 그리고 X자는 2개의 선으로 구성되어 있으며 아래처럼 선을 구성할 것이다. before는 왼쪽 위에서 오른쪽 아래로 내려가는 선을, after는 오른쪽 위에서 왼쪽 아래로 내려가는 선이다. 1. 가운데 선 가리기 X자 버튼은 선이 두 개 뿐이다. 그렇기에 기존의 3개의 선 중 가운데 선(span)을 지워야 한다. .hamburger.clicked span { display: none; } 지금 만드는 버튼은 클릭된 상태의 버튼이기에 .clicked도 추가해야 한다. 2. before, after 기..

얼마 전에 배웠던 햄버거 버튼 만들기를 복습할 것이다. 햄버거 버튼이란 위의 이미지처럼 3개의 선이 가로로 놓여져 있는 버튼이다. 이 버튼을 처음부터 만들어보자. html 코드는 아래와 같다. 햄버거 버튼을 위한 선 1. 대략적인 버튼 크기 설정 우선 대략적인 버튼의 크기를 설정할 것이다. 가로, 세로 200px인 정사각형이 적당할 것 같다. 이를 위해 button을 아래처럼 적절히 설정한다. /* 버튼 초기 설정 */ button { appearance: none; border: 0; padding: 0; background-color: transparent; border-radius: 0; } main { width: 100vw; height: 100vh; display: flex; justify-c..