햄버거 버튼 만들기 - 2. 클릭된 버튼의 모양

• 햄버거 버튼을 클릭하면 X자로 바뀌는 기능을 구현하기 위해 button의 class에 "clicked"를 추가한다.

• X자 버튼은 선이 두 개로 구성되어 있으므로, 기존의 3개의 선 중 가운데 선(span)을 지우는 CSS 코드를 작성한다.

• before와 after를 rotateZ를 이용하여 각각 45도, -45도로 기울여 X자를 만든다. 이때, CSS의 Cascading 특징으로 인해 위치가 이상하게 변하므로, rotateZ와 translate를 같이 적용하여 위치를 조정한다.

• 마지막으로, margin-top을 0으로 설정하여 두 선을 가운데로 옮기면 X자 버튼이 완성된다.