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

티스토리 툴바