[only CSS | 햄버거 버튼] 햄버거 버튼,닫기 버튼 만들기

햄버거 버튼은

이런 짝대기 3자 모양으로 이루어져 햄버거와 닮았다고 해서 만들어진 이름인데.

 

다들 이 부분은 어떻게 처리하시나요?

 

이미지 첨부하기

첫 번째 방법으로는 이미지 첨부 방법이 있는데 저는 별로 좋아하지 않는 방법입니다.

햄버거 버튼을 누르고 나면  X표시를 뜨게 하려고 이미지 두 개를 사용해야 하고

이미지를 두 개를 쓰면서 용량이 늘고 속도도 저하시키며 유지보수에 좋지 않습니다

 

CSS 가상요소 사용하여 만들기

 

HTML에 아주 간단하게 <a> 태그 안에 <span> 태그를 넣어줍니다.

 

 

(공통으로 묶어서 쓸 수 있는 건 묶어 작업해 주세요)

 

1. hambuger태그 안에 relative값을 줍니다.

relative는 자신을 기준으로 위치를 지정합니다.

2. span태그와 그 가상요소에는 absolute값을 넣어줍니다.

span태그는 이제 hamburger라는 부모의 값을 따라가 hamburger안에서 위치가 정해지지만 

가상요소의 기준점은 다시 span으로 가기 때문에 span을 가운데에 두고

그 기준에서 위로 아래로 떨어뜨려줍니다.

 

 

 

그럼 이렇게 완성이 되겠죠

이렇게만 이면 심심해지기 때문에 여기서 컬러를 바꾸고 border-radius를 준다거나 각 길이를 조절해서 스타일을 바꿀 수도 있습니다. 조금 더 동적인 모습을 위해 hover시 모션을 좀 더 넣어줄 수 도 있겠고요.

 

See the Pen Untitled by y-jiseon (@y-jiseon) on CodePen.

마우스를 올려보세요