웹사이트에서 많이 사용하는 투명 PNG 이미지를 요즘 브라우저들은 대부분 무난하게 처리해 주지만, 유독 IE6에서만 투명한 부분을 회색으로 표시해 문제가 생기는데요.
원래 왼쪽 이미지 처럼 보여야 정상인데.. IE6에서는 오른쪽 이미지 처럼 나옵니다.. –_-;
이를 해결하기 위한 여러가지 꼼수가 있지만.. 얼마전에 업데이트된 Unit PNG Fix를 사용하면 상당히 간편하게 해결 할 수 있네요.
1. 먼저 파일을 다운로드 받아서 압축을 풀고 clear.gif 파일과 unitpngfix.js 파일을 FTP로 서버에 올립니다. 자바스크립트 파일의 첫번째 줄에 clear.gif 파일의 경로가 루트 밑의 /images 폴더로 지정되어 있으니, js 파일을 수정할게 아니면 clear.gif 파일을 그냥 /images 폴더를 만들어 넣어주는게 좋겠죠. 그리고 clear.gif 파일은 투명 문제를 해결하려는 다른 이미지들과 같은 위치에 있어야 합니다.
2. 아래 코드를 헤더에 넣어줍니다. 물론 .js 파일의 경로는 서버에 올린 파일 경로와 일치해야 합니다.
<script type="text/javascript" src="unitpngfix.js"></script>
이상 끝입니다.. ㅎㅎ
제생각엔 비교적 간단한 방법인것 같은데 써넣고 보니 괜히 어렵게 느껴지네요.. –_-;
아무튼 자바스크립트 용량이 1kb 밖에 안되서 상당히 가벼울뿐더러, 매번 png 파일의 이미지를 바꾸거나 클래스 등의 정의가 필요 없이 설치도 쉽기 때문에.. 저같은 초보자들에게는 꽤나 편리한 해결 방법 같아요.. ^^;
웹초보의 Tech 2.1 한RSS로 구독하기RSS가 무엇인지 궁금하시면 한RSS 만화 가이드~
큰바위얼굴
웹초보님 이거 믹스업해드리려구 눌렸는데 누르면 믹스로긴창이 뜨잖아요~
믹스 제아이디가 seevaa인데 s를 누르자마자 단축키로 인식해서 다음페이지로 넘어가버리네요~
암튼, 그동안 귀찮았는데 IE6을 위해 한줄 넣어야겠어요~
엥.. 왜 단축키로 인식을 하는걸까요.. ;;
믹시에서 요번에 텍스트큐브용 플러그인을 업데이트 했던데.. 그것을 설치해봐야 겠네요.. ^^;
그리고 믹시 추천 넘넘 감사합니다.. :)
비스타라 IE7~
그리고 저는 파폭파폭~
저도 파폭파폭~ ^^;
전 저런 부분은 아예 ie6을 무시하고는 디자인을 할때도 있습니다 -_-... 요즘 새브라우저들이 앞다퉈 나오고있을때 저런 몇년씩이나 된 브라우저를 고려하려니 머리가 아파서..끙 ㅠㅠ
그렇다고 아직도 점유율이 50% 이상인 IE6를 무시할수도 없고.. 아주 골치 아프지요.. ㅡ.ㅡ
님 진짜 나쁘네요
이미 초보도 아니시면서.
제가 보는 초보 / 고수의 기준은, 어떤 문제에 봉착했을 경우 최대한 간결하게 해결하는 분들입니다.
그건 제가 하나의 게임 어플리케이션을 8년간 업그레이드해온 경험에 의한 것이라죠..
빠르고 안정적인 코드를 생성하기 위한 방법은, 할 수 있는 가장 간단한 코드로 작성되어야 한다는 것이겠지요.
IE6 호환성을 염두에 두기 위해 컬러를 희생하는 방법도 있을테고(가장 일반적인 방법), 브라우저 버전을 확인하여 따로 페이지를 만드는 방법도 있을테고..
이미 모든 페이지를 PNG에 맞추어 개발했을 경우 유용하게 사용될것 같습니다.
긴장하십시오. 당신은 더이상 초보가 아닙니다.
그러므로 더욱더 공부하셔야 할 것입니다.
고수들은 항상 초보들보다 더 많이 공부하지요.
저는 어떤 문제에 봉착했을때 쉴새없이 삽질을 하기 때문에 드레이크님이 말하는 기준의 고수가 아닙니다.. ㅎㅎ
그래도 드레이크님의 따뜻한 충고는 언제나 간직하고 살겠습니다.. ^^;
우리나라 라면 "이 페이지는 IE 7.0 이상, FF 2.0 이상에 최적화 되어있습니다" 라는
전통에 빛나는 문구로 처리하는 분들도 꽤 있겠죠...
ㅋㅋ.. 그렇죠.
한때는 그게 멋있다고 생각한적도 있었습니다.. -_-;
역시 고수이십니다. 아니 구루레벨(고수를 뛰어넘은 전문가급레벨)인가요? :)
이크.. 이거 왜이러십니까.. 제가 구루면 별바람님은 마스터? -_-b
좋은 팁이네요! ㅋㅋ
감사합니다.. ㅋㅋ
좋은팁이네요...
그런데 오페라에서는 스크립트를 쓰니
png 이미지가 안보이네요..흠..
나만그런건가..
제가 적용한 것은 오페라에서 이상없이 보이던데요.. 아무래도 너무 간단한 스크립트라 그런지 군데군데 허점이 보이는것 같아요.. ^^;
제로보드xe에 적용해보니 약간 문제가 생기는듯 합니다.
자체컴포넌트가 없다면야 스크립트를 사용해야겠습니다만..
컴포넌트가 있는데 적용하면 컴포넌트까지 건드리는듯 합니다....
코드를 보니 모든 레이어에서 png를 찾아 클리어해주는것으로 보이는데,
사용은 그리 어렵지 않으나, 그만큼 리스크도 따르는군요.
웹이용은 파이어폭스, 제작은 사파리기반으로 다루다보니 이런 문제가 발생하는군요..
그냥 ie6에 activex 떡칠해서 만들걸 그랬나..
네.. 아직 몇군데에서 단점이 노출되는것 같아요.. 일단 적용해보고 잘되면 그대로 쓰고 아니면 다른 방법을 적용해야 할듯합니다.. ;;
그나저나 이보다 더 큰 문제는 퇴출될 브라우저인 IE6에 여태까지 맞춰야 한다는 사실이.. ㅠㅠ
이제는 IE6에서 테이블과충돌을 일으키는지
글자나 input 박스들이 테이블 위로 다 붙어 버리는군요.허허허..
그러게요.. 몇군데서 사용해보니 버그들이 눈에 띄네요.. 아무래도 나중에 업데이트 나오면 다시 적용해봐야 할 듯.. -_-;