부트스트랩

이 화면을 예쁘게 꾸며보기로..

웹 디자이너 없이도 개발자 혼자서 괜찮은 수준의 웹 페이지를 만들 수 있게 도와주는 프레임워크이다.
부트스트랩은 트위터(Twitter)를 개발하면서 만들어졌고,
현재 지속적으로 관리되는 오픈소스 프로젝트다.

부트스트랩 다운로드

bootstrap-5.2.3-dist.zip 이름으로 다운로드 받아지고, 이 중 bootstrap.min.css 파일을 복사하여 static 디렉토리에 넣는다.

나중에 파일들이 또 필요하므로 바로 압축파일을 삭제하지는 말기로..

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
✅<link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">
<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, ✅loop : ${questionList}">
        <td ✅th:text="${loop.count}"></td>
        <td>
            <a th:href="@{|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>

#temporals.format(날짜객체, 날짜 포맷)

• 타임리프의 #temporals.format 유틸리티를 사용했다.

예뻐졌다..

question_detail.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">
<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://getbootstrap.com/docs/5.2/forms/input-group/