[미니 프로젝트] vol2. 'UNIVerse' css,js 연동 오류 문제 해결법

• 웹사이트 개발을 위해 html 파일에 css, js를 적용하려고 하는데 자꾸 Not Found 404 오류가 났음

 

내가 시도해본 여러가지 시행착오

1. css, js 하이퍼링크에 /static을 추가해서 실행해보았다.

-> 실패..

 

2. css,js 하이퍼링크에 ../static을 추가해서 실행해보았다.

-> 실패

 

파일도 경로도 틀린 게 없는데 내가 무언가를 놓친거 같았다.

그래서 왜 그럴까나 하고 반나절내내 여러가지 시도도 해보고 새로고침도 해보고 한 결과

해결방법을 찾았다.

 

application.properties

파일에 이렇게 적어주니깐 css, js가 적용되었다!

 

thymeleaf:
prefix=classpath: templates/
suffix: .html
check-template-location: true
cache: false
mvc:
static-path-pattern: "/static/**"

 

   <!-- slider stylesheet -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />

    <!-- bootstrap core css -->
    <link href="/css/bootstrap.css" type="text/css"  rel="stylesheet" />
    <!-- fonts awesome style 지웠음-->
    <link href="/css/font-awesome.min.css" rel="stylesheet" />

    <!-- Custom styles for this template -->
    <link href="/css/style.css" type="text/css" rel="stylesheet" />
    <!-- responsive style -->
    <link href="/css/responsive.css" type="text/css" rel="stylesheet" />
    
    .
    .
    .
    script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="/js/custom.js"></script>
<!-- Google Map -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTn-rLZwokGE6n9Hb6Zj1MaPF2ngxwwE4&callback=myMap"></script>
<!-- End Google Map -->