게시판 스킨 html 파일 안의 코드에서 상대경로
| CMS/프레임워크 | Rhymix 1.9 |
|---|---|
| 개발 언어 | PHP 7.2 |
모바일 게시판 스킨의 _list.html 파일 속의
<div class="thumb-image tbi" style="background-image: url('./images/no_thumb.png')">
skin
_list.html
skin -> images
no_thumb.png
위와 같은 경로에 파일이 위치해 있는데요.
상대경로를 작성해 줘도 무조건 도메인 최상위에서 시작하는 경로로 지정이 됩니다.
제가 뭔가 착각하고 있는게 있을까요?
지금 style="background-image: url('/modules/board/m.skins/skin_name/images/no_thumb.png')"
어쩔수 없이 이렇게 루트부터 찾아가게 해야 올바른 경로의 이미지가 출력이 됩니다.
<img src="/images/no_thumb.png">
<img src="/images/no_thumb.png">
지금 이 글의 위 코드의 경로의 맨 처음 점(.)이 게시글 출력하면서 안보이네요.
<img src="쩜./images/no_thumb.png">
실제로는 지금 위와 같이 타이핑되어 있습니다.
위와 같이 이미지를 로딩하면 상대경로를 사용해도 정상적으로 경로를 찾아갑니다.
댓글 5
그 지점 부터 시작하는 경로라는 확실한 표시를 점을 통해서 추가하여 지정해주시는게 좋습니다.
일반적으로 /images/ 이렇게 바로 호출하게 되면 서버 세팅에 따라 혹은 아파치 nginx세팅에 따라
domain.com/images 으로 인식하는 경우도 더러 있더라고요..
확실하게 시작지점을 잡아주세요.. (스킨 및 css도 모두 마찬가지인데.. css는 그냥 절대경로 비슷하게 사용하세요.. /layouts/name/images~~~
css 파일에서는 잘 되는거 같고
<img src="(쩜)./images/no_thumb.png">
위와 같은 형식에서도 되는거 같은데
<div class="thumb-image tbi" style="background-image: url('./images/no_thumb.png')">
이게 왜 안되는지 이유가 궁금해서요...
라이믹스 버그인건지... 아님 제가 뭘 잘못 알고 있는건지 확인하고 싶어서요.
css에서는 domain.com/images/ 으로 인식하기에..
보통 그리고 style=""속성태그는 쓰지 않는게 좋지요. 레이아웃 설정과 같은 불가피한 상황이 아니라면 css파일에 코딩하는 습관을 들여두신다면 좀 더 좋습니다 :)
html에 박혀 있는 모든 상대경로는 그 html 파일이 실제로 위치하고 있는 경로가 아니라 결과적으로 화면에 표시된 웹페이지(예: 게시판 글읽기 화면)의 URL 기준으로 해석됩니다. 스킨은 무척 다양한 URL에서 사용될 수 있으므로 상대경로가 어떻게 해석될지 예상하기 어렵습니다. <img> 등 아주 많이 사용하는 태그에 한하여 짧은주소 사용시 엑박 뜨는 문제를 막기 위해 구 버전 XE에서 자동으로 변환해 주던 것을 라이믹스에서도 호환성 때문에 그대로 유지하고 있긴 합니다만, 서드파티의 게으름을 코어가 땜빵해 주는 이런 꼼수를 더 확장할 계획은 없습니다. style 태그 안에 있는 css 코드까지 일일이 다 해석해서 변환해 주는 것도 어렵고요.
반면, css에 박혀 있는 상대경로는 웹페이지의 URL과 무관하게 해당 css 파일의 URL 기준으로 해석됩니다. css 파일의 URL은 대체로 서버단의 폴더 구조를 그대로 따르므로, css에 상대경로를 넣으면 훨씬 정확하게 인식되도록 할 수 있습니다. css 합치기, scss 컴파일 등 코어에서 조작하는 경우에도 이 부분은 깨지지 않도록 배려하고 있습니다.
위와 같은 차이 때문에 정말 불가피한 경우 외에는 html에서 style 속성을 사용하여 백그라운드 이미지 경로를 지정하는 방식은 피하는 것이 좋습니다. 섬네일이 없음을 의미하는 특정한 class만 넣어놓고, 실제 이미지 경로는 css에서 지정해 주세요. html은 html 파일에서, css는 css 파일에서, js는 js 파일에서만 사용하기를 권장하는 것은 단지 깔끔을 떨기 위해서가 아니라 실제로 더 편리하고 안정적으로 구현할 수 있기 때문이지요.^^
네. 제가 잘못 알고 있는 부분이 아니라 다행이네요. 그렇다면 이런 특성을 이해하고 가급적 css에서 처리하고 html에서 불가피하게 위와 같은 처리는 개인적인 처리에만 사용해야겠네요.
- 잘못 알고 있던 부분도 있네요. 파일 기준이 아니라 출력되는 곳의 기준이 되어 이런 문제가 발생하는 다는 중요한 부분이요.
해당 자료의 경로가 다른 경로로 업로드 될 수도 있으니까요. 모바일,PC 경로가 다르니...
궁금증이 모두 풀렸습니다. 감사합니다.