2-12 스태틱 디렉터리와 스타일 시트 (실습 기록)

• 출처 : https://wikidocs.net/161396

1. 스태틱(static) 디렉터리

• 스타일 시트들은 스태틱 디렉터리에 저장해야 한다. 스타일 시트를 작성하자.
• style.css

textarea {
    width:100%;
}
input[type=submit] {
    margin-top:10px;
}

2. 템플릿에 스타일 적용

• 스타일 시트 파일을 질문 상세 템플릿에 적용한다.
• 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>

• static 파일에 style.css파일이 존재하지만, /static/style.css 대신 /style.css로 사용해야 한다. static 디렉터리가 스태틱 파일들의 루트 디렉터리이기 때문이다.

• 잘 작동된다. 답글란이 가로로 더 넓어졌으며, 답변등록 버튼도 좀 더 띄워져 있다.