$$config title: [SpringBoot] Sbb프로젝트 - Navigation bar keywords: - SpringBoot - Navigation bar - ... $$ # 네비게이션바 : 모든 페이지에서 공통적으로 보여야 함. -> layout.html (모든 템플릿의 부모) body에 추가 --- > layout.html ```html ... ``` : 'SBB' 로고를 가장 왼쪽에 배치했고, 오른쪽에는 '로그인' 링크를 추가 # Bootstrap의 반응형 웹 기능 > 예시 이미지 (웹페이지의 크기가 일정크기 이하로 작아졌을 때) ![부트스트랩 반응형 웹 기능](https://to2.kr/dSZ) 해당 반응형 웹 기능의 메뉴 버튼을 클릭해서 제대로된 기능을 하기 수행하기 위해서 `bootstrap.min.js` 파일 필요 - 단계 1. main/resources/static 디텍토리에 복사하기!! - 단계 2. layout.html 하단 `` 태그 위에 script 태그 추가하기 ```html ``` # [추가] 네비게이션바 를 공통 템플릿으로 작성하고 분리하기 : navbar.html - 단계 1. navbar.html 파일로 분리하기 > navbar.html ```html ``` - 단계 2. layout.html에 navbar fragment 블록 넣기 : 기존에 nav 블록을 모두 제거하고 공통 템플릿의 navbar.html을 적용시키기 ```html ... ``` [참고?] navbar는 공통 템플릿으로 템플릿마다 반복되지는 않지만 독립된 하나의 템플릿으로 관리하는 것이 유지보수에 유리함.