프로젝트 설정을 했으면 한번 간단하게 잘 작동하는지 확인해보자. index.html을 간단하게 만들고 시작하면 된다. 위치는 resources/static/index.html이다.
resources/static/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
이제 실행하고 localhost의 8080 포트로 가보면 html이 뜨는 것을 확인할 수 있다. 기본적인 설정 없이 이게 가능 한 이유는 Spring의 별도 설정이 없이는 해당 경로의 index를 가져오게 되기 때문이다. 하지만 컨트롤러 사용을 위해 직접 해당 index로 연결을 해보자.
java/com/example/Project/Controller/HomeController.java
package com.example.Project;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@RequiredArgsConstructor
@Controller
public class HomeController {
@GetMapping("/")
public String index(Model model) {
return "index";
}
}해당 경로에 HomeController를 만들고 경로를 지정해야 한다.
@Controller 어노테이션은 해당 클래스가 컨트롤러임을 지정하게 된다.
@GetMapping("/")은 URL에 해당 메서드를 연결하는 것을 의미한다.
return에서 반환하는 값은 templates로 연결된다.
따라서 만든 index.html을 templates로 옮긴 다음 다시 실행하면 아까와 동일하게 실행되는 것을 확인할 수 있다.
html은 계속 늘어나면 중복된 내용도 계속 늘어난다. 따라서 이를 방지하기 위해 Layout을 설정하게 된다. Layout은 페이지가 공통으로 가지는 요소를 쉽게 관리할 수 있게 해준다.
먼저 layout.html을 만들어주자.
resources/templates/layout.html
<!DOCTYPE html>
<!-- 페이지 디자인을 위한 레이아웃 기능 -->
<html xmlns:th="http://www.thymeleaf.org">
<!--헤드 -->
<head th:fragment="head">
<title>Project</title>
<meta charset="UTF-8">
<!-- 부트스트랩 Icon -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- 부트스트랩 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!-- 공통 CSS -->
<link rel="stylesheet" href="/css/common.css" />
</head>
<body>
<!--상단바 -->
<header class="p-3 text-bg-dark" th:fragment="nav">
<!-- 메뉴 -->
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a th:href="@{/}" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<i class="bi bi-bootstrap-fill"></i>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a th:href="@{/}" class="nav-link px-2" >Home</a></li>
<li><a th:href="@{/posts}" class="nav-link px-2" >Post</a></li>
<li><a th:href="@{/posts}" class="nav-link px-2" >Pricing</a></li>
</ul>
</div>
</div>
</header>
<!-- Footer -->
<footer th:fragment="footer">
<p>Footer Content</p>
</footer>
<!-- common script -->
<th:block th:fragment="scripts">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</th:block>
</body>
</html>부트스트랩을 간단하게 적용하고 상단 메뉴바를 설정했다. 여기서 중요한 점은 th:~와 같은 요소들인데 Thymeleaf를 위한 태그들이다.
<html xmlns:th="http://www.thymeleaf.org">다음과 같은 선언을 꼭 추가해주자.
<head th:fragment="head">
...
</head>th:fragment가 해당 html 태그 내부 요소를 사용하기 위한 바탕이 된다.
<li><a th:href="@{/}" class="nav-link px-2" >Home</a></li>th:href="@{url}"는 해당 경로로 이동할 수 있도록 href 태그를 추가해준다.
resources/templates/index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: head">
<!-- 헤드 공간 -->
</head>
<body>
<!-- 상단바 공간 -->
<header th:replace="layout :: nav"></header>
<!-- footer -->
<div th:replace="layout :: footer"></div>
<!--common script -->
<th:block th:replace="layout :: scripts"></th:block>
</body>
</html>th:replace="layout :: head"과 같은 태그는 Thymeleaf를 통해 "layout"이라는 템플릿에서 "head"라는 "fragment"를 가져와서 교체한다는 의미이다. 이러한 설정을 사용하면 간단하게 html을 관리할 수 있다.
