[Thymeleaf] 속성 값 설정

Notice

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

개발자되기 프로젝트

[Thymeleaf] 속성 값 설정 본문

인프런/[인프런] 스프링 MVC 2

[Thymeleaf] 속성 값 설정

Seung__ 2021. 9. 18. 23:35

1. Thymeleaf의 tag 속성(Attribute)

HTML 태그에 th:* 속성을 지정하는 방식으로 동작한다.
th:* 로 속성을 적용하면 기존속성을 대체한다. 기존 속성이 없으면 새로 만든다.

2. 속성 설정

th:* 속성을 지정하면 타임리프는 기존 속성을 th:* 로 지정한 속성으로 대체한다.
기존 속성이 없다면 새로 만든다.
<input type="text" name="mock" th:name="userA" />
타임리프 렌더링 후 <input type="text" name="userA" />

<input type="text" name="mock" th:name="userA" />

3. 속성 추가

th:attrappend : 속성 값의 뒤에 값을 추가한다.(뒤에 붙임)
th:attrprepend : 속성 값의 앞에 값을 추가한다.(앞에 붙임)
th:classappend : class 속성에 자연스럽게 추가한다.(띄어쓰기 하고 붙음)

<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 = <input type="text" class="text" th:classappend="large" /><br/>

4. checked 처리(check box)

<input type="checkbox" name="active" checked="false" />
HTML에서 checked 속성은 checked 속성의 값과 상관없이 checked 라는 속성만 있어도 체크가 된다.
이런 부분이 true , false 값을 주로 사용하는 개발자 입장에서는 불편함.
타임리프의 th:checked 는 값이 false 인 경우 checked 속성 자체를 제거한다.
<input type="checkbox" name="active" th:checked="false" />
타임리프 렌더링 후: <input type="checkbox" name="active" />
<h1>checked 처리</h1> - checked o <input type="checkbox" name="active" th:checked="true" /><br/> - checked x <input type="checkbox" name="active" th:checked="false" /><br/> - checked=false <input type="checkbox" name="active" checked="false" /><br/>
Checked o의 경우 th:checked="true"만 존재.
- 따라서 서버 통해서 HTML 열어보면 체크 되어있음
Checked x의 경우 th:checked="false"만 존재.
- 따라서 서버 통해서 HTML 열어보면 체크 되어있지 않음.
Checked=false의 경우 cheked="false"만 존재.
- HTML 은 checked속성이 존재하기만 하면 체크해버림. 값이 false여도 신경쓰지 않음.
HTML파일로 열어본 경우
- 타임리프 적용 안됨

5. Controller

    @GetMapping("/attribute")
    public String attribute(){
        return "basic/attribute";
    }

6. attribute.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>속성 설정</h1>
<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 = <input type="text" class="text" th:classappend="large" /><br/>
<h1>checked 처리</h1>
- checked o <input type="checkbox" name="active" th:checked="true" /><br/>
- checked x <input type="checkbox" name="active" th:checked="false" /><br/>
- checked=false <input type="checkbox" name="active" checked="false" /><br/>
</body>
</html>

7. GitHub : 210918 Attribute

GitHub - bsh6463/Thymeleaf

Contribute to bsh6463/Thymeleaf development by creating an account on GitHub.

github.com

'인프런 > [인프런] 스프링 MVC 2' 카테고리의 다른 글

[Thymeleaf] 조건 부 평가, if, unless, switch, case (0)	2021.09.19
[Thymeleaf] 반복, each (0)	2021.09.18
[Thymeleaf] 연산 (0)	2021.09.18
[Thymeleaf] Literal (0)	2021.09.18
[Thymeleaf] URL 링크 (0)	2021.09.18