반응형 네비게이션 메뉴바 구현
📢 요구사항
- Home, About, Contact, FAQ 메뉴 존재
- 화면 크기가 일정 비율 이상 줄어들면 각 메뉴는 햄버거 메뉴로 통합
- 통합된 햄버거 메뉴 안에 사이드 바로 Home, About, Contact, FAQ 메뉴가 존재
레이아웃 설정(html 구조 만들기)
헤더 영역에 네비게이션 바가 있고 크게 3가지 요소가 존재
01. logo 02. 메뉴 03. 링크/아이콘
nav 태그 생성 - > 3가지 영역 생성
logo / 메뉴 / 링크아이콘 작성
아이콘 - > 폰트어썸 활용
https://fontawesome.com/start
 |  |
|---|
css 설정
.navbar 영역 스타일 지정 - > display : flex
justify-content: space-between
align-items: center
영역 확인을 위해 임시 배경색 지정 - > body태그에 기본 margin 0 설정
padding 추가 / a태그 색상 변경 / 로고 텍스트 크기 설정
menu 영역 display:flex -> 왼쪽 패딩 존재 - > padding-left: 0 으로 패딩값 제거
menu 영역 안 li 태그에 padding 값 설정해서 간격 넓혀주기
++ 구글 폰트 Roboto 적용 / 로고 텍스트에 letter-spacing 적용
https://fonts.google.com/specimen/Roboto?noto.script=Kore
hover 추가
반응형 설정
제일 상위 컨테이너인 .navbar에 flex-direction(방향)을 row - > column(세로) 으로 변경
 |  |
|---|
.navbar-menu도 방향을 컬럼으로 변경
 |  |
|---|
로고를 왼쪽에 배치
 |  |
|---|
menu는 가운데 배치
 |  |
|---|
작은 화면일 때 menu 호버시 백그라운드컬러 가득차게 설정
 |  |
|---|
padding 추가하여 여백 살짝 주기
 |  |
|---|
아이콘 영역 중앙 배치 ++ 아이콘 영역이 가운데로 오지 않는다면 li에 걸려 있는 기본 패딩값 때문 !! - > padding-left : 0 추가
 |  |  |
|---|
토글 버튼 생성
햄버거 아이콘 추가
 |  |
|---|
토글 버튼 오른쪽 상단 배치
 |  |
|---|
보통 화면일 땐 토글 버튼 숨겼다가 작은 화면일 때 나타나게 하기
 |  |
|---|
버튼을 눌렀을 때 메뉴가 보이게 하기 위해 작은 화면일 때 menu,icon 영역 감추기
토글버튼 이벤트 처리
토글버튼을 클릭했을 때 메뉴바, 아이콘 보이게 설정
 |  |
|---|
css 변수 설정
변수로 설정해서 사용하면 색상 변경할 때 편리함 !!
 |  |
|---|
결과물
얏호
다음에도 참고할 수 있게
각각의 코드들을 했을 때 어떻게 배치되는지 직관적으로 보려고
코드할 때마다의 결과를 글에 첨부했다.
빳팅 !!! 🛩️
🗯️ 참고
