허접한 UI를 그럴싸한 화면으로 만들기 위해서는 화면에 디자인을 적용해야 한다.
디자인을 적용하기 위해서는 스타일시트(stylesheet, CSS파일)을 사용한다.
스태틱(static) 디렉터리
스타일시트
스태틱 디렉터리 아래에 스타일시트 파일을 생성한다.
textarea{
width:100%;
}
input[type=submit]{
margin-top:10px;
}
템플릿에 스타일 적용
question_detail.html
<link rel="stylesheet" type="text/css" th:href="@{/style.css}">
<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>
템플릿 상단에 style.css를 사용할 수 있는 링크를 추가하였다.
static 디렉터리에 style.css파일이 위치하지만 /static/style.css 로 사용하지 않고 /style.css로 사용한다.
그 이유는 static 디렉터리가 스태틱 파일의 루트 디렉터리이기 때문이다.
적용결과
부트 스트랩
부트 스트랩은 디자이너의 도움 없이도 개발자 혼자서 상당히 괜찮은 수준의 웹 페이지를 만들수 있도록 도와주는 오픈소스 프레임워크이다.
부트스트랩 다운로드 - https://getbootstrap.com/docs/5.1/getting-started/download/
주의사항 : 부트스트랩 5 기준으로 작성을 할 예정이다. 버전이 다르다면 정상적으로 동작하지 않을 수 있다.
다음과 같은 파일이 다운로드 되면 압축을 풀고 /css/bootstrap.min.css 파일을 복사하여 스태틱폴더안에 넣어준다.
bootstrap-5.1.3-dist.zip
부트스트랩 적용
question_list.html 수정
<link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">
<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="@{|/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>
테이블 항목으로 "번호"를 추가했다. 번호는 loop.count를 사용하여 표시했다. 그리고 날짜를 보기 좋게 출력하기 위해 타임리프의 #temporals.format 유틸리티를 사용했다.
#temporals.format은 다음과 같이 사용한다.
- #temporals.format(날짜객체, 날짜포맷) - 날짜객체를 날짜포맷에 맞게 변환한다.
그리고 가장 윗줄에 bootstrap.min.css 스타일시트를 사용할수 있도록 링크를 추가했다. 그리고 위에서 사용된 class="container my-3", class="table", class="table-dark 등은 부트스트랩 스타일시트에 정의되어 있는 클래스들이다. 부트스트랩에 대한 자세한 내용은 다음 URL을 참조하자.
마찬가지로 question_detail.html 파일도 수정한다.
<link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">
<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>
질문 상세 템플릿에 사용한 부트스트랩 클래스를 다음처럼 표로 정리하였다.
부트스트랩 클래스설명
card, card-body, card-text | 부트스트랩 Card 컴포넌트 |
badge | 부트스트랩 Badge 컴포넌트 |
form-control | 부트스트랩 Form 컴포넌트 |
border-bottom | 아래방향 테두리 선 |
my-3 | 상하 마진값 3 |
py-2 | 상하 패딩값 2 |
p-2 | 상하좌우 패딩값 2 |
d-flex justify-content-end | 컴포넌트의 우측 정렬 |
bg-light | 연회색 배경 |
text-dark | 검은색 글씨 |
text-start | 좌측 정렬 |
btn btn-primary | 부트스트랩 버튼 컴포넌트 |
그리고 질문 내용과 답변 내용에는 style="white-space: pre-line;" 과 같은 스타일을 지정해 주었다. 글 내용의 줄 바꿈을 정상적으로 보여주기 위해 적용한 스타일이다.
적용결과
1. 리스트 화면
2. 상세화면
출처 : 점프 투 스프링부트 https://wikidocs.net/161459
'Backend > Spring Boot' 카테고리의 다른 글
[Spring Boot] 질문 등록 / 폼(form) (0) | 2022.08.24 |
---|---|
[Spring Boot] 템플릿 상속 (0) | 2022.08.24 |
[Spring Boot] 답변 등록(2/2) (0) | 2022.08.23 |
[Spring Boot] 답변 등록(1/2) (0) | 2022.08.22 |
[Spring Boot] URL 프리픽스(prefix) (0) | 2022.08.22 |