인프런 김영한님의 Spring강의에서 공부한것을 올리며, Thymeleaf의 경우 unit 단위로 공부후 각각 정리하는 글을 작성하겠습니다.
주석
원래 주석은 너무 간단한 내용이라 정리하지 않으려다가... 또 타임리프 주석중에 신박한 주석이 있어 이를 위해 글을 작성한다.
간단한 컨트롤러와 뷰 코드를 작성해보자!
@GetMapping("/comments")
public String comments(Model model){
model.addAttribute("data", "zbqmgldjfh");
return "basic/comments";
}<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>예시</h1>
<span th:text="${data}">html data</span>
<h1>1. 표준 HTML 주석</h1>
<!--
<span th:text="${data}">html data</span>
-->
<h1>2. 타임리프 파서 주석</h1>
<!--/* [[${data}]] */-->
<!--/*-->
<span th:text="${data}">html data</span>
<!--*/-->
<h1>3. 타임리프 프로토타입 주석</h1>
<!--/*/
<span th:text="${data}">html data</span>
/*/-->
</body>
</html>실행결과는 다음과 같습니다. 랜더링된 결과이죠!
총 3개의 주석이 사용 가능하다.
1. 표준 HTML 주석
자바스크립트의 표준 HTML 주석은 타임리프가 렌더링 하지 않고, 그대로 남겨둔다.
2. 타임리프 파서 주석
타임리프 파서 주석은 타임리프의 진짜 주석이다. 렌더링에서 주석 부분을 제거한다.
3. 타임리프 프로토타입 주석
HTML 파일을 웹 브라우저에서 그대로 열어보면 HTML 주석이기 때문에 이 부분이 웹 브라우저가 렌더링하지 않는다.
잘 보면 문법이 <!--/*/ /*/--> 인데, <!-- --> 가 HTML 주석이기 때문에 통으로 주석처리 되어 브라우저에서 직접 보면 보이지 않는다.
하지만 타임리프에서 렌더링을 거치면 이 부분이 정상 렌더링 된다.
쉽게 이야기해서 HTML 파일을 그대로 열어보면 주석처리가 되지만, 타임리프를 렌더링 한 경우에만 보이는 기능이다.
'BackEnd > Thymeleaf' 카테고리의 다른 글
| [Thymeleaf] 자바스크립트 인라인 (0) | 2022.01.28 |
|---|---|
| [Thymeleaf] 블록 (0) | 2022.01.28 |
| [Thymeleaf] 조건부 평가 (0) | 2022.01.27 |
| [Thymeleaf] 반복 (0) | 2022.01.27 |
| [Thymeleaf] 속성 값 설정 (0) | 2022.01.27 |
댓글