타임리프 사용 선언 문구는 이렇게 시작하자
<html xmlns:th="http://www.thymeleaf.org">
여기 간단한 출력 문구를 위해서 java 코드를 작성 했다.
@GetMapping("/text-basic") //localhost:8080/basic -> 여기에 이어서 /text-basic 처리
//총 url은 [localhost:8080/basic/text-basic
public String textBasic(Model model) {
//Model 인터페이스에 addAttribute 하면 ,"data" 변수에, "hello Spring!" 이라고 대입처리한다.
model.addAttribute("data", "hello Spring!");
return "basic/text-basic";
}
요부분 주소에 맞추기 위해서 경로를 주의해야한다.
return "basic/text-basic";
이걸 html 문구에 사용하기위해서 text-basic.html 에 이렇게 작성되었다.
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1> 컨텐츠에 데이터 출력하기 </h1>
<ul>
<!----- model.addAttribute("data", "hello Spring!"); 구문의 "data" 와 연동되는 구간
"hello Spring!" 으로 ${data}를 치환한다. -->
<li>th:text 사용><span th:text="${data}"></span></li>
<li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>
</ul>
</body>
</html>
"${data}"에 잘 대입되었다는걸 확인 및 URL주소 맞음!
다음은 html, 자바 코드간의 "<" 등의 코드문제를 처리해본다.
// <b> 의 Html 볼드체를 인식하기위한 text 코드
@GetMapping("/text-unescaped")
public String textUnescaped(Model model) {
model.addAttribute("data", "<b>hello Spring!<b>");
return "basic/text-unescaped";
}
<b> , <a> 등과같이 꺽쇠가 html에선 문법이기때문에 저걸 아래처럼 1개의 문장으로 엮으면 ,
"<" 문구를 "<"로 출력해버리는 이스케이프가 발생한다.
"<b>hello Spring!<b>"
th:text 로 처리하면 저렇게 문자열로 나오지만 실제 코드상에선 아래와 같이 처리된거다.
<li>th:text = <span><b>hello Spring!<b></span></li>
해결을 위해서 utext, [( )] 를 쓰면됨다.
<!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>
<!----- "<" 문구를 "<"로 출력하고, ">" 문구를 ">" 로 출력 , 즉 이스케이프 처리 하기때문에,
utext [(xx)] 를 통해서 "<b>hello Spring!<b>" 의 "<b>" 부분을 html로 출력하기 위해 해석하지말고 그냥 html로 인식하라고 처리-->
<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>
음..간단한거지만 생각보다 복잡하네..
참고로 김영한님의 스프링 인강을 공부하면서 올리는내용이라 문제가있다고 오면 코드는 삭제하겠습니다.
※ 이 글은 인프런 김영한님의 '스프링 MVC 2편' 강의를 학습하며 개인적으로 정리한 내용입니다.
'Thymeleaf' 카테고리의 다른 글
| 4. Thymeleaf 반복, 조건, 주석 (1) | 2025.08.06 |
|---|---|
| Thymeleaf 핵심 요약 (0) | 2025.08.05 |
| 3. Thymeleaf 변수 표현식, 날짜 표현 , link 처리 (0) | 2025.08.05 |
| 1. Thymeleaf 가 뭔지 배워야 겠다. (2) | 2025.08.05 |