728x90
- HTML 컨텐츠에 데이터를 출력
- <Span th:text="${data}">
- HTML 테그의 속성이 아니라 HTML 콘텐츠 영역 안에서 직접 데이터를 출력하고 싶으면 다음과 같이 [[...]] 를 사용하면 된다
- 컨텐츠 안에서 직접 출력하기 = [[${data}]]
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>컨텐츠에 데이터 출력하기</h1>
<ul>
<li>th:text 사용 <span th:text="${data}"></span></li>
<li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>
</ul>
</body>
</html>
- HTML 문서는 < , > 같은 특수 문자를 기반으로 정의된다. 따라서 뷰 템플릿으로 HTML 화면을 생성할 때는 출력하는 데이터에 이러한 특수 문자가 있는 것을 주의해서 사용해야 한다.
- data에 <b> 태그를 추가하여 진하게 나오기를 기대했지만 문자 그대로가 출력된다.
- 웹 브라우저: Hello Spring!
- 소스보기: Hello <b>Spring!</b>
- 웹 브라우저는 < 를 HTML 태그의 시작으로 인식한다. 따라서 < 를 테그의 시작이 아니라 문자로 표현할 수 있는 방법이 필요한데, 이것을 HTML 엔티티라 한다.
- 그리고 이렇게 HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것을 이스케이프(escape)라 한다. 그리고 타임리프가 제공하는 th:text , [[...]] 는 기본적으로 이스케이스(escape)를 제공한다
Unescape
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>text vs utext</h1>
<ul>
<li>th:text = <span th:text="${data}"></span></li>
<li>th:utext = <span th:utext="${data}"></span></li>
</ul>
<h1><span th:inline="none">[[...]] vs [(...)]</span></h1>
<ul>
<li><span th:inline="none">[[...]] = </span>[[${data}]]</li>
<li><span th:inline="none">[(...)] = </span>[(${data})]</li>
</ul>
</body>
</html>- 언이스케이프 두 가지 기능
- th:text -> th:utext
- [[...]] -> [(...)]
- th:inline="none" : 타임리프는 [[...]] 를 해석하기 때문에, 화면에 [[...]] 글자를 보여줄 수 없다. 이 태그 안에서는 타임리프가 해석하지 말라는 옵션이다
728x90
'스프링 MVC 2편(백엔드 웹 개발 활용 기술)' 카테고리의 다른 글
| Ch01. 타임리프(기본 기능) - URL 링크 (0) | 2022.03.09 |
|---|---|
| Ch01. 타임리프(기본 기능) - 유틸리티 객체와 날짜 (0) | 2022.03.09 |
| Ch01. 타임리프(기본 기능) - 기본 객체들 (0) | 2022.03.09 |
| Ch01. 타임리프(기본 기능) - 변수(SpringEL) (0) | 2022.03.09 |
| Ch01. 타임리프(기본 기능) - 타임리프 소개 (0) | 2022.03.09 |