단 하나의 맥락
: 표준 Html 구조로 템플릿 형식 통일, block P/I로 변하는 부분만 작성
-
Semiflow Bundle
- 표준 html 구조 확인
- 표준 layout.html 작성
- 기존 템플릿에서 개별 적용되던 CSS를 제거하고, P/I가 될수 있도록 수정
-
자각
표준 html 구조를
- layout.html에 신규 작성한다
- html 양식을 넣고
- 헤드에는 메타 태그, 부트스트랩 CSS, 일반 CSS 등을 넣고
- 바디는 <th:block layout:fragment="content"></th:block> 을 넣어, 이 부분에 기 템플릿을 삽입할 수 있도록 한다
기 template과 연동하기 위해
- question_list.html과 question_datail에서
- 최상단 CSS를 지운다
- <html layout:decorate="~{layout}"></html> 내부에
- <div layout:fragment="content" class="container my-3"></div> 를 작성함으로써 P/I가 된다
- <div layout~> 안에는 기존 <table></table> 이 변경 없이 그대로 들어간다
<!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>Hello, sbb!</title>
</head>
<body>
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
<th:block layout:fragment="content"></th:block>
<!-- 기본 템플릿 안에 삽입될 내용 End -->
</body>
</html>
link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">
<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container my-3">
<table class="table">
(... 생략 ...)
</table>
</div>
</html>
<link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">
<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container my-3">
<h2 class="border-bottom py-2" th:text="${question.subject}"></h2>
(... 생략 ...)
</form>
</div>
</html>
'포트폴리오 > SPRINGBOOT 옛날' 카테고리의 다른 글
| 2-16 : 공통 템플릿 fragement (0) | 2022.10.03 |
|---|---|
| 2-15 : Create와 Form (5) | 2022.10.02 |
| 2-13 : BootStrap (2) | 2022.10.02 |
| 2-12 : Static Directory and CSS (1) | 2022.10.02 |
| 2-11 : Answer Create (3) | 2022.10.01 |