참고
더보기
Spring Boot & Thymeleaf 시리즈는 김영한 님의 "스프링 MVC 2편 - 백엔드 웹 개발 활용 기술" 강의를 정리한 글입니다. 글에 첨부된 사진은 해당 강의의 강의 자료에서 캡쳐한 것입니다. 제 Github에만 올려뒀다가, 정보 공유와 강의 홍보(?)를 위해 블로그에도 업로드합니다.
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의
웹 애플리케이션 개발에 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. MVC 2편에서는 MVC 1편의 핵심 원리와 구조 위에 실무 웹 개발에 필요한 모든 활용 기술들을 학습할 수 있
www.inflearn.com
마크다운 형식으로 작성한 글을 블로그에 다시 올리는 거라 가독성이 많이 떨어집니다. 조금더 편하게 보시려면 아래의 Github repository에서 보시면 됩니다.
GitHub - Kloong1/TIL: Today I Learned.
Today I Learned. Contribute to Kloong1/TIL development by creating an account on GitHub.
github.com
타임리프 - 속성 값 설정
- 타임리프는 주로 HTML 태그에
th:*속성을 지정하는 방식으로 동작한다. th:*로 속성을 적용하면 기존 HTML 태그의*속성을 대체한다.- 태그에 기존 속성이 존재하지 않으면 새로 만든다.
BasicController.java 내용 추가
package kloong.thymeleaf.basic;
import ... //생략
@Controller
@RequestMapping("/basic")
public class BasicController {
@GetMapping("/attribute")
public String attribute() {
return "basic/attribute";
}
}/resources/templates/basic/attribute.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>속성 설정</h1>
<div><input type="text" name="mock" th:name="userA"/> -> <input type="text" name="userA"/> </div>
<input type="text" name="mock" th:name="userA"/>
<h1>속성 값 추가</h1>
- th:attrappend = 특정 속성 값 뒤에 값 추가 <input type="text" class="text" th:attrappend="class=' large'"/><br/>
- th:attrprepend = 특정 속성 값 앞에 값 추가 <input type="text" class="text" th:attrprepend="class='large '"/><br/>
- th:classappend = class 속성 값에 값 자연스럽게 추가 (공백 등 고려) <input type="text" class="text" th:classappend="large" /><br/>
<h1>checked 처리</h1>
- th:checked="true" 하면 checked o <input type="checkbox" name="active" th:checked="true"/><br/>
- th:checked="false" 하면 checked x <input type="checkbox" name="active" th:checked="false"/><br/>
- checked=false 해도 checked o <input type="checkbox" name="active" checked="false"/><br/>
</body>
</html>속성 설정
th:*속성을 지정하면 타임리프는 HTML 태그에 존재하는*속성을th:*로 지정한 속성으로 대체한다.- 기존 속성이 없다면 새로 만든다.
- 타임리프 렌더링 전:
<input type="text" name="mock" th:name="userA" /> - 타임리프 렌더링 후:
<input type="text" name="userA" />
속성 추가
th:attrappend: 속성 값의 뒤에 값을 추가한다 (사이에 공백 없이 추가하므로 공백이 필요하다면 직접 넣어줘야한다).th:attrprepend: 속성 값의 앞에 값을 추가한다 (사이에 공백 없이 추가하므로 공백이 필요하다면 직접 넣어줘야한다).th:classappend: class 속성에 자연스럽게 추가한다 (값 사이에 공백을 넣어준다).
checked 처리 - th:checked
<input type="checkbox" name="active" checked="false" />- HTML에서
checkbox는checked속성이 "존재만하면"checked속성의 값과 관계 없이 체크박스에 체크 표시가 되어버린다. - 이런 부분이
true,false같은 boolean 값으로 체크 여부를 다루고 싶은 개발자 입장에서 매우 불편하다. - 타임리프의
th:checked는 값이false인 경우checked속성 자체를 제거한다. - 따라서 개발자는
th:checked="${isChecked}"같은 방식으로 쉽게 개발이 가능하다. - 타임리프 렌더링 전:
<input type="checkbox" name="active" th:checked="false" /> - 타임리프 렌더링 후:
<input type="checkbox" name="active" />
'Spring > Spring Boot & Thymeleaf' 카테고리의 다른 글
| [Spring Boot & Thymeleaf] 11. if, unless, switch (0) | 2022.10.24 |
|---|---|
| [Spring Boot & Thymeleaf] 10. 반복 (0) | 2022.10.24 |
| [Spring Boot & Thymeleaf] 8. 연산/연산자 (0) | 2022.10.24 |
| [Spring Boot & Thymeleaf] 7. 리터럴(Literal) (0) | 2022.10.24 |
| [Spring Boot & Thymeleaf] 6. URL 링크 (0) | 2022.09.05 |
댓글