절대 경로로 templates/basic 하위 파일 열면 css 적용 안되는 현상
[질문 템플릿]
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>Answer 1
0
안녕하세요, 인프런 AI 인턴입니다. 아무개김님.
HTML 파일을 templates 아래에 두고 브라우저에서 직접 파일을 열어서 확인하셨을 때, CSS가 제대로 적용되지 않는 문제는 Thymeleaf와 연관이 있을 수 있습니다. Thymeleaf는 Spring Boot 애플리케이션 내에서 템플릿 파일을 사용해 서버 측에서 데이터를 뷰에 렌더링하는 역할을 합니다. 따라서 로컬 파일 경로를 통해 직접 열 경우, Thymeleaf가 사용되는 맥락이 아니므로 이런 문제가 발생할 수 있습니다.
Spring Boot에서 static 폴더 아래의 정적 리소스들이 웹 애플리케이션의 루트 경로로 공개됩니다. 따라서 href="/css/bootstrap.min.css" 형태로 설정하셔야 정상적으로 적용될 수 있습니다.
다음과 같은 링크들에서 관련된 답변을 확인해보실 수 있습니다:
- CSS 경로 못 찾는 문제
- 템플릿에 CSS 적용문제
이 외에도, 실행 중인 서버에 접속하여 페이지를 확인하셔야 Thymeleaf가 적용되어 동적으로 변환된 페이지를 올바르게 확인할 수 있습니다. 아무개김님께서 서버를 구동시키고 localhost:포트번호/경로 형식으로 파일에 접근하시면, 원하는 결과를 얻으실 수 있을 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
servlet과 container에 대한 질문입니다
0
19
1
api를 어느 컨트롤러에 작성해야하는지는 어떤 기준으로 해야하나요?
0
61
1
jsp 의존성 수정 요청
0
75
2
요즘 웹 서버가 주로 사용되는 이유는 SPA 구조 때문일까요 ?
0
142
1
save() 메서드 문의
0
65
1
request-body-json
0
83
2
MVC 패턴의 적용 단위
0
93
1
RequestMapping을 이용한 핸들러, 어댑터
0
118
2
save 후 결과화면
0
86
2
jsp를 이용한 view
0
97
1
application.properties에 debug 추가해도 결과가 똑같습니다.
0
174
1
수업 코드 제공 관련 문의
0
96
2
RequestMappingHandlerAdapter의 Controller 호출 과정
0
98
3
파일 오픈 시
0
68
1
스프링 배치 관련
0
77
1
@RequestParam의 defaultValue가 blank 값도 처리하는 지 여부
0
112
1
postman으로 /request-body-json-v1 호출시 500 error
0
94
1
프론트엔드와 백엔드의 mvc, rest api에 대한 질문
0
76
1
모델의 역할과 계층 분리에 대한 이해 차이 + 추가질문
0
111
1
console log 출력 관련 질문입니다.
0
73
1
애플리케이션이 실행 되지 않습니다 ㅠㅠㅠ
0
137
1
html 변경하는 부분 적용 문제
0
100
1
한글 깨짐
0
75
2
메서드 추출에 대해서 궁금한게 있습니다
0
65
1