💡텍스트 출력
- 타임리프로 HTML의 콘텐츠에 데이터 출력 시에는
th:text을 사용한다.<span th : text ="${data}">
- HTML 태그의 속성이 아닌 HTML 콘텐츠 영역안에서 직접 데이터를 출력하고 싶으면
[[...]]를 사용한다.컨텐츠 안에서 직접 출력하기 = [[${data}]]
📗예시
controller 예시
우선, 데이터를 뷰로 넘기는 컨트롤러를 작성한다.
@Controller
@RequestMapping("/basic")
public class BasicController {
@GetMapping("text-basic")
public String textBasic(Model model){
model.addAttribute("data","hello! <b>Spring!</b>");
return "basic/text-basic";
}model객체에 문자열을 담아 뷰에 전송하고, 출력할 뷰를 작성한다.
html 예시
<!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>
💡Escape
-
뷰 템플릿으로 HTML 화면을 생성할 때는 출력하는 데이터에
<,>와 같은 특수문자가 있는것은 주의해서 사용해야 한다. -
웹 브라우저는
<를 HTML 태그의 시작으로 인식한다.- 따라서,
<를 태그의 시작이 아닌문자로 표현할 수 있는 방법이 필요한데, 이를HTML 엔티티라고 한다. - HTML에서 사용하는 특수문자를 HTML엔티티로 변경하는 것을
이스케이프(ESCAPE)라고 한다.
- 따라서,
-
타임리프가 제공하는
th:text와[[...]]는 기본적으로 이스케이프를 제공한다.<->$lt;>->$gt;
이런 이스케이프 기능을 사용하지 않으려면 어떻게 해야할까?
💡Unescape
- 이를 위해 타임리프는 두 기능을 제공한다
th:text->th:utext[[...]]->[(...)]
적용하기
<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>
<b></b>가 잘 적용 된 것을 확인 할 수있다!
배우고 기록하며 성장하는 백엔드 개발자입니다!