타임리프 태그 속성을 사용하여 거의 모든 것을 처리 할 수 있지만 HTML 텍스트에 직접 표현을
쓰는 것이 더 좋을 수도 있다. 인라인 표기법을 사용하면 HTML 텍스트를 직접 표현할 수 있다.
6-1. 인라인 표기법
-
인라인 표기법은 [[...]] 또는 [(...)] 형태로 표현된다.
[[...]]는 th:text 속성에 해당하고 [(...)]는 th:utext 속성에 해당한다.
6-1-1.스프링 MVC 모델에 저장된 값을 인라인 표기법을 사용하여 표시한다.
-
[컨트롤러 메서드]
@GetMapping("ch0806/home0101") public String home0101(Model model) { model.addAttribute("username", "Sebastian"); return "ch0806/home0101"; } -
[뷰 파일]
<html xmlns:th="http://www.thymeleaf.org"> <head> <title>Home</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <p th:text="|Hello, ${username}!|">greeting</p> <p>Hello, <span th:text="${username}">name</span>!</p> <p>Hello, [[${username}]]!</p> </body> </html> -
[응답 화면]
6-1-2.[(...)] 인라인 표기법은 이스케이프 처리를 하지 않는다.
-
[컨트롤러 메서드]
@GetMapping("ch0806/home0102") public String home0102(Model model) { model.addAttribute("username", "<b>Sebastian</b>"); return "ch0806/home0102"; } -
[뷰 파일]
<html xmlns:th="http://www.thymeleaf.org"> <head> <title>Home</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <p th:utext="|Hello, ${username}!|">greeting</p> <p>Hello, <span th:utext="${username}">name</span>!</p> <p>Hello, [(${username})]!</p> </body> </html> -
[응답 화면]
6-2. 비활성화
-
th:inline 속성 값을 "none" 으로 지정하면 인라인 표기법을 비활성화 할 수 있다.
-
비활성화가 된 상태에서는 인라인 표기법의 형태인 [(...)] 로 그대로 표시된다.
-
[컨트롤러 메서드]
@GetMapping("ch0806/home0201") public String home0201(Model model) { model.addAttribute("username", "<b>Sebastian</b>"); return "ch0806/home0201"; } -
[뷰 파일]
<html xmlns:th="http://www.thymeleaf.org"> <head> <title>Home</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <p>Hello, [[${username}]]!</p> <p>Hello, [(${username})]!</p> <p th:inline="none">Hello, [[${username}]]!</p> </body> </html> -
[응답 화면]
6-3. 텍스트 인라이닝
-
th:inline 속성 값을 "text" 로 지정하면 인라인 표현이 텍스트 형태로 표시된다.
-
인라인 표현이 텍스트 형태로 표시된다.
-
[컨트롤러 메서드]
@GetMapping("ch0806/home0301") public String home0301(Model model) { model.addAttribute("username", "Sebastian"); return "ch0806/home0301"; } -
[뷰 파일]
<html xmlns:th="http://www.thymeleaf.org"> <head> <title>Home</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <script th:inline="text"> var username = [[${username}]]; </script> <body> <p th:text="|Hello, ${username}!|">greeting</p> <p>Hello, <span th:text="${username}">name</span>!</p> <p>Hello, [[${username}]]!</p> </body> </html> -
[응답 화면]
6-4. JavaScript 인라이닝
-
th:inline 속성 값을 "javascript" 로 지정하면 인라인 표현이 자바스크립트 문법을 고려하여 표시된다.
-
인라인 표현이 자바스크립트 문자열 형태로 표시된다.
-
[컨트롤러 메서드]
@GetMapping("ch0806/home0401") public String home0401(Model model) { model.addAttribute("username", "Sebastian"); return "ch0806/home0401"; } -
[뷰 파일]
<html xmlns:th="http://www.thymeleaf.org"> <head> <title>Home</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <script th:inline="javascript"> var username = [[${username}]]; </script> <body> <p th:text="|Hello, ${username}!|">greeting</p> <p>Hello, <span th:text="${username}">name</span>!</p> <p>Hello, [[${username}]]!</p> </body> </html> -
[응답 화면]
