[토이 프로젝트] Responsive Navigation Bar

Responsive Navigation Bar 만들기

구현 방법	구현 여부
document.querySelector	O
addEventListener	O
classList.toggle	O

 

 

 

 

고민 끝에 이렇게 html 구조를 짜주었다. 버튼은 타이틀 옆에 위치하고, 너비가 넓을 때에는 보이지 않도록 설정하였다.

css 부분에서 고민과 시행착오가 많았다.

• 미디어 쿼리를 이용하여 800px 기준으로 보여야 되는 요소와 보이지 말아야 되는 요소를 나누어서 css를 설정해주었다.
• 거의 전체 구조는 flex를 이용하였으나, 미디어 쿼리 적용 시에 변경되는 부분이 생기면 처음에는 flex로 고쳐보다가 안 되는 경우에 fixed를 이용하여 자체적으로 위치를 조정하였다.
• 미디어 쿼리에 따라서 너비를 조정하였다. 노란색 박스 부분은 처음에는 30%로 지정하였는데, 너비가 좁아지는 시점부터 100%로 변경하였다.
• 미디어 쿼리가 작아지는 부분에서 클래스 active를 추가하였을 때 발생하는 이벤트를 넣어줬다. 따로 빼서 적었더니, 클래스 active가 추가되었을 때, 800px가 넘어가는 시점에 레이아웃이 이상해졌다. (너비가 800px보다 작은 경우에만 클래스 active가 있는 이벤트를 실행한다.)
• toggle은 클래스를 추가하고 빼는 경우 이용한다. 즉 버튼 같은 존재이다.  그래서 active 클래스가 생기는 경우,  발생하는 부분에 모두 toggle("active")를 넣어주었다.