안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)
yeonee 블로그 : 네이버 블로그
예쁘고 맛있게 먹고 건강하게,강인하지만 온화하게 행하라. ※맛스타운스타일상 인스타 www.instagram.com/s2._.y25n ※맛집감성일상 유튜브https://youtube.com/channel/@S2_yeonee 티스토리https://yeoneeluv.tistory.co
blog.naver.com
제가 만든 페이지는 sns 알림을 확인하는 페이지로 jsp에 css를 link하여 사용하고 있었어요.
잘 쓰고 있다가 협업을 하느라 조원의 파일들을 git으로 한 번 pull 한 뒤, 이전과 똑같은 경로로 사용하려니깐 안되더라구요.
jsp 내용만 나오고 정말....
구글링 하면서 다양한 방법으로 시도하느라 계속 절대경로, 상대경로, ${path} 등 여러가지 다 써보는데....
정말 2-30분째 안되다가 '${pageContext.request.contextPath }' 추가로 해결하였습니다.
1. 추가하고자 하는 css 파일의 경로 확인
먼저 resoureces 폴더의 제가 추가하고자 하는 'Dot_Alarm.css'인 css 파일의 위치입니다.
2. Alarm.jsp에 css 연동
내가 추가하고자 하는 css의 경로를 찾아 올바르게 연동시키기 위해 '${pageContext.request.contextPath}'를
기존에 적었던 경로의 맨 앞에 추가하여 css 연동 오류 문제를 해결하였습니다.
<head>
<link href="${pageContext.request.contextPath}/resources/css/Dot_Alarm.css" rel="stylesheet" />
</head>
이렇게 css가 적용되었습니다.
그런데 왜 사진도 로고도 다 안뜰까요...?
이미지 파일 불러오기 오류도 위와 같은 방식으로 해결할 수 있습니다.
3. 이미지 파일 불러오기 오류 해결
<a>
<img class="back-icon" src="${pageContext.request.contextPath }/resources/images/back-icon.png" />
</a>그런데 2..... 아니 사진이 이렇게 많은데 일일이 다 붙여주라고?!
너무 귀찮잖아요?
그래서 뭐든 짧고 가독성 있는 것을 좋아하는 개발자들을 위한 또 다른 방법은 최상단에 c:set으로 var을 선언하여 사용해주는 방법이 있답니다.
<c:set var="contextPath" value="${pageContext.request.contextPath }" />** var 명칭은 변수명으로 다른 단어로 해도 상관없지만, 어느정도 타인이 보고 의미를 파악하고 명시할 수 있는 단어를 사용하는 것이 좋습니다.
위의 var 변수 선언 방식을 이용하여 아래와 같이 좀더 가독성이 좋고 간결해진 깔끔한 코드를 작성할 수 있답니다.
<img class="back-icon" src="${contextPath}/resources/images/back-icon.png" />
짜잔~!
모두 변경해준 뒤 새로고침을 해보니 완성된 홈페이지 모습입니다.^^
'｡*:･ﾟ☆･ﾟschedule･ﾟ*:･ﾟ★･:*:･☆ *:･ﾟ★ > 활용해본 코드 적용 예시 (◍•ᴗ•◍)❤' 카테고리의 다른 글
| [SpringBoot] 게시글 상세조회 ajax 비동기식 조회하기 (0) | 2023.09.15 |
|---|---|
| [SpringBoot] SpringBoot에서 Websocket 사용하기 (0) | 2023.09.03 |
| [Spring boot] 스프링부트 웹소켓 SockJs 구성하기 (0) | 2023.09.01 |
| 인스타그램 알람 기능 구현 - 모달창 크기 조절, 내용 제한(기본틀 및 활용예시) (0) | 2023.08.24 |
| 인스타그램 알람 기능 구현 - 모달창 크기 조절, 내용 제한 (0) | 2023.08.22 |
