[점프투스프링부트] 3-01.

by

스프링 부트 3-01로 이동


목표: 내비게이션 바 만들기

1. 내비게이션 바

내비게이션 바는 모든 페이지에 공통이어야 하므로 다음과 같이 layout.html 템플릿에 추가해야 합니다.

'추천 관련글,

(파일 이름: /sbb/src/main/resources/templates/layout.html)

<!doctype html>
<html lang="ko">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" th:href="http://2-juhyun-2.m/@{/bootstrap.min.css}">
    <!-- sbb CSS -->
    <link rel="stylesheet" type="text/css" th:href="@{/style.css}">
    <title>Hello, sbb!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
    <div class="container-fluid">
        <a class="navbar-brand" href="http://2-juhyun-2.">SBB</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>
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
<th:block layout:fragment="content"></th:block>
<!-- 기본 템플릿 안에 삽입될 내용 End -->
</body>
</html>

“SBB” 로고는 맨 왼쪽에 배치되어 항상 홈 페이지로 이동하며 오른쪽에는 “로그인” 링크가 추가됩니다.

이제 질문 목록을 요청하면 화면 상단에 다음 탐색 표시줄이 표시됩니다.


내비게이션 바에서 SBB 로고를 누르면 어디에서나 메인 페이지로 돌아갈 수 있습니다.

작동하는지 확인하려면 SBB 로고를 클릭하십시오.

부트스트랩 탐색 모음에는 흥미로운 기능이 숨겨져 있습니다.

아무 페이지나 접속하고 마우스를 이용하여 웹브라우저의 크기를 점차 줄여보자.

결국 햄버거 메뉴 버튼이 나타납니다.

그리고 “로그인” 링크가 사라집니다.


부트스트랩은 브라우저 크기가 줄어들면 탐색 모음의 링크를 작은 햄버거 메뉴 버튼으로 숨깁니다.

(부트스트랩의 반응형 웹 기능입니다.)

숨겨진 “로그인” 링크를 보려면 메뉴 버튼을 클릭해야 합니다.

하지만 여전히 메뉴 버튼을 클릭해도 아무 일도 일어나지 않습니다.

이는 layout.html 파일에 Bootstrap JavaScript 파일(bootstrap.min.js)이 포함되어 있지 않기 때문입니다.

Bootstrap JavaScript 파일은 다운로드한 bootstrap-5.2.3-dist.zip 압축 파일에 이미 있으므로 다음 위치에 복사합니다.

  • 압축 파일의 경로: bootstrap-5.2.3-dist.zip/bootstrap-5.2.3-dist/js/bootstrap.min.js
  • 삽입 위치: /sbb/src/main/resources/static/bootstrap.min.js

즉, 어떻게 /sbb/src/main/resources/static 디렉토리 아래 bootstrap.min.js 파일을 찾아야 합니다.


이제 추가된 JavaScript 파일을 사용할 수 있도록 layout.html의 맨 아래에 있습니다. 태그 바로 위에 다음을 추가합니다.

(파일 이름: /sbb/src/main/resources/templates/layout.html)

<!doctype html>
<html lang="ko">
(... 생략 ...)
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
<th:block layout:fragment="content"></th:block>
<!-- 기본 템플릿 안에 삽입될 내용 End -->
<!-- Bootstrap JS -->
<script th:src="http://2-juhyun-2.m/@{/bootstrap.min.js}"></script>
</body>
</html>

이 변경 후 메뉴 버튼을 클릭하면 다음과 같이 숨겨진 링크가 표시됩니다.


2. 내비게이션 바 분리

이전 장에서는 일반적인 오류 메시지 표시 템플릿이 생성되어 질문 등록 및 질문 세부 템플릿에 포함되었습니다.

다음과 같이 공통 템플릿으로 내비게이션 바를 분리해 보겠습니다.

먼저 layout.html에 포함될 navbar.html 템플릿을 다음과 같이 생성해 보겠습니다.

(파일 이름: /sbb/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="http://2-juhyun-2.">SBB</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>

navbar.html의 내용은 layout.html에 삽입된 내비게이션 바의 내용과 동일합니다.

그리고 layout.html을 다음과 같이 변경해 봅시다.

(파일 이름: /sbb/src/main/resources/templates/layout.html)

<!doctype html>
<html lang="ko">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" type="text/css" th:href="http://2-juhyun-2.m/@{/bootstrap.min.css}">
  <!-- sbb CSS -->
  <link rel="stylesheet" type="text/css" th:href="@{/style.css}">
  <title>Hello, sbb!</title>
</head>
<body>
<!--<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">-->
<!--  <div class="container-fluid">-->
<!--    <a class="navbar-brand" href="http://2-juhyun-2.">SBB</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>-->
<!-- 네비게이션바 -->
<nav th:replace="~{navbar :: navbarFragment}"></nav>
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
<th:block layout:fragment="content"></th:block>
<!-- 기본 템플릿 안에 삽입될 내용 End -->
<!-- Bootstrap JS -->
<script th:src="http://2-juhyun-2.m/@{/bootstrap.min.js}"></script>
</body>
</html>

navbar HTML을 삭제하고 navbar.html 템플릿을 Time Leap의 일 : 교체 재산으로 포함됩니다.

navbar.html 파일은 다른 템플릿에 중복되지 않고 독립적인 템플릿으로 관리하는 것이 유지보수에 유리하기 때문에 분리되어 있습니다.