https://getbootstrap.kr/docs/5.3/getting-started/download/
다운로드
Bootstrap을 다운로드하여 컴파일된 CSS 및 JavaScript, 소스 코드를 얻거나 npm, RubyGems 등과 같은 즐겨쓰는 패키지 관리자를 사용해서 포함시키세요.
getbootstrap.kr
question_list -부트스트랩 적용
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>질문 리스트</title>
<link rel="stylesheet" th:href="@{/bootstrap.min.css}" />
</head>
<body>
<div class="container my-3">
<h2>질문 목록</h2>
<table class="table">
<thead class="table-dark">
<tr>
<th>번호</th>
<th>제목</th>
<th>작성일시</th>
</tr>
</thead>
<tbody>
<tr th:each="question, loop : ${qList}">
<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>
</body>
</html>
테이블 항목으로 "번호"를 추가했다. 번호는 loop.count를 사용하여 표시했다. (개수 만큼 인덱스 부여)
그리고 날짜를 보기 좋게 출력하기 위해 타임리프의 #temporals.format 유틸리티를 사용했다. #temporals.format은 다음과 같이 사용한다.
- #temporals.format(날짜객체, 날짜포맷) - 날짜객체를 날짜포맷에 맞게 변환한다.
그리고 가장 윗줄에 bootstrap.min.css 스타일시트를 사용할수 있도록 링크를 추가했다.
question_detail 도 부트스트랩 추가
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>질문 디테일</title>
<link rel="stylesheet" th:href="@{/bootstrap.min.css}" />
</head>
<body>
<div 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>
</body>
</html>
https://blog.naver.com/drv982/222920683673
부트스트랩
부트스트랩 설치 우선 다음 URL에서 부트스트랩을 다운로드 하자. 부트스트랩 적용 먼저 질문 목록 템플...
blog.naver.com
'BACKEND > SpringBoot' 카테고리의 다른 글
| 질문 등록 처리 및 유효성검사 (5) | 2023.11.09 |
|---|---|
| 부분 모듈화 ( th:fragment / th:replace ) (0) | 2023.11.09 |
| 스태틱 디렉터리와 스타일시트 (0) | 2023.11.09 |
| 답변 등록하기 (0) | 2023.11.09 |
| Question 서비스 생성 및 상세보기 페이지 (0) | 2023.11.08 |