spring - 외부 css/javascript 로딩

spring - 외부 css/javascript 로딩

2023. 3. 17. 10:21ㆍSpring

위치 : static 폴더 아래 (css/js/img)

외부 css와 html 연결 시 link 태그 사용

title 태그 아래 작성

<link rel="stylesheet" href="/css/test.css">

href 작성 시 주의!

ccs/js 기준 폴더 : static에 접근하려면 무조건 맨 앞에 / 있어야 된다.

fragment 사용 시 외부 css, js 연결하기

fragment 사용 시 위와 같이 css/script 연결 태그들이 th:block 밖에 있기 때문에 적용 안 됨.

그리고 화면 따라 css, javascript 매번 바뀌기 때문에 css, javascript도 연결이 바뀔 수 있게 layout.html에 아래 코드 추가

css 코드 위치 : </head> 전

<th:block layout:fragment="content_css"></th:block>

js 코드 위치 : </body> 태그 전

<th:block layout:fragment="content_js"></th:block>

fragment.html에는 아래와 같이 css 불러오는 th:block / content 불러오는 th:block / js 불러오는 th:block 순서대로!

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
   xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
   layout:decorate="~{fragment/layout}">

<!-- 연결해야 할 외부 css 파일 -->
<th:block layout:fragment="content_css">
	<link rel="stylesheet" href="/css/test.css"> <!-- 외부 css 연결하는 코드를 block 안에 작성 layout에서 같이 열어줌 -->
</th:block>


<th:block layout:fragment="content">
	<div class="testDiv">fragment 사용 시 외부 css, js 연결하기</div>
</th:block>

<!-- 연결해야 할 외부 js 파일-->
<th:block layout:fragment="content_js">
	<script type="text/javascript" src="/js/test.js"></script> <!-- 외부 js 연결하는 코드를 block 안에 작성 layout에서 같이 열어줌 -->
</th:block>


</html>

'Spring' 카테고리의 다른 글

게시글 페이징 처리 (0)	2023.03.20
BootStrap (반응형 웹 사이트) (0)	2023.03.17
Spring 화면 분할 (0)	2023.03.16
Spring 게시판 프로젝트 (0)	2023.03.15
Spring 데이터 넘기고 받기(상세) (0)	2023.03.15

📚개발 복습 노트

📚개발 복습 노트

태그

최근글

댓글

공지사항

아카이브

'Spring' 카테고리의 다른 글

관련글

티스토리툴바