문제
문제 상황은 간단하였습니다.
vscode preview 화면으로 잘 적용이 되던 css가 Tomcat 실행후 보는 실제 웹 브라우저 화면에는 모두 적용이 되지 않는 문제가 있었습니다.
당연히 CSS 경로상의 문제라고 생각했는데, 기존에 알고 있던 지식으로는 해결을 하지 못해서 검색해보았습니다.
해결
방법
해결에 도움을 준 곳은 바로 여기입니다. 역시 없는 에러가 없는 stackoverflow...
https://stackoverflow.com/questions/29980538/css-not-working-in-jsp
예상대로 경로 문제였고, 우선 해결법부터 알려드리면 아래와 같습니다.
아래와 같은 폴더에서 main.css를 header.jsp에 적용한다고 가정해보겠습니다.
이 때 css파일을 불러올 때 작성한 것은 다음과 같습니다.
<link rel="stylesheet" href="../../resources/css/main.css">그리고 해결한 방법은 다음과 같습니다.
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/main.css">결국은 앞에 ${pageContext.request.contextPath}를 추가해주어야 합니다.
원인
상대경로 절대경로 문제였습니다. vscode에서 화면 preview로 보았을 때는 현재 파일을 기준으로 css 파일을 찾아나가기에 문제가 되지 않지만, JSP에서는 모든 것의 기준은 contextPath가 되어야 됩니다. 그렇기에 가장 좋은 것은 모든 경로 앞에 contextPath를 붙여주는 것이 좋습니다.
이 contextPath의 경우 삽입하는 방법이 Scriptlet으로 넣는 방법이 있고 el 표현식으로 쓰는 방법이 있습니다.
여기서는 el 표현식으로 사용했고 만약 Scriptlet으로 넣고 싶다면 <%=request.getContextPath() %>로 작성하면 됩니다.
정리
절대경로 contextPath 기준으로 ${pageContext.request.contextPath} 써주자!
참고
