IE6에서 투명 PNG파일 사용하기

Development 의견 남기기

웹에서 투명한 배경을 사용해야하는 이미지를 다룰때 주로 사용하는 포멧으로는 gif 와 png 가 있는데, gif 포멧은 쵀대 256컬러까지만 지원하기때문에 화려하고 세밀한 이미지를 다루는데는 적합하지 않다. 따라서 최근에는 png 포멧이 많이 사용되는데 멍청한 브라우저 IE6에서는 이 투명처리를 제대로 하지 못하는 버그가 있다.

이것을 해결하는 여러가지 방법이 있는데 그중 가장 호환성이 좋고 사용하기 편한 두가지 방법을 소개한다.

1. TwinHelix의 IE PNG Fix를 사용하는 방법

http://www.twinhelix.com/css/iepngfix
원리는 HTC(HTML Components)로 지정된 이미지객체위에 투명한 blank.gif 파일을 올려 배경이 정상적으로 보이는것처럼 하는것이다. 사용하는 방법은

  1. 위 TwinHelix 에서 필요한 파일들을 다운로드 받는다. [바로받기]
  2. blank.gif 파일과 iepngfix.htc 파일을 서버에 업로드 한다. 이때 iepngfix.htc 파일을 열어 blank.gif 파일의 경로를 확인한다.
  3. 적용될 엘리먼트에 htc 파일을 behavior로 지정한다.

예를 들어 iePngFix 라는 클래스를 갖고있는 png 파일에 적용하기 위해서는 다음과 깉이 하면 된다.

.iePngFix {
    behavior:url('/stylesheets/iepngfix.htc');
}

이방법의 장점으로는 배경이미지와 자바스크립트등으로 로딩되는 이미지에도 비교적 안정적으로 동작한다는 점이다. 하지만 htc 파일은 캐쉬되지 않으며 이미지가 읽힐때마다 서버에 요청된다는 단점이 있다.

2. DD_belatedPNG 를 사용하는 방법

http://www.dillerdesign.com/experiment/DD_belatedPNG/
자바스크립트를 사용하는 일반적인 방법이다. 다음과 같이 사용하면 된다.

  1. 위 링크에서 js 파일을 다운받는다.
  2. js 파일을 서버에 업로드 한다.
  3. 적용될 엘리먼트를 DD_belatedPNG.fix() 함수에 넣는다.

예를 들어 iePngFix 라는 클래스에 적용하려면 다음과 같이 작성한다.

<!--[if IE 6]>
<script type="text/javascript" src="/javascripts/dd_belatedpng.js"></script> 
<script type="text/javascript">
    DD_belatedPNG.fix('.iePngFix');
</script>
<![endif]-->

이방법의 장점이라면 사용법이 간단한 것이겠고, 단점이라면 background-image 등에는 적용할 수 없다는것이다.

2 Responses to “IE6에서 투명 PNG파일 사용하기”

  1. 안광희 Says:

    알려주신 방법을 테스트 할려는데..
    테스트 할때.. 꼭 서버에서만 테스트가 되나요?
    아님.. 로컬에서도 테스트 가능한가요?

  2. blueruin Says:

    물론 로컬에서도 사용하실 수 있습니다.

의견을 남겨주세요

Trackback URL : http://blueruin.org/archives/176/trackback

WP Theme & Icons by N.Design Studio
Entries RSS Log in