Archive / Javascript / PNG

PNG 포맷은 투명도(alpha channel)를 지원해서 아주 유용하게 사용할 수 있지만 인터넷 익스플로러에서는 이를 지원하지 않아서 사용하기가 힘들다. 인터넷 익스플로러7에서는 PNG의 투명도를 지원하지만 인터넷 익스플로러7이하의 버젼에서는 PNG를 사용할 수 없기 때문에 사용에 유의하여야 한다.

HTC 이용 방법

인터넷 익스플로러의 HTC(HTML Component)를 사용하여 PNG 이미지를 필터 방식으로 변환하는 방법이다. 화면 로딩중에 회색으로 PNG의 투명영역이 보이는 단점이 있다.

<!--[if IE]>
<style type="text/css">
img {
	behavior: url(pngbehavior.htc);
}
</style>
<![endif]-->

HTC 파일은 아래의 사이트에서 다운 받을 수 있다.

• PNG Behavior (WebFX)
• IE PNG Fix - TwinHelix

자바스크립트 이용 방법

인터넷 익스플로러의 필터 기능를 이용해서 PNG의 알파채널을 이용할 수 있지만 추가적인 코드를 넣어줘야 하는 불편이 있다. 아래와 같은 방법을 사용하면 간단하게 PNG이미지를 사용할 수 있다.

function IE_enablePng(img) {
	if (typeof(img.style.filter) == "string") {
		img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src + "', sizingMethod='scale')";
		img.src = "/image/png_blank.gif";
	}
}

작동 원리는 다음과 같다.

1. 이미지의 src를 이용해서 alpha 필터를 <img>엘리먼트에 적용한다. 이렇게 하면 배경에 alpha가 지원되는 투명한 PNG를 적용한 것과 같게 된다.
2. 원래의 이미지가 배경의 이미지를 가리고 있기 때문에 이 원래의 이미지를 없애 주기 위해서 투명 gif이미지로 교체 한다. 여기서 크기가 투명 gif만큼만 설정이 되기 때문에 미리 PNG이미지에 크기를 설정해 둔다. 이 과정에서 onload 이벤트를 사용하면 되지만 IE의 버그(onload 이벤트가 정상적으로 작동하지 않음)가 있기 때문에 될 수 있으면 <img> 태그에 미리 크기를 적용해 놓는 것을 권장한다.

다른 방법

Unit PNG Fix