보고 이를 적용하는 방법을 풀어 보았습니다. 이 팁은 IE 6.x 버전의 웹 브라우저에서 PNG-24 파일의 투명/반투명 색을 회색으로 처리해버리는 비표준 렌더링 방법을 개선하기 위한 해결방법 입니다. 기존의 스크립트가 단순하게 <img> 태그에만 적용되는 팁이었다면 이 방법은 CSS 의 Background 속성에도 적용이 가능하다는 점 때문에 높은 점수를 주고 싶습니다. PNG-24 이미지는 GIF와 달리 투명색 뿐만아니라 반투명색의 투과까지 지원을 해주기 때문에 웹 디자이너 입장에서 그 활용가치가 매우 높다고 말씀드릴 수 있겠습니다. 단점은 GIF 이미지보다 PNG-24 파일의 용량이 약 2배정도 증가한다는 점인데 화면을 PNG-24 으로 도배하지 않는 이상 그다지 걱정할 만한 트래픽 증가는 아닌것 같습니다. 하지만 되도록 큰 이미지에는 PNG-24의 사용을 자제하시는게 좋겠지요.
IE 6.x 버전에서 PNG-24 파일의 투명/반투명 색을 바르게 렌더링 하기 위한 CSS/Javascript 적용방법은 다음과 같습니다.
- iepngfix.htc 파일을 다운로드 한 다음 웹 서버의 원하는 폴더에 올립니다.
- 1*1px 짜리 투명색으로 처리된 blank.gif 파일을 웹 서버의 원하는 폴더에 올립니다.
- iepngfix.htc 파일을 열어서 blank.gif 파일의 경로를 바르게 변경합니다.
if (typeof blankImg == ‘undefined’) var blankImg = ‘blank.gif‘; // 1×1px 짜리 투명 이미지(blank.gif)의 경로를 변경. - 모든 페이지에서 참조하는 css 파일을 열고 원하는 class 에 {behavior:url(iepngfix.htc);} 속성을 추가한 다음 iepngfix.htc 의 경로를 바르게 변경해 줍니다.
.iePngFix {behavior:url(iepngfix.htc);} /* iepngfix.htc 파일의 경로를 바르게 변경합니다 */ - 해당 class가 적용된 PNG-24 이미지의 투명/반투명 색이 IE 6.x 버전 에서도 정상적으로 렌더링 됩니다.
IE 6.x 정식버전에서의 렌더링 테스트 결과는 다음과 같습니다.
예제에 사용된 이미지는 포토샵에서 Alpha 50%가 적용된 것입니다. 이미지의 투명/반투명 영역이 체크무늬패턴의 배경을 어떻게 투과시키는지 확인하시면 됩니다. 특히 그림자 부분을 유의깊게 보시구요. 위아래로 같은 이미지이며 좌우로는 파일 형식이 다릅니다. 아래 화면은 IE 6.x 가 정상적으로 설치되어 있지 않은 분들을 위하여 센스있게 미리 캡쳐된 화면입니다. 정상적으로 설치된 IE 6.x 가 깔려있다면 실제로 코딩된 화면을 직접 확인 해보세요. IE6.x Standalone 버전 에서는 아래 화면 대로 렌더링 되지 않으며 스크립트오류까지 만나게 됩니다.
IE 5.x 까지 하위버전 호환되지는 않습니다. IE 6.x 버전만을 위한 것이지요. IE 7.x 부터는 이딴짓(?) 안해도 PNG 파일의 투명/반투명 색을 표준에 맞게 렌더링 해줍니다. 따라서 이 팁은 어디까지나 IE 6.x 의 브라우저 호환성을 유지하기 위한 방법이며 IE6.x 브라우저의 하위 호환성을 위하여는 IE8.x 버전이 나오기 전까지 이딴짓을 계속 해야 할 것으로 생각됩니다.
IE 6.x 렌더링 테스트 결과 발견된 문제점
- ‘회선속도가 느리거나 웹 문서의 용량이 커지는 경우’ 페이지가 완전히 로딩되기 전까지 투명/반투명 색이 잠깐동안 회색으로 나타나는 증상이 있습니다. 따라서 ‘저회선 사용자의 인터넷 환경’ 을 고려해야 한다거나 ‘포털’ 규모의 웹페이지에 사용하려는 경우 이를 심사숙고 해보아야 합니다. 한편 Apple Mac Pro, Mac OS X Leopard Sneak Peek 페이지 에서도 이 코드를 사용하고 있는것을 보면 그다지 Critical 한 측면은 아닌가 봅니다.
- .iePngFix 라는 class 가 적용된 배경이미지의 반복(repeat, repeat-x, repeat-y)과 위치값(left, right, top, bottom & offset value) 적용되지 않습니다.(위 background 렌더링 테스트 결과 참조)
- <img> 태그에 padding 값을 주게 되면 padding 값 만큼 PNG 이미지의 크기가 늘어나는 형태로 잘못 렌더링 됩니다. (위 <img> 렌더링 결과 참조)
- 2~3번 같은 경우 때문에 공용선택자 ‘*’ 에 behavior 를 적용하는 방법은 지양할 수 밖에 없습니다. repeat 시킬 필요가 없고 padding 값을 줄 필요가 없는 PNG-24 이미지에만 class 를 주어서 현재의 스크립트를 개별적으로 적용 하는 방법을 권장합니다. 사실 PNG-24를 이용하여 투명한 영역을 제대로 렌더링 시켜야 하는 경우는 많지 않으므로 역시 class 를 이용하는 방법을 권장합니다.
(X) * {behavior:url(iepngfix.htc);} (O) .iePngFix {behavior:url(iepngfix.htc);}그럼에도 불구하고 이를 공용선택자 ‘*’ 에 일괄 적용하는 것이 나은 케이스라고 판단되면 이 속성을 상속받을 필요가 없는 PNG-24 이미지에는 다음과 같은 class 로 처리하십시오. 이 코드는 공용선택자 ‘*’ 보다 아래쪽에 코딩되어야 우선순위를 갖습니다. 당연하죠..iePngUnFix {behavior:none;} - IE에서는 png배경이 사용된 엘리먼트에 position:relative|absolute 속성이 들어가게 되면 자식요소의 a 엘리먼트에 마우스로 접근할 수 없는 버그가 있습니다. png배경이 포함된 요소에 position:relative|absolute 속성을 제거하거나 또는 a요소에 position:relative|absolute 속성을 함께 부여해 보세요.
- behavior 라는 속성은 IE 전용 속성입니다. 이러한 속성을 다른 브라우저는 오류로 처리하지 않고 그냥 무시해 버리기 때문에 전혀 문제가 되지는 않습니다.
참조문서
- http://blog.bjorkoy.com/2006/12/12/flawless-and-fast-png-support-in-ie6/
- http://www.twinhelix.com/css/iepngfix/demo/
- http://www.apple.com/macpro/
- http://www.apple.com/macosx/leopard/spotlight.html
- http://msdn.microsoft.com/library/default.asp?url=/workshop/author/css/reference/css_ref_entry.asp
관련 포스트
- http://dnzin.com/cunningweb/2006/09/25/png24-solving-image-replacement/
- http://kukie.net/2006/07/12/263/
- http://hyeonseok.com/pmwiki/index.php/Javascript/PNG
