묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
외국 템플릿을 적용후 배경이미지 부분이 안보이는 이유[해결됨]
2009.01.24 10:57
해외의 템플릿 배포 사이트에서
http://www.freecsstemplates.org/preview/standardized
이 템플릿(내용파일: index.html, default.css, images/a1.gif)을 다운받아서 제로보드XE에 맞게끔 layouts 폴더를 구성해봤습니다.
css파일을 import 하는 방법은 공식 레이아웃을 참조하여 그대로 따라 했습니다.
그 밖에도 원래 index.html이었던 파일을 layout.html로 바꾸고 형식도 맞게 변경시켰습니다.
그리하여 제가 위의 템플릿을 제 웹사이트에 적용한 결과는 다음과 같이 성공적이라고 볼 수가 있습니다.
http://xybox.kr/
그런데 문제는 비슷하게 보여도 한가지가 다르다는 점입니다.
희한하게도, 원본 사이트의 텍스트 부분의 배경에서는 잘 보이는 회색 그라데이션 배경이미지(x축반복)가
적용결과페이지에서는 안보입니다.
그 이유가 무엇일까요?
해당부분을 아래에 옮기면 다음과 같습니다.
문제되는 css 부분 :
.boxContent {margin-top: 0.5em;padding: 1.25em 1em 0.25em 1em;background: #ffffff url('images/a1.gif') top left repeat-x;}
layout.html 파일중 위의 boxContent 클래스에 해당하는 한 곳(원어 부분은 제가 한글로 '내용'이라고 바꿔서 올리겠습니다) :
<div class="box">
<h2>내용</h2>
<div class="boxContent">
<p>내용</p>
</div>
</div>
css의 다른 부분들은 모두 성공적으로 적용되고 있으므로 css파일의 import가 잘못된 것은 절대 아니고
이미지 파일의 경로도 제로보드 공식 레이아웃과 똑같게 맞춰서 넣어뒀습니다.
==========================================================================
내용 추가 :
해결이 되었습니다.
이미지 경로문제라는 답변해 주신 것이 맞았습니다.
위의 파란색 부분은 템플릿에 넣어져있던 css파일의 내용인데
경로가 images/a1.gif라고만 되어 있습니다.
그런데 이 부분을 그대로 둔 결과
브라우저에서는
그 결과 이 배경이미지가 보이지 않았던 것입니다.
(images폴더는 layouts폴더의 바로 아래에 있는 폴더인데 위와 같이 왜곡 인식)
이를 css파일을 열고
images/a1.gif를
../images/a1.gif로 바꾸니까
배경 이미지가 보이게 되었습니다.
댓글 6
-
......
2009.01.24 11:51
-
블루파티
2009.01.24 12:12
배경이미지 경로를 다시 확인해봤는데 이상이 없습니다. 혹시 제가 위에 올린 원본사이트에서는 이미지 경로를 찾을 수 있으신지요? 제가 파폭을 안쓰고 구글크롬을 쓰는데 혹시 소스보기를 말씀하시는 것인지요? -
...
2009.01.24 12:37
소스보기 아니구요.
파폭의 웹계발 툴 중 하나인 "파이어버그"를 이용하면 쉽게 알 수 있습니다.
url(../../../../layouts/new/css/images/a1.gif)
이건 파폭의 파이어버그에서 인식한 배경 주소입니다. -
블루파티
2009.01.24 14:13
아 경로문제임을 정확히 지적해주신 답변 정말 감사드립니다.템플릿 자체의 css파일의 이미지경로를 그대로 놔둔결과background: #ffffff url('images/a1.gif') top left repeat-x;라고 적혀 있었었는데경로를background: #ffffff url('layouts/new/images/a1.gif') top left repeat-x;이렇게 고치니까 해결되었습니다. -
블루파티
2009.01.24 14:22
덕택에 파이어폭스에 파이어버그란 걸 달았는데 이건 정말 굉장한 거군요. 없어선 안될 도구... -
...
2009.01.24 14:48
파폭에서 제공해주는 웹계발툴은 파이어버그 이외에도 여러가지가 있습니다.
다만 전 귀차니즘 땜에 자세히 알아보고 있지 않습니다.. ㅎㅎ
배경이미지 경로가 틀린 듯..