728x90
참고 링크 : https://wikidocs.net/book/7601
오라클DB와 intelliJ로 작업하였습니다
지금까지 질문 목록 화면과 질문 상세 화면을 만들었다. 하지만 좀 더 그럴싸한 화면을 만들기 위해서는 화면에 디자인을 적용해야 한다. 디자인을 적용하기 위해서는 스타일시트(stylesheet, CSS파일)를 사용해야 한다.
스태틱(static) 디렉터리
스타일시트 파일은 스프링부트의 스태틱 디렉터리에 저장해야 한다.
스타일시트
스타일시트 파일은 스태틱 디렉터리에 저장해야 한다. 스타일시트 파일(style.css)을 다음과 같이 작성하자.
textarea{
width: 100%;
}
input[type=submit]{
margin-top: 10px;
}
/*질문상세화면 css*/style.css 파일은 질문 상세 화면에 사용하기 위해 작성했다. 답변 등록시 사용하는 텍스트 창의 넓이를 100%로 하고 "답변등록" 버튼 상단에 10 픽셀의 마진을 설정했다.
템플릿에 스타일 적용
이제 작성한 스타일시트 파일을 질문 상세 템플릿에 적용하자.
템플릿 상단에 style.css를 사용할수 있는 링크를 추가했다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>질문 상세</title>
</head>
<body>
<link rel="stylesheet" type="text/css" th:href="@{/style.css}"> <!--css추가-->
<h1 th:text="${question.subject}"></h1>
<div th:text="${question.content}"></div>
<h5 th:text="|${#lists.size(question.answerList)}개의 답변이 있습니다.|"></h5>
<!--#list.size(이터러블객체)-타임리프가 제공하는 유틸리티로 객체의 길이를 반환-->
<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>static 디렉터리에 style.css 파일이 위치하지만 /static/style.css 대신/style.css로 사용해야 함에 주의하자. 왜냐하면 static 디렉터리가 스태틱 파일들의 루트 디렉터리이기 때문이다.
이제 질문 상세 화면이 어떻게 변경되는지 확인해 보자. 다음처럼 스타일이 적용된 화면을 볼 수 있을 것이다.
728x90
'Follow Work > SpringbootBoard' 카테고리의 다른 글
| [StringBoot] 템플릿상속 (11) (0) | 2022.08.12 |
|---|---|
| [StringBoot] 부트스트랩 (10) (0) | 2022.08.12 |
| [StringBoot] 답변등록 (8) (0) | 2022.08.12 |
| [StringBoot] 질문상세 (7) (0) | 2022.08.12 |
| [StringBoot] 서비스 (6) (0) | 2022.08.11 |