인프런 커뮤니티 질문&답변
작성한 질문수
화면 이동 시 css 적용 안 되는 문제
해결된 질문
작성
·
505
2
부트스트랩 파일을 그대로 사용하고 있는데 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 · Spring · 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" /> 이와 같이 추가해주니 변경이 잘 되었습니다. 그렇다면 기존의
<link href="../../../../../../../Downloads/startbootstrap-personal-gh-pages/startbootstrap-personal-gh-pages/css/styles.css" rel="stylesheet" /> 이렇게 적용한 코드와 차이는 무엇인가요?
답변 1
0
안녕하세요 정보근입니다:)
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
감사합니다.