포럼
1.5.3.2.BETA 와 1.5.3.1.hotfix1 에서의 이미지 재현 차이
2012.09.09 08:04
안녕하세요. 이게 질답게시판으로 가야 하는 내용인지는 모르겠으나 그 성격이 좀 애매해서 이곳에 글을 씁니다.
포토샵을 이용해서 이미지를 슬라이스 한다음 html파일을(php파일도 동일함) 만들어서 외부페이지로 등록하여 사용하였는데
1.5.3.1.hotfix까지는 아무런 문제가 없었는데
1.5.3.2beta 에서는 이미지가 슬라이스 된 세로부분은 정상적으로 틈이 없이 잘 보이나 가로부분만 간격이 벌어져 보입니다. 즉 가로로 틈이 벌어져 줄이 생기는 겁니다.
그래서 다시 1.5.3.1hotfix나 1.5.3.1.로 가면 정상으로 틈새가 없이 잘 나타납니다. html5 로 다시 외부 문서를 만들어 봐도 동일한 증상입니다.
이게 XE 의 버전에 따른 현상인지 사용자의 서버 환경에 따른 현상인지 잘 모르겠습니다만. 많은 웹디자인들이 포토샵의 이미지 슬라이스 툴을 이용하고 있는 줄로 알거든요.
<1.5.3.1.hotfix까지의 정상적인 이미지> <1.5.3.2.beta의 이미지>
무슨 문제일까요?
댓글 14
-
xe.min.css은 아니겠군요...이 버전대에서 바뀐게 아니니...
-
xe_마니
2012.09.09 08:48
예 저도 지금 버전별 비교를 해보고 있는데 짧은 머리로 신경만?쓰고 있는 실정입니다. 현재로선 1.5.3.2.정식버전에서는 정상적으로 보이길 희망 할 뿐입니다.
-
주소좀 적어주세요...미흡하지만 한번 봐볼께요.......아님 쪽지로.. 내부 1px이라 조금 애매하긴 하네요...위아래 보더도 아닌것 같고..
-
xe_마니
2012.09.09 09:16
제 컴터에 apm설치후 웹 올리기 전 테스트 중에 발생 한거라 달리 주소는 없구요 대신 페이지 소스를 아래에 적겠습니다
<body background="http://localhost/luz/images/bgr.jpg" leftmargin="0" topmargin="0" marginwidth="0" marginheight="4px">
<!-- ImageReady Slices (web_main_2.jpg) -->
<div align="center">
<table id="Table_01" width="960" height="699" border="0" cellpadding="0" cellspacing="0">
<tr><td colspan="5"><img src="images/web_main_2_01.gif" width="960" height="341" alt=""></td></tr>
<tr><td><img src="images/web_main_2_02.gif" width="708" height="88" alt=""></td>
<td><a href="http://localhost"><img src="images/1.gif" onMouseOver="this.src='images/1_1.gif';" onMouseOut="this.src='images/1.gif';"></a></td>
<td><img src="images/web_main_2_04.gif" width="13" height="88" alt=""></td>
<td><a href="http://localhost"><img src="images/2.gif" onMouseOver="this.src='images/2_2.gif';" onMouseOut="this.src='images/2.gif';"></a>
<td><img src="images/web_main_2_06.gif" width="78" height="88" alt=""></td></tr>
<tr><td colspan="5"><img src="images/web_main_2_07.gif" width="960" height="270" alt=""></td></tr>
</table></body></div>
<!-- End ImageReady Slices -->
보시다시피 소스는 이미지간 여백에 대한 것이 전혀 없습니다. 그리고 이 소스를 브라우져로 열었을때나 1.5.3.1.hotfix이하버전에서는 문제가 없다는 것이 어려울 뿐입니다. 대단히 감사합니다.
-
아~~ㅎㅎ. 소스상의 문제가 아니라 영향을 준 CSS 파일 또는 스크립트를 살펴보려고 했던지라....소스로는 문제를 전혀 파악할 수 없습니다...^^
-
혹시나....나중에 다시 테스트 하신다면... 아래 스타일을 페이지에 직접 넣어서 테스트 한번 해보시길..
<style type="text/css">
table{border:0;border-collapse:collapse;}
td{padding:0;border:0px;}
img{vertical-align:top;border:0;}
</style>
-
xe_마니
2012.09.09 11:02
대단히 감사드립니다. 적어주신 소스를 위의
<table id="Table_01" width="960" height="699" border="0" cellpadding="0" cellspacing="0">
위에 적어 넣으니 해결이 되었습니다.
<style type="text/css">
table{border:0;border-collapse:collapse;}
td{padding:0;border:0px;}
img{vertical-align:top;border:0;}
</style>
<table id="Table_01" width="960" height="699" border="0" cellpadding="0" cellspacing="0">
이하 동일....................................................
뭐라 감사의 말씀을 드려야 할지 모르겠군요. 덕분에 좋은 걸 배웠습니다.
늘 하시는 일과 가정위에 축복이 넘쳐나시길 바랍니다.
감사합니다.
참고로 위 소스가 1.5.3.1과 1.5.3.2beta의 어느 부분이 달라서 인식이 다르게 나타나는지 궁금합니다.
다시한번 감사드립니다.
-
흠냥..... 일단 원인은 아니지만 알아두시면......
HTML 5에서는 HTML 4 중에서 CSS로 이용 가능한 표현 속성을 더 이상 사용하지 않습니다.
태이블 관련해서 살펴보면......
table : border, cellpadding, cellspacing
td 및 th : height
table, td, th : width
아래는 "HTML 4와 HTML 5의 차이점" 한글판입니다. 한번쯤 읽어보세요.
-
xe_마니
2012.09.09 11:57
아~ 그렇군요. 다시한번 감사드립니다. -
1.5.3.1과 1.5.3.2beta의 다른점은.....제가 코어 변경사항을 정확히 알지 못해서 뭐라 드릴말씀이...그리고 브라우저의 개발자도구를 사용하시면 적용된 css를 간편히 확인할 수 있습니다. 두 버전을 각각 확인해 보시면 어떤점이 달라졌는지 확인하실 수 있습니다.
-
xe_마니
2012.09.09 13:05
네 감사합니다. 그런데 xe는 html5 규격뿐 만 아니라 이전 규격도 수용한다고 하길래 크게 염려는 하지 않았거든요.
그리고 위의 링크된 주소에서 많은 정보를 알았습니다. 감사 드립니다.
-
위의 HTML5와 HTML4 처리 차이로 인한 하위 호환성 문제가 예상되어 1.5.3.2 배포본에는 "HTML5 DTD만 지원"이 빠지게 되었습니다. 해당 이슈는 masrati(코드명)에 포함되어 배포될 예정입니다.
-
xe_마니
2012.09.12 02:14
아~감사합니다. 저같은 초보들에겐 다행한 소식입니다. 감사합니다.
이 없어지고 a img{border:0} 이 생긴걸로 기억하는데...