개발정리

타임리프- 프래그먼트에 스타일 지정하기 본문

스프링/타임리프

타임리프- 프래그먼트에 스타일 지정하기

coffee. 2024. 4. 24. 14:23

타임리프를 컴포넌트화 해서 사용하고 싶다!

평소 html을 사용하는 것 처럼 타임리프를 사용해서 개발을 하는 중이었습니다...

main.html에 다음과 같이 헤더,메인,footer를 사용하여 한 파일에 작성하였습니다.

하지만 로그인 창을 개발 하려고 하니 귀찮은 점이 생겼습니다...

 

헤더와 footer를 다시 개발 하라고??

로그인 페이지 역시 헤더와 footer를 똑같이 개발 해야 했습니다. 

물론 복사 붙연넣기를 한다면 해결되지만 그렇게 깔끔한 방법은 아니었습니다.

그래서 찾아보던중 fragment라는 것을 알게 되었습니다.

 

Fragment 가볍게 살펴보기

출처:https://www.thymeleaf.org/doc/tutorials/3.1/usingthymeleaf.html#including-template-fragments

가볍게 살펴 보자면

프래그먼트는 th:fragment="fragment명" 이라는 문법으로 선언 할 수 있습니다.

그 이후에 다른 html 파일에서 th:insert="~{html명 :: 프래그먼트명}" 의 형태로 외부의 html을 삽입 할 수 있습니다..

 

프래그먼트에 스타일 속성 지정하기

 

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{/footer.css}">
</head>
<body>
    <div class="footer"  th:fragment="footer">
    </div>
</body>
</html>

아하! 이제 평상시에 html에 스타일을 지정하는 방식으로 <head> 태그에 스타일을 지정하였습니다.

 

.......................................

왜 안되는 거지???

 

 

 

그래서 스택오버플로우를 찾아 봤습니다.

 

 

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    
</head>
<body>
    <div class="footer"  th:fragment="footer">
		<link rel="stylesheet" th:href="@{/footer.css}">
    </div>
</body>
</html>

프래그먼트 안에 스타일을 지정하니 해결되었습니다!!

 

 

수정

프래그먼트 안에 스타일을 link하는거 보다 

프래그먼트를 쓰는 html 파일에 link를 생성하는 것이 더 깔끔 합니다!