월루를 꿈꾸는 대학생
[Spring Boot] 템플릿 상속 본문
728x90
https://getbootstrap.com/docs/5.2/getting-started/download/
Download
Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
getbootstrap.com
부트스트랩 다운로드
bootstrap.min.css 파일을 static 폴더에 넣어두기
해당 부트스트랩 파일을 적용
<link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">
#temporals.format(날짜객체 ,날짜 포멧)
- 날짜 표시를 커스터마이징
<td th:text="${#temporals.format(question.createDate,'yyyy-MM-dd HH:mm')}"></td>
부트스트랩 스타일시트에 있는 클래스들을 각 html 요소에다가 넣어주기
<div class="container my-3">
<table class="table">
<thead class="table-dark">표준 html 구조
- 기본적인 표준 구조를 가진 html을 만들고 이를 주축으로 하위 html 파일들이 이를 상속해서 코드 양을 줄이고 가시성을 확보
<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">
<!-- sbb CSS -->
<link rel="stylesheet" type="text/css" th:href="@{/style.css}">
<title>Test</title>
</head>
<body>
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
<th:block layout:fragment="content"></th:block>
<!-- 기본 템플릿 안에 삽입될 내용 End -->
</body>
</html>
중요한 거는 요 부분부터 이제 다른 하위 html이 이어서 작성하면 됨
<th:block layout:fragment="content"></th:block>
해당 부분이 타임리프에서 부모템플릿을 지정하는 부분
상위 html로는 layout.html을 지정
<html layout:decorate="~{layout}">
부모 템플릿의 이 부분을
<th:block layout:fragment="content"></th:block>자식에서는 이렇게 바꿈
<div layout:fragment="content" class="container my-3">
이렇게 자식쪽에서 교체하면 th:block의 부분이 div 엘리먼트로 교체됨
출처
728x90
'Programing > Spring Boot' 카테고리의 다른 글
| [Spring Boot 입문] 스프링 웹 개발 기초 (0) | 2023.01.08 |
|---|---|
| [SpringBoot 입문] 환경세팅 (0) | 2023.01.07 |
| [Spring Boot] static 디렉토리 (0) | 2023.01.01 |
| [Spring Boot] 서비스 (0) | 2023.01.01 |
| [Spring Boot] Root URL (0) | 2023.01.01 |
'Programing/Spring Boot' Related Articles
more
