css 적용과 불러오지 못할 경우

생각보다 단순한 부분인데 쉽게 찾아내질 못해서 오랜 시간을 허비했다. 다음에도 이런 경우가 생긴다면 잊지 않기 위해 기록해두려고 한다.

 

css 적용

나만 그런지는 모르겠지만 thymeleaf-layout-dialect 의존성을 주입 받으면서 css를 어떻게 적용해줘야할지 감이 하나도 잡히지 않았었다. layout을 나누기 전엔 헤더 부분에 link를 삽입했었는데 layout을 나누니 헤더 부분에 어떻게 추가해줘야할지 몰랐었다.

 

<!-- css -->
<th:block layout:fragment="css"></th:block>

생각보다 단순했다. fragment 코드를 써주면 해결됐다. 

 

<th:block layout:fragment="css">
    <link rel="stylesheet" type="text/css" th:href="@{/css/user/sign-up.css}">
</th:block>

이렇게 추가해서 css 파일을 불러오는 것은 해결할 수 있었다.

 

css 파일이 불러와지지 않았다

두번째로 부딪혔던 것은 css 파일이 불러와지지 않았다. 그래서 생각한 것이 현재 나는 spring security를 적용 중이어서 해당 경로의 인가를 허용해줘야 된다고 생각했다. 근데 다시금 생각해보니 404 에러였는데 403 forbidden이 아니었기에 이 문제는 아니란 것을 이해했다.

 

그래서 chat gpt의 도움도 받아보고 다른 여러 사람의 블로그들을 참고했는데 하나도 도움이 된 것이 없었다. 지쳐가던 찰나에 서버 쪽에 문제는 아니고 분명 view 단이 문제라 생각했다. 따라서 사람들의 글을 참고해서 수정했던 yml 파일을 원상복구해봤다. 그러니 바로 해결이 되었다. 혹시나도 404 문제로 css 파일이 불러와지지 않는다면 사람들이 기본적으로 css 파일을 불러오도록 경로를 바꿔봐라라고 수정했을 수도 있다. 그냥 맨 처음의 상태로 돌려서 확인해보자.