스프링mvc2편 타임리프 - 기본기능 : 속성 값 설정

인프런 김영한 강사님의 스프링 mvc2편을 보고 정리한 내용입니다.

무엇을 배웠나요?

• 타임리프 주로 HTML태그에 th:* 속성을 지원하는 방식으로 동작한다. th:* 로 속성을 적용하면 기존 속성을 대체한다. 기존 속성이 없으면 새로 만든다.
  • ex <input type=”text” name=“mock” th:name”userA” /> → <input type=”text” name=”userA”/> 로 치환된다.
• 속성 추가하기
  • th:attappend : 속성 값의 뒤에 값을 추가한다.
  • th:attrprepend : 속성 값의 앞에 값을 추가한다.
  • th: classappend : class 속성에 자연스럽게 추가한다.
• HTML에서 checked속성이 있을경우 속성의 값과는 상관없이 속성만 있어도 체크가 된다.
  • ex) <input type="checkbox" name="active" checked="false" /> 이 경우에도 checked 처리가 된다.
  • 타임리프에서는 th:checked 의 값이 false인 경우는 checked 속성 자체를 제거한다.
  • ex) <input type="checkbox" name="active" th:checked="false" /> → <input type="checkbox" name="active" />

궁금한 점은 무엇인가요?

더 필요하다고 생각한 것이 있나요?

코드

<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/>