BLUEnLIVE's ZocKr World: html

2008년 3월 9일 일요일

IE8 : ACID2만 통과하면 표준을 잘 준수하는 것인가?

제 블로그의 헤더는 원래 복잡한 <table> 태그로 구성되어 있었습니다.
<div>나 <table>이나 아무거나로 만들기만 하면 된다는 매너리즘으로 중무장해서 만든 결과물이었습니다.
(다들 아시다시피, 현재의 웹은 <table>으로 레이아웃을 잡지 않는 것을 권고하고 있습니다)

물론, IE6/7이나 Firefox은 물론, Opera나 Safari까지의 모든 브라우저들에서 정상적으로 출력되었습니다.

그러다가, 이번에 Internet Explorer 8 beta 1이 나온 것을 보고 돌려봤더니… 제 블로그 헤더가 무참하게 깨져서 나오더군요.

아직 베타버전인 브라우저이기는 하지만, 언젠가는 <table>을 <div>로 바꿀 생각을 했기 때문에 좋은 기회라고 생각하고, 몽땅 바꿨습니다.
덕분에 복잡하게 구성되어 일부 브라우저에서는 늦게 떴던 헤더가 깔끔하게 빨리 뜨도록 바뀌었습니다.

각 브라우저들에서 일일이 띄워본 결과 아무런 문제 없이 뜨는 것을 확인했습니다. IE8만 빼고 말이죠…

이렇게 깨지는 것이 왜 문제가 되냐면…

제가 사용한 태그는 아주 평범한 <div> 태그입니다.
<table> 태그를 사용하지 않고, <div>를 사용하는 것이 현재 웹 표준과 IE8의 권고사항인데, 정작 <div>를 제대로 해석하지 못하고 있습니다.
저는 헤더 전체를 <div position:relative;>로 지정하고, 세부적인 구성을 <div position:absolute;>로 지정해서 배치했습니다.
```
#header { position: relative; float: left; width: 938px; height: 154px;}
#hdrimgban { position: absolute; left:4px; top:22px; width:176px; height:120px;}
#hdrimgm1 { position: absolute; left:188px; top:98px; width:64px; height:12px;}
```
이런 식으로 말이죠. 이걸 제대로 출력하지 못한다니요…
MS는 IE8이 ACID2 테스트를 통과했다고 대대적으로 광고했습니다.
ACID2 테스트의 중요한 요소 중 하나는 복잡한 <div> 태그를 잘 해석하는가 하는 점입니다.

즉, 그렇게도 <div>를 잘 지원한다고 광고하는 브라우저가 기본적인 <div>를 제대로 렌더링하지 못한다는 것이 말이 안 되는 것입니다.

하지만 여전히 ACID2 테스트는 잘 통과하고 있습니다.
(뭐, 다른 ACID2 테스트를 통과하지 못한다는 문제가 있지만 말이죠…)

얼마전 nVidia에서, 또 예전에는 ATi에서 특정 프로그램에서만 빠르게 동작하는 척하는 드라이버를 출시한 것이 문제가 된 적이 있었습니다. ATi는 심지어 실행파일명을 바꾸면 느리게 동작하는 촌극도 보였더랬죠.

지금 IE8의 행보가 꼭 그 때의 비디오 카드/드라이버 벤더들의 행보와 비슷해보입니다.

계속 브라우저 점유율을 빼앗기고 있고, 표준에 대해서는 항상 말이 많은 MS가 이번에 뭔가 대형 사기극을 펼치고 있는 것이 아닌가하는 우려가 듭니다.

또 아래와 같은 엉터리 HTML의 세상을 만들기 위해 뭔가 음모를 꾸미는 것은 아닐까요?

<html
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:myns="http://internet.com/namespaces/smarttags">
<o:SmartTagType 
name="customer" 
namespaceuri="urn:schemas-fourth-coffee:contact" 
downloadurl="http://www.fourthcoffee.com/download.asp">
</o:SmartTagType>

제발 정식버전에서는 이런 황당한 일이 없기를 빌어봅니다…

2008년 2월 22일 금요일

투명 PNG를 IE6에서 보이게 하는 방법 소개 #1 : 어려운 방법

IE6에서는 이상하게 나오는 투명 PNG

위의 이미지는 Internet Explorer 6.0에서는 정상적으로 보이지 않습니다.
글자의 주변이 투명한 투명 PNG를 IE6에서는 제대로 그려내지 못하기 때문입니다.
(정확히는 투명 PNG가 아니라 알파채널이 있는 PNG로 불러야 합니다. 각 점별로 불투명도를 0~255 단계로 정할 수 있기 때문입니다)

제 블로그의 헤더도 투명 PNG를 사용합니다.
그런데, IE6에서 PNG를 잘 그리지 못하기 때문에 IE6 이하에서는 투명 PNG 대신에 투명 GIF를 출력하도록 했습니다.
이렇게 브라우저의 버전에 따라 다른 이미지를 출력하게 하려면 쉬운 방법은 없고, 자바스크립트로 떡칠을해야 됩니다.
※ 무조건 투명 GIF를 사용해도 되지만, 알파채널이 적용된 투명 PNG보다 화질이 훨씬 떨어지므로 PNG를 선호합니다

이런 기능을 부여하려면 아래와 같은 절차에 따라서 작업하면 됩니다.

1. 우선, IE의 버전을 알려주는 함수를 헤더에 삽입합니다.

<!-- IE 버전 확인 함수 -->
<script type="text/javascript">
<!--
function getIEversion()
{
   var version;
   if (navigator.appVersion.indexOf("MSIE")!=-1)
   { temp=navigator.appVersion.split("MSIE"); version=parseFloat(temp[1]); }
   else version=999.0;
   return version;
}
-->
</script>
<!-- IE 버전 확인 함수 -->

2. 스킨 파일(skin.html)에서 투명PNG를 뿌려주는 코드를 찾습니다

아래와 같은 코드를 찾는 것입니다. testtrans.png가 투명 PNG 파일입니다.

<img src="./images/testtrans.png" width="331" height="69" usemap="#_bnl_title">

3. 이 투명 PNG와 같은 크기의 투명GIF 파일을 만듭니다

Paint.NET 과 같은 프로그램에서 PNG 파일을 읽은 뒤 GIF 파일로 저장하면 투명 GIF로 만들어줍니다.
Paint.NET에서는 기본적으로 투명도가 128 이상이면 투명으로, 128 이하면 불투명으로 만듭니다.
여기서는 testtrans.gif를 만든 것으로 가정하겠습니다.

4. 투명 GIF를 업로드합니다

5. <img> 코드를 아래와 같이 고칩니다.

<script type="text/javascript">
<!--
document.write('<img src="./images/');
if (getIEversion()<=6.0) document.write('testtrans.gif');
else  document.write('testtrans.png');
document.write('" width="331" height="69" usemap="#_bnl_title">');
-->
</script>

많이 복잡하죠? 복잡하기만 할 뿐 아니라 느리기까지 합니다.
자바스크립트는 클라이언트 쪽에서 동작되기 때문에, 이런 식으로 구현하면 PC의 속도가 조금만 느려도 버벅거리는 현상이 비일비재합니다.

물론, 복잡하기 때문에 변환하는 과정도 어질어질하고, 버그가 발생할 가능성도 높습니다.

훨씬 쉽고 간결한 방법은 #2 : 쉬운 방법에서 소개하겠습니다.