웹 디자인에 있어서 투명도가 섞인 PNG 그림 파일은 창의적인 디자인의 활용 폭을 넓혀주지만, 사용하는데는 한 가지 걸림돌이 있다. IE6에서 보여지는 alpha transparency가 적용된 PNG 파일은 흉측하기 마련. 그래서 여러가지 CSS hacks이 사용되기 마련인데, 그 중 가장 간단하고 효율적인 도구로 생각되는 것이 바로 Unit PNG Fix.
무엇보다도 사용법이 너무나 간단해서, 어떤 그림 파일의 조작 없이 아주 작은 크기(<1kb)의 js 파일을 올려두고 아래 코드를 추가해주면 다른 것은 잊어버려도 된다.
<!--[if lt IE 7]><script type="text/javascript" src="unitpngfix.js"></script><![endif]-->
더군다나, 최근(08.26.08) 또 새롭게 갱신되면서 과거 불가피하게 사용되던 clear.gif 그림 파일이 더는 필요 없게 되어 한결 사용이 쉬워졌다.
그나저나, 8월 27일로 IE6의 탄생 7 주년이라는데, 끈질긴 생명력에 지쳐가는 시선들만 쌓이는군.
덧붙임 (2008.12.20): 어쩌면 골치아픈 IE6의 PNG 문제를 시원하게 해결해 줄 수 있는 새로운 치료약의 등장일지도 모르겠다. 이름이 약간 기억하기에 생소한 DD_belatedPNG로 기존 해결책들의 단점을 모두 해소한 듯.
과거 문제가 되던 background-position (fixed 제외) 과 background-repeat 속성을 모두 지원하고, MS 전용 AlphaImageLoader 속서을 사용하지 않아서 z-index 관련 버그 걱정을 덜 수 있단다. IE를 위한 둥근 모서리 표시 기능을 제공하는 자매품 DD_roundies도 유용.
“Unit PNG Fix”에 달린 4개의 댓글
이 스크립트는 layout처음 잡을때 미리 선언되어 있어야 합니다. layout 다 작성한 후에 저 script를 불러오면 script내의 position이 난잡하게 사용되어서 layout이 난장판이 되더군요~ 참고하십쇼^^
원래 스크립트 자체가 DOM Layout을 다 읽어드리고 실행되게 되는데, 과거 absolutely positioned 요소가 흐트러지는 문제가 있었나 봅니다. 갱신 하루만에 또 다시 갱신되면서 이 문제가 완전 해결되었다고 하더군요.
헌데, 스크립트가 결국 과거 Micorosoft의 AlphaImageLoader filter 속성을 적용하는 연유로, png의 background-repeat 속성의 적용 문제 등, 이에 따라 생기는 부작용과 제약 사항은 결국 피할 수 없나봅니다만, 간단한 한방 해결책으로는 안성맞춤이라고 생각됩니다.
또, 특정 버전의 IE6에서 문제점을 보이면서, clear.gif가 다시 돌아왔네요. 끝까지 골칫거리네요. 😕
덕분에 고생하고 있던 문제를 잘 해결했습니다.
코드도 간단하고 해서 c v 신공으로 금세 해결 했답니다.
IE가 여러문제를 가지고 있었군요.
간단하고 쉬운 설명 감사드립니다!
아! 혹시 graybox와 제로보드 외부로그인 연동에 대해서 조언을 구할 수 있을까요?!ㅋ
좀 문제가 있네요.
자바스크립트 녀석이 말썽이라..ㅠ.ㅠ 😯
감사해요!
덕분에 문제를 쉽게 해결할 수 있었어요! ^^ 😯