인프런 커뮤니티 질문&답변
작성한 질문수
절대 경로로 templates/basic 하위 파일 열면 css 적용 안되는 현상
해결된 질문
작성
·
21
·
수정됨
0
[질문 템플릿]
1. 강의 내용과 관련된 질문인가요? (예/)
2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/)
3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/)
[질문 내용]
templates 에 css 추가하여 해결 했습니다.
html 하위에 ~~~.html 파일들은 css 가 적용되어 열립니다.
templates/baisc 하위 ~~~.html 은 이렇게 뼈만 앙상하게 나오는데 강의 에서는 templates 의 하위 html 파일에서도 css 폼이 적용 되어 나오는데 따로 설정 방법이나 변경 사항이 있는걸까요 ?
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link th:href="@{/css/bootstrap.min.css}"
href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="max-width: 600px">
<div class="py-5 text-center">
<h2>상품 목록</h2>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary float-end"
onclick="location.href='addForm.html'"
th:onclick="|location.href='@{/basic/items/add}'|"
type="button">상품 등록</button>
</div>
</div>
<hr class="my-4">
<div>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>상품명</th>
<th>가격</th>
<th>수량</th>
</tr>
</thead>
<tbody>
<tr th:each="item : ${items}">
<td><a href="item.html" th:href="@{/basic/items/{itemId}(itemId=${item.id})}" th:text="${item.id}">회원id</a></td>
<td><a href="item.html" th:href="@{|/basic/items/${item.id}|}" th:text="${item.itemName}">상품명</a></td>
<td th:text="${item.price}">10000</td>
<td th:text="${item.quantity}">10</td>
</tr>
</tbody>
</table>
</div>
</div> <!-- /container -->
</body>
</html>답변 1
0
안녕하세요, 인프런 AI 인턴입니다. 아무개김님.
HTML 파일을 templates 아래에 두고 브라우저에서 직접 파일을 열어서 확인하셨을 때, CSS가 제대로 적용되지 않는 문제는 Thymeleaf와 연관이 있을 수 있습니다. Thymeleaf는 Spring Boot 애플리케이션 내에서 템플릿 파일을 사용해 서버 측에서 데이터를 뷰에 렌더링하는 역할을 합니다. 따라서 로컬 파일 경로를 통해 직접 열 경우, Thymeleaf가 사용되는 맥락이 아니므로 이런 문제가 발생할 수 있습니다.
Spring Boot에서 static 폴더 아래의 정적 리소스들이 웹 애플리케이션의 루트 경로로 공개됩니다. 따라서 href="/css/bootstrap.min.css" 형태로 설정하셔야 정상적으로 적용될 수 있습니다.
다음과 같은 링크들에서 관련된 답변을 확인해보실 수 있습니다:
- CSS 경로 못 찾는 문제
- 템플릿에 CSS 적용문제
이 외에도, 실행 중인 서버에 접속하여 페이지를 확인하셔야 Thymeleaf가 적용되어 동적으로 변환된 페이지를 올바르게 확인할 수 있습니다. 아무개김님께서 서버를 구동시키고 localhost:포트번호/경로 형식으로 파일에 접근하시면, 원하는 결과를 얻으실 수 있을 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
https://inf.run/EX8SW
이거로 해결 봣습니다.
tmplates/css 하위에 css 파일 및 디렉토리 추가하였습니다