Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

개발자되기 프로젝트

[Thymeleaf] Text, uText 본문

인프런/[인프런] 스프링 MVC 2

[Thymeleaf] Text, uText

Seung__ 2021. 9. 17. 23:47

텍스트 출력 기능.

 

1. th:text=...

  • HTML의 content에 data를 출력할 경우 th:text 사용
  • ex) <span th:text="${data}">
  • HTML 태그 속성이 아니라 HTML content영역 안에서 직접 출력하고 싶으면??
    •  [[${data}]]
    • <li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>

 

 

2. Escape

  • HTML 문서는 < , > 같은 특수 문자를 기반으로 정의된다. 
  • 따라서 뷰 템플릿으로 HTML 화면을 생성할 때는 
  • 출력하는 데이터에 이러한 특수 문자가 있는 것을 주의해야 함
  • HTML Entity
    • 웹 브라우저는 '<'를 HTML Tag 시작으로 인식. 
    • '<'를 Tag 시작이 아니라 문자로 표현할 수 있는 방법이 필요.
    • 이를 HTML Entity라고 함.
    • HTML에서 사용하는 특수문자를 HTML Entity로 변경하는 것을 Escape라고 함.
  • th:text, [[....]]는 기본적으로 Escape기능을 제공.
  • > → &lt;
  • > → &gt;
  • 등등

 

3. Unescape

  • Escape기능을 사용하지 않을 경우?
  • tx:text → tx:utext
  • [[...]] → [(...)]

 

 

4. 예제

4.1 Controller

  • View에 <b>Spring!!</b>를 String으로 넘겨보자.
    @GetMapping("/text-unescaped")
    public String textUnescaped(Model model){
        model.addAttribute("data", "Hello <b>Spring!!</b>");
        return "basic/text-unescaped";
    }

 

4.2 HTML

<!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>

 

4.3 결과

  • utext가 적용되면 unescape반영됨
  • [(...)]도 unescape반영됨.

 

5. 주의

  • Escape를 기본으로 사용하고, 필요할 경우 unescpae사용하자 ㅋㅋㅋ

 

 

6. GitHub : 210917 Thymeleaf, text

 

GitHub - bsh6463/Thymeleaf

Contribute to bsh6463/Thymeleaf development by creating an account on GitHub.

github.com

 

'인프런 > [인프런] 스프링 MVC 2' 카테고리의 다른 글

[Thymeleaf] 유틸리티 객체, 날짜  (0) 2021.09.18
[Thymeleaf] 기본 객체들  (0) 2021.09.18
[Thymeleaf] 변수, SpringEL  (0) 2021.09.18
Thymeleaf 소개  (0) 2021.09.17
프로젝트 생성  (0) 2021.09.17
'인프런/[인프런] 스프링 MVC 2' Related Articles more
Comments