WebApp/CSS2010. 9. 27. 00:53
Internet Explorer 6(이하 IE6) 이하 버전에서는 PNG-24의 알파값이 제대로 표현이 되지 않아, 이미지의 투명한 부분이 불투명하게 나타난다. 이러한 문제를 해결하기 위해서 많은 PNG Fix 코드들이 존재한다. 작동원리는 모두 비슷하다. PNG이미지의 투명한 부분을 GIF 투명한 이미지로 교체하고 알파 값에 대해서는 IE만의 알파 필터를 적용하는 방식이다.

1. Javascript형 PNG Fix
Javascript를 이용해서 PNG Fix를 하는 코드가 있다. 이 코드는 Javascript 부분과 CSS부분으로 나뉘어 작동한다. CSS에서 어떤 오브젝트(태그, 클래스, 아이디)에 PNG Fix를 적용하는지 설정해놓는다. Javascript에는 지정된 오브젝트의 PNG 알파값을 읽어들여서 알파 값에 맞게 1x1px의 blank.gif를 섞어서 이미지를 출력한다.

2. HTC(HTCs:HTML Compoents)를 이용한 PNG Fix
HTC를 이용해서 PNG Fix 코드를 작성한 것도 있다. 서두에서 밝힌대로 작동원리는 모두 비슷하기 때문에 이 코드도 HTC코드 부분과 CSS부분으로 나뉘어 작동한다. HTC는 Microsoft에서 DHTML을 위해서 제정한 문서이기 때문에, PNG Fix를 필요로 하는 IE와 찰떡궁합을 가지고 있다. Javascript 방식과 동일하게 1x1px의 blank.gif를 섞어서 이미지를 출력한다.

둘 다 구현 코드의 언어가 무엇이냐는 차이일 뿐 그 원리는 같다. 그러므로 배경으로 지정된 PNG 파일(style="background-image:url(example.com/example.png)")도 투명하게 만들어 줄 수 있는지 여부를 확인한 후에(지원하지 않는 경우가 많다.) 사이트에 적용하기를 바란다.

Studio[2b]는 2번째 방식인 HTC를 이용한 PNG Fix를 이용하며, 다음 사이트에서 소스를 받아 사용하고 있다.

http://www.twinhelix.com/css/iepngfix/

여기서 파일을 받아 압축을 해제한다. 그 다음 iepngfix.htc와 blank.gif 파일을 도큐먼트가 있는 폴더에 같이 복사하여 넣는다. 마지막으로 도큐먼트 CSS코드에 다음과 같이 입력하면 된다.
div, img {
    behavior: url(iepngfix.htc);
}

'WebApp > CSS' 카테고리의 다른 글

CSS 초기화  (1) 2010.05.30
가운데 정렬  (0) 2010.05.29
Posted by 마이클