[Thymeleaf] 06. inline style

이번 포스트에서는 inline 형태로 Thymeleaf를 사용하는 방법에 대해 살펴보자.

 

inline style

 

inlie expression

기본적으로 Thyleleaf는 html 태그에 사용자 정의 속성을 이용해서 부가적인 기능을 추가한다. inline style은 사용자 정의 속성 없이 [[${...}]] 처럼 두 개의 대괄호 내에 표현식을 작성하는 방식이다.

<ul>
  <li th:text="'제목:' +#{home.title}">property 사용</li>
  <li th:text="'사용자: '+${user.name}">attribute 사용</li>
  <li>제목: [[#{home.title}]]</li>
  <li>사용자: [[${user.name}]]</li>
</ul>

만약 [[]] 자체를 사용해야 하는 경우에는 th:inline="none"을 이용해서 escape 시켜줘야 한다.

<p th:inline="none">A double array looks like this: [[1, 2, 3], [4, 5]]!</p>

inline 형식을 사용하면 코드가 좀 더 간단해 보일지는 모르지만 파일을 직접 실행했을 때 디자인 프로토타입을 확인할 수 없다는 단점이 있을 수 있다.

 

javaScript 작성

html.영역에서는 inline style과 그렇지 않을 때의 장/단점에 대해 이야기해 볼 수 있지만 javascript 영역에서는 선택권이 없다. 왜냐면 javascript 영역에서는 속성을 정의할 태그가 없기 때문이다.

javascript영역에서 Thymeleaf를 사용하기 위해서는 th:inline="javascript"를 <script>에 추가하고 inline 방식으로 표현식을 작성한다. 이때 만약 디자인 프로토타입을 추가하고 싶다면 블록주석으로 inline 표현식을 감싸고 프로토타입 내용을 추가할 수도 있다.

<script th:inline="javascript">
	let username = [[${user.name}]];
	let title = /*[[#{home.title}]]*/ "페이지 제목"
	console.log(username, title)
</script>

 

css 작성

css 영역에서 inline 스타일로 작성하는 것 역시 javascript에서의 방식과 매우 유사하다.

<style th:inline="css">
    .[[${classname}]] {
      text-align: [[${align}]];
    }
</style>