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 |