문제 상황
nestjs 환경에서 ejs, express-ejs-layouts 라이브러리를 사용하여 개발을 하고 있다.
메인페이지/ 목록 조회 페이지를 구현할 때까지는 CSS 적용에 문제가 있다는 것을 느끼지 못했다.
그러나 개인 유저 페이지를 구현하고 나니, 유저 개인 페이지에 CSS 가 적용되지 않는 것을 알게 됐다.
시도1
사진 좌측의 디렉토리 구조/폴더 경로를 변경해본다.
폴더를 새로 만들어서, 파일 위치를 변경해보았다.
이리저리 시도해보았지만 변함이 없었다.
여전히 어떤 페이지는 CSS 적용이 되고, 개인 유저페이지는 적용이 되지 않았다.
시도2
아래 블로그를 참고해보았다.
https://velog.io/@sungmo738/CSS-link%EA%B0%80-%EC%95%88%EB%90%A0%EB%95%8C
CSS link가 안될때
css를 link태그로 걸었는데 적용이 안될때가 있다.웹서버에서 캐시에 올려놓고 새로운 파일로 교체를 안해주기 때문에 생기는 문제다.문법적인 오류가 없는데도 안된다면 이 상황을 한번 의심해
velog.io
브라우저 캐시 지우기?
기존 사용하던 크롬에서 엣지로 변경해보아도 변함이 없었다.
시도3
CSS 경로 뒤에 ?ver0.1 을 붙여본다.
예를 들어,
하지만 변함이 없었다.
시도4
CSS 를 적용하는 주소를 바꾼다. 다음 문서를 보고 의심을 해보았다.
Spring mvc: css does not work when adding slash at the end of URL
I am new to Spring MVC and i am having a problem with CSS. When the URL ends with slash CSS does not work. link goes like this <link rel="stylesheet" href="themes/style.css"> mvc:resou...
stackoverflow.com
기존에 main.ts 의 ejs 경로는 다음과 같았다.
이때부터 뭔가 좀 이상함을 느꼈다.
그래서 css 경로를 다음과 같이 변경했다.
변경 전
변경 후
문제가 해결되었다.
알게 된 점
- CSS 경로가 잘못되어도 CSS가 일부 적용될 수 있다!
맨처음 경로에 문제가 있으리라 의심하지 않았다...
왜냐하면 기존의 메인페이지는 CSS가 잘 적용이 되었고, 검색 기능을 통한 유저 목록 조회 페이지에서도 적용이 되었기 때문이다.
새로 생성한 페이지에서는 적용이 안 되었을 뿐이었다.
새로 생성한 유저페이지의 ejs 파일의 문제인가? 이런 생각을 하면서,
다른 문제 규정 및 해법을 적용하려해서 문제 상황에 계속 놓여있었다.
CSS 적용에 문제가 생길 경우, 경로와 같은 가장 기본적인 것(문제가 쉽게, 자주 생길 수 있는 것)부터 체크하자.
댓글