Java/Thymeleaf

블록

코딩공부 2021. 12. 10. 02:07

<th:block> 은 HTML 태그가 아닌 타임리프의 유일한 자체 태그

보통 Thymeleaf는 속성으로 동작을 하지 태그로 동작하지 않는다. 

@GetMapping("/block")
public String block(Model model) {
 addUsers(model);
 return "basic/block";
}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<th:block th:each="user : ${users}">
 <div>
 사용자 이름1 <span th:text="${user.username}"></span>
 사용자 나이1 <span th:text="${user.age}"></span>
 </div>
 <div>
 요약 <span th:text="${user.username} + ' / ' + ${user.age}"></span>
 </div>
</th:block>
</body>
</html>

 

<div>
사용자 이름1 <span>userA</span>
사용자 나이1 <span>10</span>
</div>
<div>
요약 <span>userA / 10</span>
</div>
<div>
사용자 이름1 <span>userB</span>
사용자 나이1 <span>20</span>
</div>
<div>
요약 <span>userB / 20</span>
</div>
<div>
사용자 이름1 <span>userC</span>
사용자 나이1 <span>30</span>
</div>
<div>
요약 <span>userC / 30</span>
</div>

HTML 태그안에 속성으로 기능을 정의해서 사용하는데, 위 예처럼 이렇게 사용하기 애매한 경우에 사용하면 된다.

<th:block> 은 렌더링시 제거됨.

 

두개의 div를 같이 돌리고 싶을경우에 <th:block> 태그를 통해서 사용이 가능하다. 

 

하위에는 th:block 대신 div 태그를 그대로 사용했을때의 예시이다.

 

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
  <div>
      <div>
          사용자 이름1 <span>userA</span>
          사용자 나이1 <span>10</span>
      </div>
      <div>
          요약 <span>userA / 10</span>
      </div>
  </div>
  <div>
      <div>
          사용자 이름1 <span>userB</span>
          사용자 나이1 <span>20</span>
      </div>
      <div>
          요약 <span>userB / 20</span>
      </div>
  </div>
  <div>
      <div>
          사용자 이름1 <span>userC</span>
          사용자 나이1 <span>30</span>
      </div>
      <div>
          요약 <span>userC / 30</span>
      </div>
  </div>

  </body>
</html>

 

내가 원하는 2개의 div 상위에 하나의 div가 더 묶이는 것을 볼 수 있다.

 

 

수강 강의 

https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2/dashboard

 

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의

웹 애플리케이션 개발에 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. MVC 2편에서는 MVC 1편의 핵심 원리와 구조 위에 실무 웹 개발에 필요한 모든 활용 기술들을 학습할 수 있

www.inflearn.com