728x90
반응형
SMALL

템플릿 상속하기

각 템플릿의 반복되는 내용을 담아 기본 틀이 되는 템플릿을 만든다.
모든 템플릿은 이 기본 템플릿을 상속받아야 한다.

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="@{/bootstrap.min.css}">

		<!-- sbb CSS -->
		<link rel="stylesheet" type="text/css" th:href="@{/style.css}">
		<title>Hello, sbb!</title>
	</head>
	<body>
		<!-- 기본 템플릿 안에 삽입될 내용 Start -->
		<th:block layout:fragment="content"></th:block>
		<!-- 기본 템플릿 안에 삽입될 내용 End -->
	</body>
</html>

 

question_list.html

<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container my-3">
<table class="table">
	<thead class="table-dark">
		<tr>
			<th>번호</th>
			<th>제목</th>
			<th>작성일시</th>
		</tr>
	</thead>
	<tbody>
		<tr th:each="question, loop : ${questionList}">
			<td th:text="${loop.count}"></td>
			<td>
				<a th:href="@{|/question/detail/${question.id}|}"
				th:text="${question.subject}"></a>
			</td>
			<td th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></td>
		</tr>
	</tbody>
</table>
</div>
</html>

 

question_detail.html

<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container my-3">
	<!-- 질문 -->
	<h2 class="border-bottom py-2" th:text="${question.subject}"></h2>
	<div class="card my-3">
		<div class="card-body">
			<div class="card-text" style="white-space:pre-line;" th:text="${question.content}"></div>
			<div class="d-flex justify-content-end">
				<div class="badge bg-light text-dark p-2 text-start">
					<div th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></div>
				</div>
			</div>
		</div>
	</div>
	<!-- 답변의 갯수 표시 -->
	<h5 class="border-bottom my-3 py-2" 
		th:text="|${#lists.size(question.answerList)}개의 답변이 있습니다.|"></h5>
	<!-- 답변 반복 시작 -->
	<div class="card my-3" th:each="answer : ${question.answerList}">
		<div class="card-body">
			<div class="card-text" style="white-space:pre-line;" th:text="${answer.content}"></div>
			<div class="d-flex justify-content-end">
				<div class="badge bg-light text-dark p-2 text-start">
					<div th:text="${#temporals.format(answer.createDate, 'yyyy-MM-dd HH:mm')}"></div>
				</div>
			</div>
		</div>
	</div>
	<!-- 답변 반복 끝  -->
	<!-- 답변 작성 -->
	<form th:action="@{|/answer/create/${question.id}|}" method="post" class="my-3">
		<textarea name="content" id="content" rows="10" class="form-control"></textarea>
		<input type="submit" value="답변등록" class="btn btn-primary my-2">
	</form>
</div>
</html>
728x90
반응형
LIST
저작자표시 비영리 변경금지 (새창열림)

'IT > Spring Boot' 카테고리의 다른 글

[Spring Boot] 16. 폼(Form) 활용하기(1)  (0) 2024.04.30
[Spring Boot] 15. 질문 등록 기능 추가하기  (0) 2024.04.30
[Spring Boot] 13. 부트스트랩으로 화면 꾸미기  (0) 2024.04.11
[Spring Boot] 12. 웹페이지 디자인(CSS)  (0) 2024.04.11
[Spring Boot] 11. 답변 기능 추가하기  (1) 2024.04.11

+ Recent posts

티스토리툴바