햄버거 버튼 만들기 - 3. 클릭 시 모양 바꾸기

• 웹페이지에서 햄버거 버튼을 클릭하면 X 모양으로, X 버튼을 클릭하면 다시 햄버거 모양으로 바뀌는 기능을 구현하기 위해 자바스크립트를 사용한다. 버튼 요소를 선택하고, 클릭 이벤트를 감지하여 클릭 시 'clicked' 클래스를 추가/제거하는 방식으로 구현한다.

• 버튼의 현재 상태를 확인하기 위해 'classList'를 사용하며, 이를 통해 버튼의 클래스에 'clicked'가 존재하는지 확인한다. 이를 통해 버튼이 클릭된 상태인지 아닌지를 판단하고, 상황에 따라 'clicked' 클래스를 추가하거나 제거한다.

• 자바스크립트에서 classList를 이용해 HTML 요소의 클래스를 확인하고, 특정 클래스가 포함되어 있는지 확인할 수 있다. classList.contains 메서드를 이용하면 특정 클래스의 유무를 확인할 수 있다.

• classList에 특정 클래스를 추가하거나 제거하려면 add, remove 메서드를 사용한다. 이때, 클래스가 이미 존재하는지 여부를 확인하기 위해 if문을 사용할 수 있다.