카테고리

질문 & 답변
세부 분야

백엔드
해결 여부

해결됨

화면 이동 시 css 적용 안 되는 문제

24.01.22 07:25 작성 조회수 130

부트스트랩 파일을 그대로 사용하고 있는데 index화면은 css가 잘 적용되어 있으나 resume와 projects 로 페이지가 넘어갈 때 css 적용이 안 됩니다.

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<div th:replace="~{/presentation/fragments/fragment-head :: head}"></div>
    <body class="d-flex flex-column h-100">
        <main class="flex-shrink-0">
            <!--      타임리프가 해당 경로에 있는 :: 뒤 이름을 찾아서 이자리에 교체해줌       -->
            <div th:replace="~{/presentation/fragments/fragment-navigation :: navigation}"></div>
            <header class="py-5">
                <div class="container px-5 pb-5">
                    <div class="row gx-5 align-items-center">
                        <div class="col-xxl-5">
                            <!-- Header text content-->
                            <div class="text-center text-xxl-start">
                                <div class="badge bg-gradient-primary-to-secondary text-white mb-4"><div class="text-uppercase">Kotlin &middot; Spring &middot; SQL</div></div>
                                <div class="fs-3 fw-light text-muted">캐치프레이즈 넣어보기 </div>
                                <h1 class="display-3 fw-bolder mb-5"><span class="text-gradient d-inline">자기소개 넣기</span></h1>
                                <div class="d-grid gap-3 d-sm-flex justify-content-sm-center justify-content-xxl-start mb-3">
                                    <a class="btn btn-primary btn-lg px-5 py-3 me-sm-3 fs-6 fw-bolder" href="../../../../../../../Downloads/startbootstrap-personal-gh-pages/startbootstrap-personal-gh-pages/resume.html">Resume</a>
                                    <a class="btn btn-outline-dark btn-lg px-5 py-3 fs-6 fw-bolder" href="../../../../../../../Downloads/startbootstrap-personal-gh-pages/startbootstrap-personal-gh-pages/projects.html">Projects</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-7">
                            <!-- Header profile picture-->
                            <div class="d-flex justify-content-center mt-5 mt-xxl-0">
                                <div class="profile bg-gradient-primary-to-secondary">
                                    <!-- TIP: For best results, use a photo with a transparent background like the demo example below-->
                                    <!-- Watch a tutorial on how to do this on YouTube (link)-->
                                    <img class="profile-img" src="assets/profile.png" alt="..." />
                                    <div th:replace="~{/presentation/fragments/fragment-dots :: dots1}"></div>
                                    <div th:replace="~{/presentation/fragments/fragment-dots :: dots2}"></div>
                                    <div th:replace="~{/presentation/fragments/fragment-dots :: dots3}"></div>
                                    <div th:replace="~{/presentation/fragments/fragment-dots :: dots4}"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>






                </div>
            </header>
            <!-- About Section-->
            <section class="bg-light py-5">
                <div class="container px-5">
                    <div class="row gx-5 justify-content-center">
                        <div class="col-xxl-8">
                            <div class="text-center my-5">
                                <h2 class="display-5 fw-bolder"><span class="text-gradient d-inline">About Me</span></h2>
                                <p class="lead fw-light mb-4"></p>
                                <p class="text-muted" th:each = "introduction : ${introductions}"th:text ="${introduction.content}">Lorem ipsum dolor sit amet</p>
                                <div class="d-flex justify-content-center fs-2 gap-4">
                                    <a class="text-gradient" href="#!" th:each = "link : ${links}"th:href ="${link.content}"><i class="bi bi-github" th:class ="|bi bi-${link.name}|"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        <!-- Footer-->
        <div th:replace="~{/presentation/fragments/fragment-footer :: fooer}"></div>
        <!-- Bootstrap core JS-->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
        <!-- Core theme JS-->
        <script src="../../../../../../../Downloads/startbootstrap-personal-gh-pages/startbootstrap-personal-gh-pages/js/scripts.js"></script>
    </body>
</html>

css 파일 건드리지 않고 그대로 두었는데 무엇이 문제인지 궁금해 질문드립니다.

참고로 resume 화면상에서 href 설정을 <link th:href="@{/css/styles.css}" rel="stylesheet" /> 이와 같이 추가해주니 변경이 잘 되었습니다. 그렇다면 기존의

