02L. 스태틱 디렉터리와 스타일시트 관련

• 스태틱(static) 디렉터리
• 스타일시트
• 템플릿에 스타일 적용

---

2-12. 스태틱 디렉터리와 스타일시트

---

점프 투 스프링부트 - WikiDocs

---

pahkey/sbb3 - 2-12

지금까지 질문 목록 화면과 질문 상세 화면을 만들었다. 하지만 좀 더 그럴싸한 화면을 만들기 위해서는 화면에 디자인을 적용해야 한다. 디자인을 적용하기 위해서는 스타일시트(stylesheet, CSS파일)를 사용해야 한다.

이번 장에서는 SBB에 스타일시트를 적용해 보자.

---

스태틱(static) 디렉터리

스타일시트 파일은 스프링부트의 스태틱 디렉터리에 저장해야 한다. 스프링부트의 스태틱 디렉터리는 다음과 같다.

/sbb/src/main/resources/static

---

스타일시트

스타일시트 파일은 스태틱 디렉터리에 저장해야 한다. 스타일시트 파일(style.css)을 다음과 같이 작성하자.

파일명: /sbb/src/main/resources/static/style.css

textarea {
    width:100%;
}

input[type=submit] {
    margin-top:10px;
}

_ style.css 파일은 질문 상세 화면에 사용하기 위해 작성했다. 답변 등록시 사용하는 텍스트 창의 넓이를 100%로 하고 "답변등록" 버튼 상단에 10 픽셀의 마진을 설정했다.

---

템플릿에 스타일 적용

이제 작성한 스타일시트 파일을 질문 상세 템플릿에 적용하자.

파일명: /sbb/src/main/resources/templates/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 디렉터리가 스태틱 파일들의 루트 디렉터리이기 때문이다.

이제 질문 상세 화면이 어떻게 변경되는지 확인해 보자.

다음처럼 스타일이 적용된 화면을 볼 수 있을 것이다.

텍스트 창의 넓이가 넓어지고 "답변등록" 버튼 위에 여유공간이 생겼다.

축하한다! 여러분은 이제 조금은 그럴싸해진 화면을 만들 수 있게 되었다.

---