햄버거 메뉴 CSS로 만들어보기!

 

오늘 시간은 본격 반응형과 미디어쿼리에 관한 수업이였다.

미디어쿼리를 처음배울때가 9년전?이였던거 같다.

웹디 취준을 하기위해서 학원에서 수업을 듣고있었는데 내가 알고있던거라곤,,,HTML의 태그 몇개가 전부였다.

수많은 CSS 속성과 값에 머리가 핑핑돌아가고 있을때 미디어쿼리까지 머리속에 집어넣으려니 멘붕이 왔었던 😵‍💫

그 이후 9년동안 이 고생 저 고생하면서 많이 만들어보니까 이제 미디어쿼리쯤이야

 

 

.....라고 생각했는데 아직도 모르는게 있었다 😇

수업을 듣다가 @media screen and (orientation: landscape) 같은 건 처음 안 사실이였다,,

orientation은 사용자의 디바이스 방향을 의미하고 값은 아래와 같다.

• portrait: 세로 방향
• landscape: 가로 방향

반응형을 많이 만들어보았지만 사실 가로모드는 고려안하고 만들때가 많았는데

어떤 프로덕트에 따라 또 고려해야할 상황들이 생길수있으니 기억해두면 좋을거같다!

 

정말 공부는 끝이 없다! 꺌꺌

 

 

참고자료

https://sunshineyellow.tistory.com/160

뒤늦게 알아서 뼈아픈 유용한 CSS : @media (orientation: landscape)

 

 

 

오늘의 미션!

 

요즘 밈들은 진짜 따라가기 힘들다

햄부기햄북 햄북어 햄북스딱스 함부르크햄부가우가 햄비기햄부거 햄부가티햄부기온앤 온 같은

🍔햄버거 메뉴🍔를 구현하는 문제이다. 일단 내가 만든 화면 아래와 같다

(메뉴 구현에 집중하기 위해서 콘텐츠 영역들은 전부 지워서 올렸습니다)

 

See the Pen Untitled by 배근영 (@lyla-bae) on CodePen.

 

 

일단 문제조건이 뷰포트가 480px일때 햄버거메뉴를 나오게 만드는게 조건이라

햄버거메뉴 관련코드들은 평소에는 display:none 해놨다가 480px 이하로 떨어졌을때 다시 보이게 만들어주었다.

block이든 inline-block이든, flex든 원하는 레이아웃에 맞게 적용시켜주면 된다!

 

본격 코드를 설명해보면 .navicon안에 span을 만들어서 하나의 bar를 만들어 준 뒤
앞뒤로 가상선택자(::before,::after)를 사용해 똑같은 bar모양을 만들어주고
absolute를 주어 각각의 position값으로 햄버거 모양을 만들었다.

다음은 클릭했을때 input + label 구조이기 때문에
input:checked 되었을 때를 활용해 햄버거가 X모양으로 바뀌는 애니메이션을 만들어주었다.

일단 X로 만드려면 중간bar는 필요없기 때문에 opacity:0 으로 숨겨주었다.

여기서 display:none을 써버리면 앞뒤 만들어주었던 가상선택자도 모두 none이 되어버리기 때문에 잔머리를 굴려 만들었다;;

그리고 앞뒤에 만들어주었던 가상선택자들은 사선으로 만들기위해 rotate값을 45deg or -45deg 주었는데

이렇게만 만들면 뒤틀린 X가 되어버리기때문에 position값을 2px씩 수정하여서

(왜 2px이냐면 bar의 굵기가 2px이거덩요) 완벽한 X 버튼을 만들어주었다.
그런다음 부드러운 애니메이션 효과를 위해 transition까지 걸어주면 좋다!

 

그리고 nav의 메뉴들도 햄버거메뉴를 클릭하면 아래로 떨어지는 레이아웃이 필요하기 때문에

일단 display:none을 시켜주되, 햄버거메뉴가 checked가 되면 그때 flex을 주어서 보이게 만들었고

아래로 떨어지는 레이아웃이 필요했기때문에 flex-direction:colurm으로 만들어주면

완벽하게 모바일 반응형 메뉴를 구현할수있다 🔥

 

 

생각보다 bar들의 origin이나 position값 때문에 X로 만드는게 좀 헷갈리긴 했는데

각 속성들의 원리를 알고 풀어나가다보면 짜릿하고 재밌었다!