thymeleaf버전
1. header.jsp
- jsp 파일 생성시 ! 명령어로 자동 생성되는 항목외에도 Bootstrap와 thymeleaf 사용도 정의된 head 속성을 저장해둔 파일
- title은
@GetMapping할때 Model 타입으로 던진다.
: ex)model.addAttribute("title", "정보수정");
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headerFragment">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.css}" />
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<title th:text="${title}"></title>
</head>
</html>2. jsp 파일에서 사용
- 처음 두줄은 꼭 넣어야한다.
:<head>부분만 fragment명을 설정했기 때문이다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{header :: headerFragment}">
</head>3. 응용 및 적용
- layout.jsp
- header와 footer가 적용되고, body부분에 navi바도 적용 된 모습이다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{header :: headerFragment}">
</head>
<body>
<div th:replace="~{/member/header :: navFragment}"></div>
<div class="style2">
<div class="style1">
<div style="display: inline-block;">
<h3>item/insert.jsp</h3>
<div th:replace="~{body :: bodyFragment}"></div>
</div>
</div>
</div>
<div th:replace="~{footer :: footerFragment}"></div>
</body>
</html>
<style>
.lbldiv{
margin-bottom: 5%;
width: 80%;
display: flex;
}
.lbl1{
text-align: start;
width : 100px;
display : inline-block;
}
.style1 {
text-align: center;
border: 1px solid #cccccc;
padding: 20px;
width: 60%;
}
.style2 {
display: flex;
justify-content: center;
}
</style>- 기본 레이아웃의 모습
The best