# 타임리프 기본 문법 + fragment(공통 헤더/푸터) 구조화

타임리프(Thymeleaf)란?

타임리프(Thymeleaf)는 Spring MVC + 뷰 템플릿 엔진으로 가장 많이 쓰이는 기본 템플릿이다.

보통 기본 틀이라고 하면, HTML 안에서 타임리프를 적용하는 공식 구조를 의미한다.

1.HTML 문서 기본 구조

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>타임리프 기본 틀</title>
</head>
<body>

    <h1 th:text="${title}">기본 제목</h1>

    <!-- 변수 출력 -->
    <p th:text="${message}">기본 메시지</p>

    <!-- 조건문 -->
    <div th:if="${isLogin}">
        로그인 상태입니다.
    </div>
    <div th:unless="${isLogin}">
        로그인이 필요합니다.
    </div>

    <!-- 반복문 -->
    <ul>
        <li th:each="item : ${items}" th:text="${item}">아이템</li>
    </ul>

    <!-- 링크 -->
    <a th:href="@{/member/list}">회원목록</a>

</body>
</html>

2. 컨트롤러 예시 (Spring mvc)

@Controller
public class ThymeleafController {

    @RequestMapping("/example")
    public String example(Model model) {
        model.addAttribute("title", "타임리프 예제");
        model.addAttribute("message", "Hello Thymeleaf!");
        model.addAttribute("isLogin", true);
        model.addAttribute("items", Arrays.asList("사과", "바나나", "포도"));
        return "example"; // resources/templates/example.html
    }
}

3. 동작 원리

Controller에서 Model에 데이터 담음
return "example" → example.html 찾아감
${변수명} → Model의 값으로 치환

레이아웃 구조화

JSP 시절에 <%@ include file="header.jsp" %> 이런 거 하던 걸, 타임리프에서는 fragment로 깔끔하게 가져올 수 있다.

1.header.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}">공통 타이틀</title>
</head>
<body>
<!-- header fragment -->
<div th:fragment="header">
    <header>
        <h1>공통 헤더</h1>
        <nav>
            <a th:href="@{/}">홈</a>
            <a th:href="@{/member/list}">회원목록</a>
        </nav>
    </header>
</div>

2. footer.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<!-- footer fragment -->
<div th:fragment="footer">
    <footer>
        <p>ⓒ 2025 MyCompany</p>
    </footer>
</div>
</body>
</html>

본문에서 include 하기

3. example.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>타임리프 Fragment 예제</title>
</head>
<body>

<!-- 헤더 삽입 -->
<div th:replace="fragments/header :: header"></div>

<!-- 본문 -->
<main>
    <h2 th:text="${title}">기본 제목</h2>
    <p th:text="${message}">본문 내용</p>
</main>

<!-- 푸터 삽입 -->
<div th:replace="fragments/footer :: footer"></div>

</body>
</html>

동작 원리

fragments/header :: header → header.html 파일 안에 th:fragment="header" 지정된 부분을 가져옴
fragments/footer :: footer → footer.html 안의 footer fragment 가져옴
이렇게 하면 헤더/푸터를 모든 페이지에 반복하지 않고 재사용 가능

replace vs insert vs include 차이

th:replace → 가져온 fragment가 자기 자신을 통째로 대체
th:insert → fragment 내용을 현재 태그 안에 삽입
th:include → 옛날 방식 (거의 안 씀)

실무에서는 보통 replace 많이 쓴다.

즉, header/footer를 fragment로 나눠놓고

필요할 때 th:replace로 가져오면 JSP include처럼 공통 레이아웃 관리가 깔끔해질 수 있다.

'🗄️ 백엔드 > 🍃Spring' 카테고리의 다른 글

# Spring boot 기초 - 프로젝트 생성부터 로그인 기능 만들기 (Session기반) 2탄 (0)	2025.09.11
# Spring boot 기초 - 프로젝트 생성부터 로그인 기능 만들기 (Session기반) 1탄 (1)	2025.09.10
# GitHub API로 커밋 히스토리 불러오기 (Spring Boot REST API 연동) (2)	2025.08.27
# Spring Security + Thymeleaf: 로그인 사용자 활용하기 (3)	2025.08.25
# spring boot(java) 제미나이(Gemini) API 연동하기 (무료 버전) (3)	2025.07.15

일	월	화	수	목	금	토
	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

📒솜이노트

# 타임리프 기본 문법 + fragment(공통 헤더/푸터) 구조화

타임리프(Thymeleaf)란?

1.HTML 문서 기본 구조

2. 컨트롤러 예시 (Spring mvc)

3. 동작 원리

레이아웃 구조화

본문에서 include 하기

동작 원리

replace vs insert vs include 차이

'🗄️ 백엔드 > 🍃Spring' 카테고리의 다른 글

티스토리툴바

타임리프(Thymeleaf)란?

1.HTML 문서 기본 구조

2. 컨트롤러 예시 (Spring mvc)

3. 동작 원리

레이아웃 구조화

본문에서 include 하기

동작 원리

replace vs insert vs include 차이

'🗄️ 백엔드 > 🍃Spring' 카테고리의 다른 글

검색

티스토리툴바