텍스트를 출력하는 기능
text
타임리프는 기본적으로 HTML 테그의 속성에 기능을 정의해서 동작한다.
@Controller
@RequestMapping("/basic")
public class BasicController {
@GetMapping("/text-basic")
public String textBasic(Model model) {
model.addAttribute("data", "Hello Spring!");
return "basic/text-basic";
}
}HTML의 콘텐츠(content)에 데이터를 출력
<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출력 결과
th:text 사용 Hello Spring
컨텐츠 안에서 직접 출력하기 = Hello spring
Escape
이스케이프(escape)
HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것
타임리프가 제공하는 th:text , [[...]] 는 기본적으로 이스케이스(escape)를 제공한다.
HTML 엔티티
웹 브라우저는 < 를 HTML 테그의 시작으로 인식
따라서 < 를 테그의 시작이 아니라 문자로 표현할 수 있는 방법
HTML 문서는 < , > 같은 특수 문자를 기반으로 정의된다.
따라서 뷰 템플릿으로 HTML 화면을 생성할 때는 출력하는 데이터에 이러한 특수 문자가 있는 것을 주의해서 사용
escape Unescape
th:text th:utext
[[...]] [(...)]
@GetMapping("/text-unescaped")
public String textUnescaped(Model model) {
model.addAttribute("data", "Hello <b>Spring!</b>");
return "basic/text-unescaped";
}<b>태그를 통해서 텍스트를 강조시키는것이 목적 !
하지만 소스보기를 하면 < 부분이 < 로 변경된 것을 확인
<!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:inline="none" : 타임리프는 [[...]] 를 해석하기 때문에, 화면에 [[...]] 글자를 보여줄 수 없다. 이 테그 안에서는 타임리프가 해석하지 말라는 옵션
출력결과
th:text = Hello <b>Spring</b>
th:utext = Hello Spring
[[...]] vs [(...)]
[[...]] =Hello <b>Spring</b>
[(...)] =Hello Spring
참조 강의
https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2/dashboard
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의
웹 애플리케이션 개발에 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. MVC 2편에서는 MVC 1편의 핵심 원리와 구조 위에 실무 웹 개발에 필요한 모든 활용 기술들을 학습할 수 있
www.inflearn.com
'Java > Thymeleaf' 카테고리의 다른 글
| 리터럴 (0) | 2021.12.02 |
|---|---|
| URL 링크 (0) | 2021.12.02 |
| 유틸리티 객체와 날짜 (0) | 2021.12.02 |
| 기본 객체들 (0) | 2021.12.02 |
| 변수 - SpringEL (0) | 2021.12.01 |