IE6에서 png 파일 투명효과 적용하기
IE6 에서는 알파체널이 들어간 png 파일을 제대로 표현하지 못하기 때문에 png 파일의 장점에도 불구하고 잘 사용을 안했었습니다. IE7 에서는 해결 되었지만 여전히 IE6을 많이 쓰니까요.
버전 5.5 이상 의 IE 에는 필터가 들어있는데요, 이것 덕분에 알파 체널을 표현하기 위한 방법이 생겨났습니다.
애플같은 해외 사이트에서는 이 방법을 많이들 쓰는것 같습니다.
다음 링크는 제작자의 원문입니다.
http://www.twinhelix.com/css/iepngfix/
다음 링크를 클릭하여 파일을 다운받습니다.
http://www.twinhelix.com/css/iepngfix/iepngfix.zip
다운받은 파일의 압축을 해제하면 몇가지 파일이 나옵니다. 가장 필요한 파일은 iepngfix.htc 이놈입니다.
이 파일을 웹에 올려두시고 CSS를 통해 불러오면 됩니다.
사용법은 간단합니다.
CSS 파일에 적용할 태그의 behavior 를 주면 됩니다.
img, div {
behavior: url(iepngfix.htc);
}
behavior 는 CSS 표준이 아닙니다.
이렇게 해주면 img 테그와 div 테그에 필터가 적용됩니다.
이걸 적용 안했을때와 했을때의 비교화면 입니다.
보이는것처럼 적용이 안되면 배경이 파랗게 표시되지만 적용이 되면 하얗게 나옵니다.
제작자는 다음과 같은 단점을 표기해 두었습니다.
- IE 5.5 이하는 안됩니다.
- 오른쪽 클릭으로 그림을 저장할 수 없습니다.
- ".png" 확장자를 검사하기 때문에, 다른 방법으로 그림을 표시하는 경우에는 스크립트를 직접 편집해야 합니다.
- 그림의 width 혹은 height 속성을 주어야 합니다. auto 로 두거나 값을 지정하지 않으면 안됩니다.
- 배경 그림은 반복이 안됩니다.
- padding 속성과 border 속성은 그림의 표시 위치를 변경하지 못합니다.
- 그림이 로딩될때 화면이 깜빡일 수 있습니다.
저도 이 방법을 사용해서 그림을 표시하고 있습니다.
IE6 을 안쓰는 날이 어서 왔으면 좋겠군요 
