[HTML / CSS / Javascript] 햄버거 메뉴 버튼 만들기

특대형 햄버거 메뉴

✍🏻 만들어 볼 것

웹사이트를 만들면 필연적으로 메뉴가 있어야 한다.

이 때 사용자가 메뉴에 접근할 수 있는 버튼을 만들어야 하는데

일명 '햄버거 메뉴'라는 이름으로 불리는 메뉴 버튼을 만들려고 한다.

 

👐🏻 결과물

See the Pen Untitled by lKori (@lkori) on CodePen.

 

🙇🏻‍♂️ 궁금한 점

버튼을 클릭했을 때 span을 'display:none' 설정을 해서 투명하게 만드려고 했는데

 span이 본체여서 그런지 ::before과 ::after로 복사한 선까지 전부 투명해지는 것이었다.

 

'opacity:0'으로 투명하게 만들어 보았는데 이것 역시 전체가 전부 투명해지는 결과가 나왔다.

 

마지막으로는 rgba 속성을 통해 alpha  값을 0으로 주었더니 가운데 본체 span만 투명해졌다!

 

display와 opacity는 왜 전체가 투명해지고 rgba는 본체인 span만 투명하게 만드는지 아직은 잘 모르겠다.

dispaly와 opacity는 해당 요소 전체에 적용이 되어서 그런게 아닐까 생각한다.