728x90
반응형
1. Fragment(공동영역처리) - th:flagment, th:replace
<head th:replace="fragments.html :: commonHead"></head>
- th:replace를 통해 fragments.html 템플릿 파일에서 commonHead라는 이름의 fragment를 찾는다.
- ::는 fragment 이름을 템플릿 파일 이름과 구분하기 위해 사용하는 구분자
- commonHead 내용이 현재 페이지의 <head>요소로 복사됨
<head th:fragment="commonHead"> <!-- 조각화 -->
- 공통 영역 처리
- 헤더, 네브바, 푸터 등 여러 페이지에서 반복되는 영역을 재사용
- fragment 사용 방법
- th:insert
- 태그 내로 조각을 삽입하는 방법
- th:replace
- 해당 태그를 완전히 대체한 방법
<div th:insert="~{/test/footer :: fragment}></div> <div th:replace="~{/test/footer :: fragment}></div> - th:insert
- Fragment에서 파라미터 사용도 가능함
- 상수 표현식과 |…| 변수 표현식 ${..}을 사용
<footer th:fragment="footerFragmentParam (param1, param2)"> <p> COPYRIGHT@ dhk22</p><br/> <p th:text="|Hi, ${param1}|"></p> <p th:text="|Im ${param2}|"></p> </footer> <div th:replace="~{/test/footer :: footerFragmentParam ('everyone', 'kim')}"></div>
2. 조건문 - th:if
<div>
<span th:if-${info.gender == 'F'}">여자</span>
<span th:if-${info.gender == 'M'}">남자</span>
</div>
<div th:if="$info.useYn == 'Y'}">사용</div>
<div th:unless="$info.useYn == 'Y'}">미사용</div>
3. 블록 태그 - th:block
- 타임리프만이 제공하는 유일한 자체 태그
- 하나의 블럭 처리 → div 태그로 반복문 돌리고 싶을 때 사용
- 렌더링 될 때 사라지며 웹 브라우저에서는 div 태그 반복문 결과만 남게 됨
<th:block th:each="user : ${userList}">
<div>
<span th:text="user.username}">username</span>
<span th:text="user.age}">age</span>
</div>
<div>
<span th:text="${user.username} + ' & ' + ${user.age}">username&age</span>
</div>
</th:block>
4. URL 표현 - th:href
<a th:href="@{/oreder/list}">
- 서버 내 특정 위치 가능
<a th:href="@{/oreder/details(id=1, action='show_all')}"> <!-- 파라미터 사용 -->
<a th:href="@{/oreder/details(id=${orderInfo.seq})}"> <!-- 서버에서 받아온 값 -->
5. th:value
input 태그에 데이터를 넣을 때 사용함
model.addAttribute("userId",1);
<input type="hidden" th:value="${userId}"/> <!-- 값이 th:value 에 담김 -->
<!-- 다시 컨트롤러로 넘겨주기 - th:name -->
<input type="hidden" th:name="test" th:value="${userId}"/>
- th:value 값이 th:name이라는 키값으로 매핑되어 컨트롤러에 전달되고, 이를 String으로 받거나, @RequestParam으로 받아 처리함
6. th:type
th:type은 서버 측 템플릿 엔진인 Thymeleaf에서 사용되는 속성으로, 템플릿 엔진과 상호 작용하고 데이터를 삽입하는 데 사용됩니다. 반면에 HTML의 type 속성은 브라우저에게 요소를 어떻게 처리해야 하는지 알려주는 역할을 하며, HTML의 문서의 유효성을 검사하는 데 사용됩니다.
7. th:each
<tr th:each="test : ${testDtoPage}">
<td class="text-center" th:text="${testDtopage.getPageable().getPageNumber() * testDtopage.getPageable().getPageSize() + testStat.count}"></td>
</tr>- getPageable().getPageNumber(): 현재 페이지 번호
- getPageable().getPageSize(): 페이지 당 표시되는 항목 수
- {}Stat.count: 현재 항목의 인덱스 또는 카운터
- 예시)
현재 페이지가 2이고 페이지 크기가 10이며 testStat.count가 5인 경우, "No" 열의 텍스트 내용은 다음과 같이 계산됩니다. 2 * 10 + 5 = 25 즉, "25"가 표시됩니다. 이것은 해당 행이 페이지 내에서 25번째 항목임을 나타냅니다.
8. th:colspan
- 테이블의 셀을 가로로 합병
- cf) th:rowspan 테이블의 셀을 세로로 합병
<td th:colspan="8" class="text-center">검색 결과가 없습니다./td>
728x90
반응형
댓글