thymeleaf에서 공통 부분의 CSS가 적용되지 않음

4280 단어 자바spring-bootThymeleaf

소개



thymeleaf layout dialect 기능을 사용한 사이트에서 공통 부분의 css가 적용되지 않는 사안이 발생했으므로, 그 대처법에 대해 소개합니다.

환경



OS: macOS Catalina 10.15.6
JDK:14.0.1
Spring Boot 2.3.3
jquery 3.3.1-1
bootstrap 4.2.1

오류 개요



공통 부분에 css가 성공적으로 적용되면 아래 그림과 같이 화면 상단에 짙은 녹색 헤더, 로고, 검색 창이 표시됩니다.


이번, 다른 페이지보다 깊은 계층에 html 파일을 작성, 저장해 실행한 곳 아래와 같이 되었습니다.

공통 부분에 포함되어 있는 네비게이션 바, 로고, 검색창이 표시되어 있으므로, thymeleaf layout dialect 기능 자체는 적용되고 있는 것 같습니다만, 공통 부분의 css가 적용되고 있지 않습니다.



사용 파일 계층



이번에 css가 적용되지 않은 페이지는 빨간색 테두리 HTML로 작성.
css가 적용된 페이지와는 다른 계층이므로, css에의 패스가 적절하지 않은 것에 의한 사건이 아닌가?라고 필자는 가정했습니다.



개발자 도구에 적용된 CSS 경로를 확인합니다.



개발자 도구에서 이 페이지가 어떤 경로로 css에 액세스하는지 확인합니다.

html 파일에는 'css/template.css'가 있지만 실제로는 'http://localhost:8080/mypage/css/template.css "
그리고 css 파일이 저장되지 않은 디렉토리에 액세스하려고합니다.



공통 부분 "template.html"의 내용 수정



공통 부분의 html인 "template.html"의 head 요소 안에 있는,<link th:href="@{css/template.css}" rel="stylesheet"></link> 아래에 다음을 추가합니다.<link th:href="@{../css/template.css}" rel="stylesheet"></link>
"이용 파일의 계층 구조"에서 설명한 것처럼 "deleteUser.html"은 CSS가 적용된 HTML보다 1 단계 아래의 계층 구조에 위치하므로 "th : href"에 ../ (1階層上の)를 추가하고 "deleteUser .html '에서 css에 액세스 할 수 있습니다.

template.html
<head>
    <meta charset="UTF-8"></meta>

    <link th:href="@{/webjars/bootstrap/4.2.1/css/bootstrap.min.css}" rel="stylesheet"></link>
    <script th:src="@{/webjars/jquery/3.3.1-1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/4.2.1/js/bootstrap.min.js}"></script>

    <link th:href="@{css/template.css}" rel="stylesheet"></link>
    <link th:href="@{../css/template.css}" rel="stylesheet"></link>

    <script src="https://kit.fontawesome.com/665f18a48e.js" crossorigin="anonymous"></script>


    <title>template</title>
</head>

저장하고 실행



CSS가 적용되었습니다.

super-csv를 사용한 csv 출력 처리
Thymeleaf로 JavaScript 생성

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage