타임리프 사용법 2

- 텍스트 - text(기본), utext(강조글씨 사용할 때)

1. < span th:text="${data}" >

   +) [[${data}]]

2. < span th:utext="${data}" >

   +) [(${data})]

- URL 링크

1. 단순한 URL

   @{/hello}
   -> /hello

2. 쿼리 파라미터

   @{/hello(param1=$ {param1}, param2=$ {param2})}
   -> /hello?param1=data1 & param2=data2
   :: () 에 있는 부분은 쿼리 파라미터로 처리된다.

3. 경로 변수

   @{/hello/{param1}/{param2}(param1=$ {param1}, param2=$ {param2})}
   -> /hello/data1/data2
   :: URL 경로상에 변수가 있으면 () 부분은 경로 변수로 처리된다.

4. 경로 변수 + 쿼리 파라미터

   @{/hello/{param1}(param1=$ {param1}, param2=$ {param2})}
   -> /hello/data1?param2=data2
   :: 경로 변수와 쿼리 파라미터를 함께 사용할 수 있다.

5. 상대경로, 절대경로, 프로토콜 기준을 표현할 수 도 있다.

   /hello : 절대 경로
   hello : 상대 경로

- 주석

<!--/*-->
<span th:text="${data}">html data</span>
<!--*/-->

타임리프 파서 주석은 타임리프의 진짜 주석이다. 렌더링에서 주석 부분을 제거한다.

- 레이아웃

1. copy

   template/fragment/footer :: copy
   -> template/fragment/footer.html 템플릿에 있는 th:fragment="copy" 라는 부분을 템플릿 조각으로 가져와서 사용한다는 의미이다.

참고 ! -- th:fragment 태그 :: 다른 곳에 포함되는 코드 조각

2. <div th:insert="~{template/fragment/footer :: copy}"></div>

   th:insert 를 사용하면 현재 태그( div ) 내부에 추가한다.

3. <div th:replace="~{template/fragment/footer :: copy}"></div>

   th:replace 를 사용하면 현재 태그( div )를 대체한다.

4. <div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>

   파라미터를 전달해서 동적으로 조각을 렌더링 할 수도 있다.

5. common_header(~{::title},~{::link})

   ::title 은 현재 페이지의 title 태그들을 전달한다.
   ::link 는 현재 페이지의 link 태그들을 전달한다.

- 입력 폼 처리

1. th:object : 커맨드 객체를 지정한다.

   컨트롤러에서 해당 오브젝트 정보를 넘겨주어야 한다.

2. th:field : 이것 사용하여 태그 속성을 자동으로 처리

ex) 예시 코드

 <form action="item.html" th:action th:object="${item}" method="post">
      <div>
<label for="itemName">상품명</label>
<input type="text" id="itemName" th:field="*{itemName}" class="form-
control" placeholder="이름을 입력하세요">
	</div>

- 체크박스 & 라디오박스 & 셀렉트 박스

체크박스 : 멀티 가능
라디오, 셀렉트 : 단일 체크만 가능