15. 네비게이션 바 - 점프 투 스프링부트(게시판 만들기)Spring2023. 1. 1. 10:16
Table of Contents
728x90
728x90
해당 게시글은 점프 투 스프링부트 교재를 통한 개인 학습 용도이며 기초 세팅은 생략하였습니다.
자바 8, 스프링부트 2.7.7버전 입니다.
내비게이션 바
메인페이지로 돌아갈 수 있는 기능을 구현한 내비게이션 바를 만들어보자.
내비게이션바는 모든 페이지에서 공통적으로 보여야 하므로 layout.html 템플릿에 추가해야 한다.
파일경로 : /practice/src/main/resources/templates/navbar.html
<nav th:fragment="navbarFragment" class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<div class="container-fluid">
<a class="navbar-brand" href="/">게시판 연습</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">로그인</a>
</li>
</ul>
</div>
</div>
</nav>항상 홈 페이지로 이동해 주는 로고를 가장 왼쪽에 배치했고, 오른쪽에는 '로그인' 링크를 추가했다 (추후 구현)
layout.html을 수정하자.
<!doctype html>
<html lang="ko">
(... 생략 ...)
<body>
<!-- 네비게이션바 -->
<nav th:replace="~{navbar :: navbarFragment}"></nav>
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
<th:block layout:fragment="content"></th:block>
<!-- 기본 템플릿 안에 삽입될 내용 End -->
</body>
</html>navbar.html을 통해 내비게이션 바를 분리 한 뒤 th:replace를 사용하여 포함시켰다.
정상 적용된 모습이지만 부트스트랩의 반응형 기능에 의해 로그인 버튼이 햄버거 메뉴 버튼에 숨겨져있는 상황이다.
해당 기능을 사용하기 위해 부트스트랩 자바스크립트 파일(bootstrap.min.js)을 layout.html 파일에 포함시켜야한다.
압축파일내 경로: bootstrap-5.2.3-dist.zip/bootstrap-5.2.3-dist/js/bootstrap.min.js
붙여 넣을 위치: /practice/src/main/resources/static/bootstrap.min.js
추가한 자바스크립트 파일을 사용할 수 있도록 layout.html의 하단에 코드를 추가하였다.
<!doctype html>
<html lang="ko">
(... 생략 ...)
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
<th:block layout:fragment="content"></th:block>
<!-- 기본 템플릿 안에 삽입될 내용 End -->
<!-- Bootstrap JS -->
<script th:src="@{/bootstrap.min.js}"></script>
</body>
</html>
이제 정상 작동이 될 것이다.
728x90
300x250
@mag1c :: 꾸준히 재밌게
2023.04 ~ 백엔드 개발자의 기록
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!
