반응형 웹 제작은 생각보다 어렵다.
그래서 그냥 생각하는데로 코딩 하려고한다.
test2에서는 사이즈가 줄어들면 메뉴가 사라지고 햄버그메뉴를 눌렀을때 다시 나오게 끔 해볼라 했다.
구조는 대충 이렇게 생각해보았다.
처음 큰 사이즈에서는 container만 보이도록 해두고
설정해둔 사이즈로 줄어들면 container가 사라지고 container2가 보는 방식으로 생각해보았는데
지금 쓰는방식인지는 모르겠다.
기본사이즈에서는 CSS를 이렇게 넣어주었다.
container가 보이고 container2는 안보이도록 밖으로 보내두었다.
창크기가 512px 로 줄어들었을때 CSS 바꿔준다.
container를 안보이도록 top 값을 바꿔주고
container2를 보이도록 top 값을 바꿔준다.
btn 도 CSS를 넣어준다.
btn을 클릭했을때 container가 나오도록 자바스크립트를 넣어준다.
좀더 완성도를 위해 여러가지를 넣어야된다.
결과물을 확인해 보자
