온 코딩

[Spring Boot- Thymeleaf] 레이아웃 짜는 법 - Bootstrap 본문

복습 ARCHIVE/모델별 프로젝트

[Spring Boot- Thymeleaf] 레이아웃 짜는 법 - Bootstrap

SummerON 2021. 7. 9. 12:12

타임리프 레이아웃 방법 

1. JSP의 include와 같이 특정 부분을 가져와서 포함 시키는 형태

- th:insert  :  th:~~의 바깥쪽태그는 유지하면서 태그의 시작과 끝 내부에 삽입하는 방식

- th:replace  :  기존 내용을 대체하는 방식 

 

포함되는 HTML

th:fragment : 포함하는 HTML에서 사용할 이름

 

2. 특정부분을 파라미터 형태로 전달하여 내용에 포함하는 형태

th:fragment

 

그외 

th:block  :  HTML의 <div></div>역할을 하는 Thymeleaf 지원 태그

 

* 기존 버전에는 th:include가 있었지만 3.0버전 이후로는 사라짐!

 

 

1. include 방식

SampleController에 요청 메서드 추가

 

프로젝트 구조

포함되는 HTML : template/fragment/fragment1.html and fragment2.html

포함하는 HTML : template/sample/exLayout.html

스타일, 링크, 메타 태그 등은 절대 포함되는 파일에 사용하면 안 됨 ! -> 레이아웃 태그이기 때문

*Controller 구조

package com.example.thymeleaftest.controller;

import com.example.thymeleaftest.dto.SampleDTO;
import lombok.extern.log4j.Log4j2;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import java.time.LocalDateTime;
import java.util.List;
import java.util.stream.Collectors;
import java.util.stream.IntStream;

@Controller
@RequestMapping("/sample")
@Log4j2
public class SampleController {

    @GetMapping("/ex1")
    public void ex1(){
        log.info("되냐 안되냐 졸지 말고 수업들어!~!!!!");
    }

    //외부로부터 Model 객체를 전달받아 Model 객체에 20개의 DTO객체를 담아 ex2.html로 전달
    //Model 객체는 Spring Boot가 자동으로 생성하여 전달하기 때문에 개발자는 별도 작업이 필요없다
    @GetMapping({"/ex2", "/exLink"}) //다중 url 설정이 가능
    public void exModel(Model model){
        List<SampleDTO> list = IntStream.rangeClosed(1,20).asLongStream().mapToObj(i ->{
            SampleDTO dto = SampleDTO.builder().sno(i).first("first  "+i).last("/last  "+i).regTime(LocalDateTime.now()).build();
            return dto;

        }).collect(Collectors.toList());
        model.addAttribute("list",list);
    }

    //레이아웃을 위한 추가 메서드
    @GetMapping({"/exLayout1","/exLayout2"})
    public void exLayout(){
        log.info("exLayout~~!!");
    }

}

 

 

1. insert와 replace차이

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>fragment1.html</title>
</head>
<body>

<div th:fragment="part1"> <!--th:fragment="part1"을 exLayout1.html에서 사용할 이름을 지정 -->
  <h2>Part1</h2>
</div>
<div th:fragment="part2">
  <h2>Part2</h2>
</div>
<div th:fragment="part3">
  <h2>Part3</h2>
</div>

</body>
</html>
<!-- fragment2.html : 전체가 include 되는 페이지이므로 기본 구조 불필요-->
<div>
  <hr/>
  <h2>Fragment 2 File</h2>
  <h2>Fragment 2 File</h2>
  <h2>Fragment 2 File</h2>
</div>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>exLayout1.html</title>
</head>
<body>

  <h1>Fragment Test</h1>
  <div >
    <th:block th:replace="~{/fragments/fragment2}"></th:block>
    <!--th:block == div-->
    <!--th:replace="~{/경로/파일명}" 해당 파일 전체가 포함됨 // 포함되는 파일에 기본 태그 있으면 안됨 -->
  </div>
<hr/>

  <h1>Layout 1-1</h1>
  <div >
    <div th:replace="~{/fragments/fragment1 :: part1}"></div>
    <!--th:replace="~{/fragment/fragment1 :: part1}  해당 이름을 가진 부분만 포함된다 // 대체 -->
  </div>
  <hr/>

  <h1>Layout 1-2</h1>
  <div >
    <div th:insert="~{/fragments/fragment1 :: part2}"></div>
    <!-- 여기에 삽입 ~{/fragment/fragment1 :: part2}가 삽입 됨 -->
  </div>
  <hr/>

  <h1>Layout 1-3</h1>
  <div >
    <div th:replace="~{/fragments/fragment1 :: part3}"></div>
  </div>
  <hr/>

</body>
</html>

 

1. replace 진행 확인

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fragment3</title>
</head>
<body>
<div th:fragment="target(first,second)">
    <style>
        .c1{background-color: pink}
        .c2{background-color: aquamarine}
    </style>

    <div class="c1">
        <th:block th:replace="${first}"></th:block>
    </div>

    <div class="c2">
        <th:block th:replace="${second}"></th:block>
    </div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>exLayout2.html</title>
</head>
<body>
<div th:replace="~{/fragments/fragment3 :: target(~{this::#ulFirst},~{this::#ulSecond})}">
    <ul id="ulFirst">
        <li>AAA</li>
        <li>AAA</li>
        <li>AAA</li>
    </ul>

    <ul id="ulSecond">
        <li>BBB</li>
        <li>BBB</li>
        <li>BBB</li>
    </ul>
</div>
</body>
</html>

3. th:fragment 태그 활용

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="setContent(content)">
<head>
    <meta charset="UTF-8">
    <title>layout1</title>
</head>
<body>
<style>
  *{margin: 0; padding: 0;}
  .header{width:100vw; height: 20vh; background-color: aquamarine}
  .content{width:100vw; height: 70vh; background-color: darkorange}
  .footer{width:100vw; height: 10vh; background-color: darksalmon}
</style>
<div class="header">
  <h1>HEADER</h1>
</div>

<div class="content">
  <div th:replace= "${content}">
  </div>
</div>

<div class="footer">
  <h2>FOOTER</h2>
</div>
</th:block>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<th:block th:replace="~{/layout/layout1 :: setContent(~{this::content})}">

    <th:block th:fragment="content">
        <h1>exTemplate page</h1>
        콘텐츠 세부 내용
    </th:block>

</th:block>
저작자표시 비영리 변경금지

'복습 ARCHIVE > 모델별 프로젝트' 카테고리의 다른 글

[Spring Security] - Spring Secrete, Spring Security, sts  (0) 2021.07.19
[Spring Boot] JPQL과 SQL / Query Annotation / Querydsl  (0) 2021.07.16
[Spring boot](Spring starter JPA) Thymeleaf 시작 th: 태그모음  (0) 2021.07.08
[Spring Boot](Spring Data JPA) memoTest - IntelliJ2  (0) 2021.07.08
[Spring Data JPA] memoTest - IntelliJ  (0) 2021.07.07
'복습 ARCHIVE/모델별 프로젝트' Related Articles more
Comments