layout03.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymleaf.org">
<th:block th:fragment="함수(section)">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<header>
공통 템플릿 헤더
</header>
<section th:replace="${section}">
</section>
<footer>
공통 템플릿 푸터
</footer>
</body>
</th:block>
</html>
quiz01.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>이 화면에 진입할 때 SimpleVO를 이용하여 데이터를 출력 합니다. (값은 아무거나)</h3>
<p>
회원정보확인 링크에는 quiz_result01?키=값 형태로
회원번호, 이름, 아이디 을 넘겨주세요
아래 class="wrap" 부분만 layout03 템플릿에 전달 될 수 있도록 처리하세요
</p>
<div class="wrap">
<h3>wrap</h3>
회원번호: [[${vo.num}]]<br/>
이름: [[${vo.name}]]<br/>
아이디: [[${vo.id}]]<br/>
<br/>
<a th:href="@{quiz_result01(num=${vo.num}, name=${vo.name}, id=${vo.id})}">회원정보확인</a>
</div>
<div id="wrap2">
<h3>wrap2</h3>
회원번호: [[${vo.num}]]<br/>
이름: [[${vo.name}]]<br/>
아이디: [[${vo.id}]]<br/>
<br/>
<a th:href="@{quiz_result01_02/{num}/{name}/{id}(num=20, name='에이', id='vscod')}">회원정보확인</a>
</div>
</body>
</html>
quiz_result01.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymleaf.org">
<th:block th:replace="~{/include/layout03::함수( ~{/view/quiz01::.wrap} )}">
</th:block>
</html>
quiz_result01_02.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymleaf.org">
<th:block th:replace="~{/include/layout03::함수( ~{/view/quiz01::#wrap2} )}">
</th:block>
</html>
Controller
/////////////////////////////////////////////////////////////////////////////////////////////
//실습
@RequestMapping("/quiz01")
public String quiz01(Model model) {
SimpleVO vo=SimpleVO.builder().num(30).name("카이").id("course").build();
model.addAttribute("vo", vo);
return "view/quiz01";
}
@RequestMapping("/quiz_result01")
public String quiz_result01(SimpleVO vo, Model model) {
model.addAttribute("vo", vo);
return "view/quiz_result01";
}
@GetMapping("/quiz_result01_02/{num}/{name}/{id}")
public String quiz_result01_02(@PathVariable("num") int num, @PathVariable("name")String name, @PathVariable("id")String id,Model model) {
SimpleVO vo=SimpleVO.builder().num(num).name(name).id(id).build();
model.addAttribute("vo",vo);
return "view/quiz_result01_02";
}
만약 quiz_result01이 파일로 없고 컨트롤러에서 경로로 retrun "view/quiz01";이면...
감쌀 때, layout이 quiz01.html페이지로 온다고 생각해야 한다.
그래서 div만 감싸면 그 윗부분도 화면에 나오게 된다.
따라서, 정확히 div부분만 결합되게 하려면 html의 태그를 크게 감싸고 id나 class부분만 가져오게 해야 한다.
fragment가 replace로 오는 것! replace태그는 html의 <html xmlns:th="http://www.thymleaf.org"> 바로 아래로 오도록, 닫아주는 태그는 </html>태그의 바로 윗부분으로.
연습으로 두개를 만들었는데, 감싸는건 한번만!
'Spring Boot' 카테고리의 다른 글
| 230214 Spring Boot 데이터베이스 연결, SQL문 실행 로그 추가 (0) | 2023.02.14 |
|---|---|
| 230214 Spring Boot Validation (0) | 2023.02.14 |
| 230213 Spring Boot Thymeleaf 문법 -include (0) | 2023.02.13 |
| 230213 Spring Boot Thymeleaf 문법 -내장함수 (0) | 2023.02.13 |
| 230213 Spring Boot Thymeleaf 문법 -a태그, block, (0) | 2023.02.13 |
