BLOG by TONYSTYLE : IE6에서 PNG 파일의 투명/반투명 (알파값) 색상을 바르게 표현하기 ( IE6, PNG FIX )

마이크로소프트 인터넷 익스플로러 7 이상의 버전에서는 문제가 없으나 인터넷 익스플로러 6 이하 버전에서 PNG 이미지 파일의 (반)투명 부분을 제대로 표현 해 주지 못하는 문제가 있습니다.
이 문제는 오래전에 이슈 되었던 문제인데 오늘 우연치 않게 IE6가 설치된 PC에서 제 블로그를 보다 생각나서 포스팅 해 봅니다.

아래 이미지는 IE8에서 캡쳐한 이미지 입니다.
PNG 파일이 표시되어 있는 웹 페이지에서 마우스로 드레그 해 보면 왼쪽 이미지 처럼 PNG 파일의 영역 부분이 표시 되는걸 보실 수 있습니다. 오른쪽 이미지 처럼 IE7 이상 에서는 (반)투명 부분이 문제 없이 표시되어 집니다만...

아래 이미지 처럼 IE6에서는 PNG 파일의 (반)투명 처리된 부분을 제대로 표현 해 주지 못하는 문제가 있습니다.

이러한 문제점을 해결할 수 있는 방법은 여러 가지가 있습니다만 두 가지 정도만 적어 보겠습니다.

HTML ( iepng_fix_01.zip )

우선 게시물 맨 아래쪽에 첨부한 파일중 iepng_fix_01.zip 파일을 다운 받습니다.
압축을 푸시면 iepng_fix.js 파일과 clear.gif 파일이 있는데 clear.gif 파일은 1픽셀 짜리 투명한 gif 파일 입니다.
iepng_fix.js 파일을 에디트플러스 같은 파일 편집기로 여시고 맨 첫째줄에 clear.gif 파일이 있는 경로를 적어 주신 후 두 파일 모두 서버에 올리시면 됩니다.

그 다음 적용할 HTML 문서 <body> </body> 사이에 아래 코드를 삽입해 주시면 됩니다.

<script type="text/javascript" src="iepng_fix.js"></script>

그러면 아래와 같이 IE6 에서도 (반)투명한 PNG 파일이 문제없이 표현되어 표시 됩니다.

CSS or HTML ( iepng_fix_02.zip )

위의 방법과 같이 아래쪽에 첨부한 파일중 iepng_fix_02.zip 파일을 다운 받습니다.
압축을 푸시면 iepngfix.htx 파일과 blank.gif 파일이 있는데 마찮가지로 blank.gif 파일은 1픽셀 짜리 투명한 gif 파일 입니다.
iepngfix.htx 파일을 에디트플러스 같은 파일 편집기로 여시고 15번째줄에 blank.gif 파일이 있는 경로를 적어 주신 후 두 파일 모두 서버에 올리시면 됩니다.

그 다음 적용할 HTML 문서 <body> </body> 사이에 아래 코드를 삽입해 주시거나

아래와 같이 CSS 파일에 직접 추가 하셔도 됩니다.

img, div { behavior: url("/css/iepngfix.htc") }

그 이외의 방법은 http://www.twinhelix.com 의 문서를 참고 하시기 바랍니다.

================================================================================

iepng_fix_01.zip