입문자를 위한 Spring Boot with Kotlin - 나만의 포트폴리오 사이트 만들기

[실습] Thymeleaf - 템플릿 수정(index)

강의실 바로가기

답변 1

답변을 작성해보세요.

정보근

지식공유자

2024.01.22

안녕하세요 정보근입니다:)

presentation 디렉토리의 index.html 소스 코드를 올려주신 것으로 보이는데요.

만약 위와 같은 상태에서 index 화면에는 css가 잘 적용되는데, resume, projects에서만 안 된다면

resume.html, projects.html 상단에 아래 replace 코드가 있는지 확인해주세요.

<div th:replace="~{/presentation/fragments/fragment-head :: head}"></div>

위 코드는 현 html 소스 코드로 fragmeht-head.html의 th:fragment="head"가 포함된 블록을 가져오는 코입니다.

fragmeht-head.html의 내용을 보시면 아래 코드와 같은 라인이 있을텐데요.

<link href="css/styles.css" rel="stylesheet" />

위 코드가 각 index.html, resume.html, projects.html에 포함되어 있어야 제대로 css 파일을 불러올 수 있습니다. resume에 직접 css 경로를 추가해주면 적용이 된다는 걸 봤을 때 replace 코드가 누락되어있을 가능성이 커보입니다.

또 th:href="@{/css/styles.css}"는 절대 경로를 지정해주는 타임리프 문법입니다. 기본값으로 "src/main/resources/static 디렉토리부터 경로 찾기를 시작하게 됩니다. 따라서 실제 경로는 "src/main/resources/static/css/style.css"와 같을거고요. 항상 "src/resources/static" 이하부터 경로를 찾기 때문에 절대 경로라고 합니다.

반면 작성해주신 "../../../css/style.css"와 같은 방식은 상대 경로입니다. 참고로 ".."은 상위 디렉토리를 의미하고, "."은 현재 디렉토리를 의미합니다.

<link href="../../../../../../../Downloads/startbootstrap-personal-gh-pages/startbootstrap-personal-gh-pages/css/styles.css" rel="stylesheet" />

소스 코드 상에 위와 같이 작성해주신 걸로 보아, 다운받은 부트스트랩 파일을 프로젝트 디렉토리 내부로 가져오지 않고, 다운받은 위치 그대로 경로를 지정해주신 것으로 보입니다. 이렇게 할 경우 내 컴퓨터에 있는 경로를 지정해준 것이기 때문에, 나중에 프로젝트를 서버로 올리면 해당 부트스트랩 파일을 찾을 수 없을 거에요.

Presenation 개발 섹션의 "Thymeleaf - 부트스트랩 템플릿" 강의를 보시면 템플릿을 다운 받은 뒤 프로젝트 디렉토리 안으로 복사하는 과정이 있으니 참고해주세요.

참고로 작성해주신 경로 지정에 대해 설명드리자면, 현 디렉토리에서 상위 디렉토리로 7번 이동했다가, 다시 Downloads 디렉토리 이하로 경로를 파고 들어가 style.css를 찾게 됩니다. 만약 style.css의 위치가 그대로 있어도, 현 파일의 위치가 한 뎁스 올라가거나 내려간다면, style.css 파일과의 상대적인 위치도 바뀌게 됩니다. 그럼 제대로 파일을 찾을 수 없겠지요.

결론적으로는 템플릿 파일을 프로젝트 디렉토리의 src/resources/static 내부로 옮기고, 절대 경로로 지정해주세요. 그렇게 해야 프로젝트에서 안정적으로 css 경로를 찾을 수 있습니다.

궁금하신 것이 만족스럽게 해결되셨는지 모르겠네요. 수강 중 어려움이 있으시다면 아래 깃허브 리포지토리에서 현재 수강중인 강의 제목과 같은 브랜치를 찾아서 내용을 비교해보시면 도움이 될 거에요. 추가 질문도 언제든지 편하게 해주셔도 됩니다.

https://github.com/infomuscle/portfolio-yongback

감사합니다.

씨앗

화면 이동 시 css 적용 안 되는 문제

이 글과 비슷한 Q&A

contextLoads() 테스트 오류 질문드립니다.

junit5쓴다는건가요ㅠ

프록시와 연관관계 관리-프록시 질문있습니다.

테스트 더블의 경계가 잘 이해되지 않습니다.