1. 공통 상단 내용, 하단 내용을 jspf 파일로 처리
- jsp파일에서 공통된 상단,하단 부분의 코드를 head.jspf와 foot.jspf로 작성하여 include
- (include할 jspf파일의 위치는 현재 jsp파일위치 기준으로 작성
<%@ include file="../common/head.jspf" %>) - 공통 상단 내용, 하단 내용을 jspf 파일로 처리 깃허브 링크
2. 공통 css, js, 폰트 적용 (눈누에서 가져옴)
- css, javascript, img 등의 정적 자료들은 resources/static/**에 넣어야 한다.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" th:href="@{/css/style.css}">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Document</title>
</head>-
spring-boot-starter-web모든 작업을 미리 해주기 때문에 따로 설정없이 사용할 수 있다.
-
외부 폰트를 적용하기위해 공통 css파일에 아래코드를 추가
@font-face {
font-family: 'LotteMartDream';
font-style: normal;
font-weight: 300;
src:
url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff2')
format('woff2'),
url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff')
format('woff');
}3.프론트 엔드 라이브러리 불러오기
<!-- 제이쿼리 불러오기 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- 테일윈드 불러오기 -->
<!-- 노말라이즈, 라이브러리까지 -->
<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
<!-- 폰트어썸 불러오기 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />- jsp파일의 head태그안에 작성하여 불러오기
- 테일윈드 치트시트를 이용해 레이아웃 설정
- tailwind jit cdn 구글검색 후 추가(https://unpkg.com/tailwindcss-jit-cdn 찾는법)
