1. 표준 html 주석

타임리프는 html을 최대한 해치지 않고 활용할 수 있는 기술이기 때문에 html에서 제공하는 주석도 당연히 제공이 된다.<!-- --> 을 이용한다.

<h1>표준 html 주석 처리</h1>
<!-- <span th:text="${data}"></span> -->

• 당연하게도 <!-- --> 사이에 들어간 부분은 출력이 되지 않는다.
• 하지만, 웹 브라우저에서 페이지 소스 보기 를 하면 주석을 그대로 볼 수가 있다.

2. 타임리프 파서 주석

타임리프에서는 직접 제공하는 주석 방식이 있다. <!--/* */--!> 을 이용한다.

<h1>타임리프 파서 주석 처리</h1>
<!--/* <span th:text="${data}"></span> */--!>

• 여기 velog는 타임리프를 이해하지 못하기 때문에 위처럼 주석처리(회색글씨)가 되지 않지만, 타임리프를 활용하면 주석처리가 되어 태그가 출력되지 않는다.
• 타임리프 파서 주석은 렌더링이 되면서 아예 지워져버린다. 따라서 페이지 소스 보기 를 해도 보이지가 않는다.
• 하지만 html 파일 자체를 열어볼 때는 주석이 남아있다.

3. 타임리프 프로토타입 주석

타임리프에서는 추가로 프로토타입 주석이라는 것을 지원한다. <!--/*/ /*/--!> 을 이용한다. 이것은 타임리프로 렌더링이 되었을 때는 주석 내부태그가 처리가 되고, html파일 자체를 열어볼 때는 주석형태로 남아있다.

<h1>타임리프 프로토타입 주석 처리</h1>
<!--/*/ <span th:text="${data}"></span> /*/--!>

• html 파일을 직접 열었다면, 위 내용은 위와 같이 주석으로 보인다.
• 타임리프를 통해 렌더링된 화면을 본다면, 프로토타입 주석 내 태그가 작동하여 실제로 값이 출력되어 보인다.

[html 파일을 열었을 때 '페이지 소스 보기' 화면]
모든 주석이 남이있어, 누구나 볼 수가 있다.

[타임리프로 서버사이드 렌더링 후 '페이지 소스 보기' 화면]
1. html 주석은 남아있다.
2. 타임리프 파서 주석은 보이지 않는다.
3. 타임리프 프로토타입 주석 또한 보이지 않는다.