[Spring Boot] Thymeleaf 타임리프 템플릿 사용하기 (7) :: Thymeleaf에서 PCDATA 조작하기
by 캐떠린th: 문법을 사용하여 PCDATA를 조작해보자!
저번 포스팅에서 사용했던 프로젝트에 이어서 작업하기
[Spring Boot] Thymeleaf 타임리프 템플릿 사용하기 (6) :: Thymeleaf에서 HTML 속성 조작하기
th: 문법을 사용하여 HTML 속성을 조작해보자! 저번 포스팅에서 사용했던 프로젝트에 이어서 작업하기 [Spring Boot] Thymeleaf 타임리프 템플릿 사용하기 (5) :: Thymeleaf 연산자 Thymeleaf에서 연산자를 사
pigsnowworld.tistory.com
PCDATA 조작을 위한 th: 문법 톺아보기
1. th:text
- escaped text
- 문자열에 이스케이프 적용함
- '<' → '<'; 자동으로 이스케이프 처리 적용
- '>' → '>'; 자동으로 이스케이프 처리 적용
- 따라서 태그 적용 불가
- innerText 역할
2. th:utext
- unescaped text
- 문자열에 이스케이프 적용 안 함
- 따라서 태그 적용 가능
- innerHTML 역할
3. 인라인 출력
- th:inline="text" → 기본값
- th:inline="javascript"
- th:inline + [[...]] → escaped text
- th:inline + [(...)] → unescaped text
ex) <div th:inline="text">이름: [[${name}]]</div>
- th:inline 생략 후, [[…]], [(…)] 만 사용도 가능하다!
참고) https://www.inflearn.com/questions/299947/th-inline은-왜-필요한건가요
만약 주석 내에서 '[[...]]', '[(...)]' 사용 시, Thymeleaf 주석을 달아야 오류가 발생하지 않는다. 자바스크립트에서 EL 사용 시, 자바스크립트 주석을 달아야 오류가 발생하지 않던 상황과 동일하다.
- Thymeleaf 주석: <!--/* */-->
PCDATA 조작하기
1. TestController.java
@GetMapping(value = "/m6.do")
public String m6(Model model) {
//콘텐츠 조작
// - PCDATA 조작, 하위 태그 조작
// - innerText(textContent), innerHTML 기능
String txt1 = "홍길동입니다.";
String txt2 = "<b>홍길동</b>입니다.";
String name = "아무개";
model.addAttribute("txt1", txt1);
model.addAttribute("txt2", txt2);
model.addAttribute("name", name);
return "m6";
}
2. m6.html
<!DOCTYPE html>
<html xmlns:th="https://thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://me2.do/5BvBFJ57">
</head>
<body>
<h1>Content</h1>
<div th:text="${txt1}"></div>
<div th:text="${txt2}"></div>
<div th:utext="${txt1}"></div>
<div th:utext="${txt2}"></div>
<hr>
<div th:text="${txt1}"></div>
<div th:inline="text">[[${txt1}]]</div>
<div>[[${txt1}]]</div>
<div>[[${txt2}]]</div>
<div>[(${txt2})]</div>
<hr>
<!-- PCDATA를 조작하는 모든 방법 -->
<!-- 아래 태그 출력이 내 목적이라면.. -->
<div>이름: 홍길동</div>
<p>방법 1</p> <!-- 쌤이 골고루 사용하시는 방법 3가지 중 하나 -->
<div>이름: <span th:text="${name}"></span></div>
<p>방법 2</p>
<div th:text="'이름: 홍길동'"></div>
<p>방법 3</p> <!-- 쌤이 골고루 사용하시는 방법 3가지 중 하나 -->
<div th:text="|이름: ${name}|"></div>
<p>방법 4</p>
<div th:inline="text">이름: [[${name}]]</div>
<p>방법 5</p> <!-- 쌤이 골고루 사용하시는 방법 3가지 중 하나 -->
<div>이름: [[${name}]]</div>
</body>
</html>
*글 작성에 참고한 내용: 학원 쌤의 열정적인 수업
'Spring' 카테고리의 다른 글
블로그의 정보
All of My Records
캐떠린