Micah Tischler씨는 IE 6에서 투명 PNG를 지원하는 너무 많은 방법에 짜증이 났습니다. 그래서 투명 PNG 이미지를 위한 진정한 배경 이미지 반복과 풀 포지셔닝을 지능적으로 제공하는 mtjs_iepnghandler를 계속 작업해왔습니다.

이 스크립트에서 빈칸 공백 GIF가 있든 그렇지 않든 이미지 태그가 지원되며, 배경이미지에서도 PNG를 이용해 반복이나 위치 정의가 가능해졌습니다. 이미지들이 컨텐트 엘리먼트보다 작은 경우에도 말입니다. 또한, 반복 기능은 대충 아무렇게나 늘려놓은 것이 아닌 진정한 반복기능을 제공합니다.

mtjs_iepnghandler.js는 DOM을 다루며, PNG가 있는 곳을 조정합니다. 이 방법은 PNG가 이미지에서 사용중인지 배경이미지로 사용중인지에 따라 달라집니다. 배경이미지에 사용되고 있다면 반복되거나 위치를 설정했을 것입니다. 이 스크립트는 또한 반복 기능을 구현할 방법에 대해 똑똑한 결정을 내리기 위해 PNG의 치수를 계산합니다. 기억해야할 것은, mtjs_csswalker_iepnghandler.js와 마찬가지로 이 스크립트도 그냥 놓기만 하면 되고, IE5-6 이외의 브라우저에서는 아무런 동작도 하지않는 것입니다.

Micah씨는 끝으로 자신의 방법과 다른 것들을 비교하며 글을 마쳤습니다.

from mtjs_iepnghandler: more PNG support for IE 6
TAG IE, png
Posted by 행복한고니 트랙백 0 : 댓글 3

댓글을 달아 주세요

  1. addr | edit/del | reply BlogIcon 한준호 2008.10.27 13:12

    안녕하세요 png 배경 반복하는 방법이 없을까 검색하다 행복한 고니님의 글을 발견!
    했는데.. 하필 영어네요..ㅋ 이거 자세한 사용법줌 알수 있을까요?? ^^;

    • addr | edit/del BlogIcon 행복한고니 2008.10.27 13:56 신고

      본문에 다음과 같은 링크가 있습니다.
      http://www.micahtischler.com/#mtjs_iepnghandler.js

      이 링크를 클릭해서 들어간 문서에서, 파일을 받으시면 되는데요, 2개 받는 방법과 1개 받는 방법 중 1개짜리 방법으로 알려드리겠습니다.

      http://micahtischler.com/releases/mtjs/iepnghandler_solo/1.0/mtjs_iepnghandler_solo.js
      이 링크에서 자바스크립트 파일을 다운로드 받으시고 적당한 곳에 두신 다음에,

      <script type="text/javascript" src="/[path to it]/mtjs_iepnghandler_solo.js"></script>

      와 같이 본문에 삽입 하신 후 body 태그에 다음과 같이 쓰시면 됩니다.

      <body onload="mtjs_iepnghandler_solo.go();">

      또는 다음 스크립트를 <head>에 포함시키셔도 됩니다(이 스크립트는 제가 작성한 것입니다).

      <script type="text/javascript">
      if (window.attachEvent) {
      window.attachEvent("onload", function(){ mtjs_iepnghandler_solo.go() });
      }
      </script>

      사용해보시고 잘 안되면 다시 문의주세요. ^^

  2. addr | edit/del | reply BlogIcon 한준호 2009.02.07 21:06 신고

    ㅎㅎ 댓글을 지금 봤습니다. 감사합니다 고니님. 그때 당시에 포기하고 쓰지 않았는데..
    작업하다 쓸일이 생기면 활용해 보려고요. 그럼 좋은 주말 되세요~

from Ajaxian Featured Tutorial: Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery on Ajaxian

글에서는 잘 알려져있지 않다고 하는데 아마도 IE6의 PNG 지원 문제는 우리나라에서는 꽤 잘 알려진 이슈가 아닐까 합니다. 어떻게 보면 우리로서는 조금 오래된 팁들일 수 있을 것 같습니다.
______________________________
Pathfinder 웹 사이트를 새로 설계하면서, Brian Dillard 씨는 잘 알려져있지 않은 IE6 의 투명 PNG 이슈와 부딛혔고 해결하기 위해 두가지 방법을 썼습니다. 그는 IE6가 PNG를 표시하면서도 알파 채널을 지원하지 않고 투명대신 의도하지 않은 색상을 넣는 문제를 어떻게 해결했는지 쓰기로 했습니다.

IE6의 투명 PNG 지원 미흡은 충격과 공포입니다만, Microsoft는 같은 문제에 대해 자기들만의 수정방안을 내놓았습니다: CSS 스펙의 비표준 확장인 CSS behavior 입니다. PNG 이미지에 특별한 behavior를 적용함으로써 IE6 에서도 투명 PNG의 알파 채널을 정상적으로 표시할 수 있게 됩니다.

이미지 하나하나에 CSS behavior를 코딩하는 것은 지겹습니다. 다행히, Angus Turnbull 이라는 개발자가 IE PNG Fix 라는 전역에 behavior 적용이 가능한 오픈소스 스크립트를 릴리스했습니다. 현재 버전은 v1.0 RC4 이지만 v1.0 RC5도 프리뷰용으로 제공하고 있습니다.

IE PNG Fix 스크립트가 PNG 투명 이슈를 주로 다루지만, 그것으로 해결할 수 없는 문제가 하나 남아있습니다:

그러나 Turnbull의 스크립트는 문제가 한가지 약점이 있습니다: top left 가 아닌 다른 방식으로 background-position이 설정된 PNG 배경 이미지는 다룰 수 없다는 것입니다. 알파채널의 투명도를 해당 이미지와 같이 복원하지만, top left를 재설정해버려서, 투명이 있어야 할 자리에 보기 싫은 회색이 있는 것보다 더 나쁜 디자인으로 만들 수도 있습니다.

Brian 씨는 jQuery 를 이용해서 그 문제를 해결했습니다.

코드를 포함한 더 자세한 해결책을 보시려면 아래 링크의 글을 참고하세요:

Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery (part 1 of 2)

Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery (part 2 of 2)


Posted by 행복한고니 트랙백 0 : 댓글 2

댓글을 달아 주세요

  1. addr | edit/del | reply BlogIcon Draco 2008.04.15 08:59

    ie6에서 PNG 이미지의 채도가 너무 진하게 표현되는 문제도 있으니 주의해야 하죠...