화면 이동 시 css 적용 안 되는 문제
부트스트랩 파일을 그대로 사용하고 있는데 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
감사합니다.
Windows 환경에서 작업중
0
78
1
강의 자료 다운로드에 관해
0
160
2
도커 파일을 빌드 시킬때 오류가 발생하는데 무슨 에러인가요..
0
169
2
Admin 뷰 템플릿 유료화 여부 및 변경 사항 문의드립니다.
0
229
2
테스트 코드 작성 중 AssertionError 발생
0
259
4
메모리 크기
0
130
2
클래스 생성 강의 수강 중 오류 발생
0
126
1
리액트 연결
0
155
2
Docker Compose 배포 시 Jasypt 암호화된 속성 복호화 문제 해결 방법
1
286
2
도커로 크롬에서 프로그램 열기
0
304
2
DBeaver 연결부터 도커로프로젝트 빌드까지 안됩니다.
0
319
2
뷰 개발 파일 없음
0
149
2
fragment 분리 에러
0
126
1
admin 페이지에서 projectSkill 질문 있습니다
0
115
2
서버 배포 후 수정하려고 하면
0
291
2
docker-compose 파일 작성하기 질문 있습니다.
0
287
2
Admin 뷰개발-테이블 페이지와 관련한 질문드립니다.
0
186
1
Docker 데스크탑에서 push to Docker hub 를 클릭한 후 오류가 납니다...
0
382
3
ExperienceRepositoryTest 실행 오류
0
142
2
projectRepository assertion 오류 질문입니다.
0
189
1
테스트코드 실행중 오류와 경고에 관한 질문 입니다.
0
243
2
@PostCunstructer 를 사용하는 이유가 뭔가요?
0
281
2
환경변수 설정을 yml 아니라 properties로 해도 상관 없나요?
0
121
1
git 사용 오류 질문 드립니다
0
212
2