728x90
화면 개발을 하다 보면 <head> 태그를 반복적으로 작업해야 하는 경우가 있습니다. 각 페이지의 meta 정보를 한곳에서 통합하여 관리하면 개발과 유지보수가 더 편리해 집니다. 오늘은 head 태그 통합하는 방법에 대해 공유하고자 합니다.
1. css 통합
- css 들을 한곳으로 모을땐, style.css 파일을 만들어 @import 하면 됩니다.
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600");
@import "reset.css";
@import "header.css";
@import "globals.css";
@import "navigation.css";
@import "search-bar.css";
@import "friends.css";
@import "chats.css";
@import "find.css";
@import "more.css";
@import "profile.css";
@import "chat.css";
@import "bigScreen.css";
@import "mobile.css";
@import "login.css";
@import "modal.css";
2. head.html 생성
- head.html 파일을 만들어 공통 태그를 작성합니다.
<!DOCTYPE html>
<html lagn="ko" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="headFragment">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link th:href="@{/css/styles.css}" rel="stylesheet"/>
<link rel="icon" th:href="@{/favicon.ico}" type="image/x-icon">
<script th:src="@{/js/jquery-3.7.1.min.js}"></script>
<script th:src="@{/js/common.js}"></script>
<script src="https://kit.fontawesome.com/a9eb1f10be.js" crossorigin="anonymous"></script>
<title>깨톡</title>
</head>
</th:block>
</html>- 공통 스크립트 및 스타일을 작성합니다.
3. 사용
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:replace="layout/fragments/head.html :: headFragment"/>
<body> ...- 각 페이지 상단에 th:replace 를 입력합니다.
감사합니다.
728x90
'프로그래밍 언어 > Thymeleaf' 카테고리의 다른 글
| [Thymeleaf] 속성을 이용해 Element 넘기기 (0) | 2024.06.26 |
|---|---|
| [Thymeleaf] img 태그 onerror 스크립트에서 관리하기 (0) | 2024.05.23 |
| [Thymeleaf] 다양한 변수 표현방법 (0) | 2024.05.14 |
