10분 14초경 templates/basic/items.html이... - 인프런

스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술

상품 목록 - 타임리프

10분 14초경 templates/basic/items.html이 css가 제대로 적용이안됨

작성

163

수정됨

static폴더에 있는 html파일들은 부트스트랩이 강사님의 화면처처럼 잘나오나

templates/basic/items.html이 부트스트랩 css가 제대로

로 적용이안됩니다.templates/basic/items.htm의 코드입니다

다른 파일들도 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>
                <td><a
                        href="item.html">1</a></td>
                <td><a
                        href="item.html">테스트 상품1</a></td>
                <td>10000</td>
                <td>10</td>
            </tr>
            <tr>
                <td><a
                        href="item.html">2</a></td>
                <td><a
                        href="item.html">테스트 상품2</a></td>
                <td>20000</td>
                <td>20</td>
            </tr>
            </tbody>
        </table>
    </div>
</div> <!-- /container -->
</body>
</html>

spring mvc

답변 1

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. peter님.

현재 templates/basic/items.html에서 Bootstrap CSS가 제대로 적용되지 않는 문제를 겪고 계신 것 같습니다. 이 문제는 종종 참조 경로나 정적 리소스 설정 이슈에서 발생하곤 합니다. 아래와 같이 문제 해결을 위한 몇 가지 요인을 고려해보세요:

CSS 파일 경로 확인: th:href 속성을 통해 CSS 파일을 정확하게 참조하고 있는지 확인하세요. @{/css/bootstrap.min.css} 형태로 사용한다면, 이는 스프링 부트가 기본 제공하는 정적 리소스 핸들러를 통해 /static 디렉토리 아래에 있는 파일을 찾습니다. resources/static/css/bootstrap.min.css 위치에 파일이 제대로 있는지 확인하세요.
테스트 방식: 직접 로컬 서버를 실행하여 웹 브라우저에서 결과를 확인해 보시는 것이 중요합니다. 절대경로로 localhost:8080을 통해 접속해 보시고, F12(개발자 도구)를 눌러 콘솔 에러 메시지를 확인해 보세요. 리소스가 로드되었는지 네트워크 탭에서 확인할 수 있습니다.
캐시 문제: 브라우저 캐시가 남아있어 변경점이 반영되지 않을 수 있습니다. Ctrl + F5 (또는 Cmd + Shift + R for Mac)로 캐시를 강제 새로고침 해보세요.

비슷한 문제에 대한 이전 질문 및 답변을 확인할 수 있는 링크가 도움이 될 수도 있습니다:

CSS 경로 못 찾는 문제 - 이 답변에서는 static 폴더 내 CSS 파일이 templates에서 어떻게 참조될 수 있는지를 설명하고 있습니다.
CSS가 적용되는 이유 - 스프링의 기본 리소스 핸들링에 의해 정적 리소스를 찾아가는 원리에 대해 상세히 설명합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

peter

질문자

여전히 잘안되고 있습니다

peter

질문자

직접 파일을 여는 방식이 아니면 제가 진행하는 모든 실습파일에서 부트스트랩이 적용되지 않습니다.

인프런 커뮤니티 질문&답변

10분 14초경 templates/basic/items.html이 css가 제대로 적용이안됨