이번 포스트에서는 앞에서 만든 question_list.html 과 question_detail.html 을 bootstrap 을 적용해 꾸며보겠습니다.
시작
bootstap 을 적용하기 위해서는 html 파일의 <head></head> 안에 다음과 같은 문구를 추가합니다.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
bootstrap 은 각 태그에 클래스 속성에 값을 줘서 css 설정을 할 수 있습니다.
1. question_list.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Insert title here</title>
</head>
<body>
<table>
<thead>
<tr>
<th>제목</th>
<th>작성일시</th>
</tr>
</thead>
<tbody>
<tr th:each ="question : ${questionList}">
<td>
<a th:href="@{|/question/detail/${question.id}|}" th:text = "${question.subject}"></a>
</td>
<td th:text = "${question.createDate}"></td>
</tr>
</tbody>
</table>
</body>
</html>2. quesiton_detail.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Insert title here</title>
</head>
<body>
<h1 th:text = "${question.subject}"></h1>
<div th:text = "${question.content}"></div>
<h5 th:text="|${#lists.size(question.answerList)}개의 답변이 있습니다.|"></h5>
<div>
<ul>
<li th:each="answer : ${question.answerList}" th:text="${answer.content}"></li>
</ul>
</div>
<form th:action="@{|/answer/create/${question.id}|}" method="post">
<textarea name="content" id="content" rows="15"></textarea>
<input type="submit" value="답변등록">
</form>
</body>
</html>
question_list.html
question_list 의 테이블에 번호라는 열을 추가해서 각 질문마다 번호를 표시할 수 있도록 하였고,
thymeleaf 의 유틸리티인 #temporals.format 을 사용해서 날짜 표시 형식을 지정했습니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Insert title here</title>
</head>
<body>
<div 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 : ${questionList}">
<td th:text="${question.id}"></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>
</body>
</html>브라우저로 접속을 해보면 bootstrap 이 적용된것을 볼 수 있습니다.
작성일시의 데이터는 저장되지 않아서 아직 출력되지 않습니다.
question_detail
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Insert title here</title>
</head>
<body>
<div class="container my-3">
<h1 class="border-bottom py-2" th:text = "${question.subject}"></h1>
<div clas="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')}"></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 class="my-3" th:action="@{|/answer/create/${question.id}|}" method="post">
<textarea class="form-control" name="content" id="content" rows="15"></textarea>
<input class="btn btn-primary my-2" type="submit" value="답변등록">
</form>
</div>
</body>
</html>다음으로 question_detail.html 에 bootstrap 을 적용했습니다.
'Spring > Springboot 실습' 카테고리의 다른 글
| 게시판 만들기 - 질문 등록 기능 (1) (0) | 2023.01.18 |
|---|---|
| 게시판 만들기 - 템플릿 상속 (0) | 2023.01.18 |
| 게시판 만들기 - 답변 등록 기능 추가 (0) | 2023.01.09 |
| 게시판 만들기 - 질문 상세페이지 작성 (0) | 2023.01.08 |
| 게시판 만들기 - service 작성 (0) | 2023.01.08 |
