홈 화면과 레이아웃

Controller/HomeController

package jpabook.jpashop.controller;

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@Slf4j
public class HomeController {

    @RequestMapping("/")
    public String home() {
        log.info("home controller");
        return "home";
    }
}

Templates/home

<!DOCTYPE HTML>
<html xmlns:th="<http://www.thymeleaf.org>">
<head th:replace="~{fragments/header :: header}">
    <title>Hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body>
<div class="container">
    <div th:replace="~{fragments/bodyHeader :: bodyHeader}"></div>

    <div class="jumbotron mt-4">
        <h1>HELLO SHOP</h1>

        <!-- 회원 기능 -->
        <p class="lead mt-4">회원 기능</p>
        <p>
            <a class="btn btn-lg btn-secondary" href="/members/new">회원 가입</a>
            <a class="btn btn-lg btn-secondary" href="/members">회원 목록</a>
        </p>

        <!-- 상품 기능 -->
        <p class="lead mt-4">상품 기능</p>
        <p>
            <a class="btn btn-lg btn-dark" href="/items/new">상품 등록</a>
            <a class="btn btn-lg btn-dark" href="/items">상품 목록</a>
        </p>

        <!-- 주문 기능 -->
        <p class="lead mt-4">주문 기능</p>
        <p>
            <a class="btn btn-lg btn-info" href="/order">상품 주문</a>
            <a class="btn btn-lg btn-info" href="/orders">주문 내역</a>
        </p>
    </div>

    <div th:replace="~{fragments/footer :: footer}"></div>
</div> <!-- /container -->
</body>
</html>

templates/fragments/header.html

<!DOCTYPE html>
<html xmlns:th="<http://www.thymeleaf.org>">
<head th:fragment="header">
    <!-- 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" href="/css/bootstrap.min.css" integrity="sha384
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
          crossorigin="anonymous">
    <!-- Custom styles for this template -->
    <link href="/css/jumbotron-narrow.css" rel="stylesheet">
    <title>Hello, world!</title>
</head>

templates/fragments/bodyHeader.html

<!DOCTYPE html>
 <html xmlns:th="<http://www.thymeleaf.org>">
 <div class="header" th:fragment="bodyHeader">
    <ul class="nav nav-pills pull-right">
        <li><a href="/">Home</a></li>
    </ul>
    <a 
href="/"><h3 class="text-muted">HELLO SHOP</h3></a>
 </div>

templates/fragments/bodyHeader.html

<!DOCTYPE html>
 <html xmlns:th="<http://www.thymeleaf.org>">
 <div class="footer" th:fragment="footer">
    <p>&copy; Hello Shop V2</p>
 </div>

실행 결과

image.png

화면 결과를 시각적으로 더 예쁘게 해주기 위해서 아래의 과정을 시행하였다.