팀 프로젝트에서 반응형 헤더를 구현한 기록을 정리 📍max-width 를 사용하여 화면이 꽉차지 않게 하기 랜딩 페이지에서 헤더 아래의 캐러셀만 화면에 꽉차게 하고, 헤더(GNB), 메인 컨텐츠, 푸터는 max-width: 1200px 을 주어 화면에 꽉차지 않게 설정 width 1200px이 넘는 뷰포트에서도 최대 1200px 까지만 늘어남 추가로 padding: 0 1rem; 을 부여 📍모바일 드롭다운 메뉴 구현 width 768px 이하의 뷰포트에서는 display: none; 으로 navbar를 없어지게 하고, 모바일 메뉴 버튼 (햄버거 아이콘)을 생기게 한다 레이아웃 컴포넌트에서 모바일 메뉴 버튼을 클릭함에 따라 메뉴 오픈, 클로즈상태로 바뀌게 한다 왜 헤더가 아닌 레이아웃 컴포넌트에서 상태를 ..