IE6에서 PNG 투명 이미지를 표시하는 간단한 방법

블로그 팁 2008/07/16 23:43 Posted by 웹초보

웹사이트에서 많이 사용하는 투명 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로 편하게 구독해서 보세요~~

"블로그 팁" 분류의 다른 글

복구 불가능의 웹사이트 컨텐츠를 찾아주는 Warrick (16)

블로그 사이드바에 구글 맞춤검색 손쉽게 넣기 (7)

블로그의 사이드바를 위한 무드 위젯 Moodget (16)

HTML 이메일 주소를 이메일 추출기로부터 보호하기 (17)

구글 검색 결과의 충격적인 클릭율 순위 (11)

TAG IE6, png, 브라우저, 이미지, 투명, 팁

트랙백 0개, 댓글 27개가 달렸습니다.

TRACKBACK :: http://choboweb.com/trackback/348

댓글을 달아 주세요

seevaa 수정/삭제 댓글쓰기
웹초보님 이거 믹스업해드리려구 눌렸는데 누르면 믹스로긴창이 뜨잖아요~
믹스 제아이디가 seevaa인데 s를 누르자마자 단축키로 인식해서 다음페이지로 넘어가버리네요~

암튼, 그동안 귀찮았는데 IE6을 위해 한줄 넣어야겠어요~
2008/07/17 02:30
- 웹초보 수정/삭제
  엥.. 왜 단축키로 인식을 하는걸까요.. ;;
  믹시에서 요번에 텍스트큐브용 플러그인을 업데이트 했던데.. 그것을 설치해봐야 겠네요.. ^^;
  그리고 믹시 추천 넘넘 감사합니다..
  2008/07/17 11:36
회색코끼리 수정/삭제 댓글쓰기
비스타라 IE7~
그리고 저는 파폭파폭~
2008/07/17 04:12
- 웹초보 수정/삭제
  저도 파폭파폭~ ^^;
  2008/07/17 11:36
헨리 수정/삭제 댓글쓰기
전 저런 부분은 아예 ie6을 무시하고는 디자인을 할때도 있습니다 -_-... 요즘 새브라우저들이 앞다퉈 나오고있을때 저런 몇년씩이나 된 브라우저를 고려하려니 머리가 아파서..끙 ㅠㅠ
2008/07/17 12:50
- 웹초보 수정/삭제
  그렇다고 아직도 점유율이 50% 이상인 IE6를 무시할수도 없고.. 아주 골치 아프지요.. ㅡ.ㅡ
  2008/07/17 15:24
Drake 수정/삭제 댓글쓰기
님 진짜 나쁘네요

이미 초보도 아니시면서.

제가 보는 초보 / 고수의 기준은, 어떤 문제에 봉착했을 경우 최대한 간결하게 해결하는 분들입니다.

그건 제가 하나의 게임 어플리케이션을 8년간 업그레이드해온 경험에 의한 것이라죠..

빠르고 안정적인 코드를 생성하기 위한 방법은, 할 수 있는 가장 간단한 코드로 작성되어야 한다는 것이겠지요.

IE6 호환성을 염두에 두기 위해 컬러를 희생하는 방법도 있을테고(가장 일반적인 방법), 브라우저 버전을 확인하여 따로 페이지를 만드는 방법도 있을테고..

이미 모든 페이지를 PNG에 맞추어 개발했을 경우 유용하게 사용될것 같습니다.

긴장하십시오. 당신은 더이상 초보가 아닙니다.

그러므로 더욱더 공부하셔야 할 것입니다.

고수들은 항상 초보들보다 더 많이 공부하지요.
2008/07/17 14:26
- 웹초보 수정/삭제
  저는 어떤 문제에 봉착했을때 쉴새없이 삽질을 하기 때문에 드레이크님이 말하는 기준의 고수가 아닙니다.. ㅎㅎ
  그래도 드레이크님의 따뜻한 충고는 언제나 간직하고 살겠습니다.. ^^;
  2008/07/17 15:26
인게이지 수정/삭제 댓글쓰기
우리나라 라면 "이 페이지는 IE 7.0 이상, FF 2.0 이상에 최적화 되어있습니다" 라는

전통에 빛나는 문구로 처리하는 분들도 꽤 있겠죠...
2008/07/17 16:16
- 웹초보 수정/삭제
  ㅋㅋ.. 그렇죠.
  한때는 그게 멋있다고 생각한적도 있었습니다.. -_-;
  2008/07/17 17:33
별바람 수정/삭제 댓글쓰기
역시 고수이십니다. 아니 구루레벨(고수를 뛰어넘은 전문가급레벨)인가요?
2008/07/17 17:00
- 웹초보 수정/삭제
  이크.. 이거 왜이러십니까.. 제가 구루면 별바람님은 마스터? -_-b
  2008/07/17 17:34
아크몬드 수정/삭제 댓글쓰기
좋은 팁이네요! ㅋㅋ
2008/07/17 23:52
- 웹초보 수정/삭제
  감사합니다.. ㅋㅋ
  2008/07/18 12:44
강짱 수정/삭제 댓글쓰기
좋은팁이네요...
그런데 오페라에서는 스크립트를 쓰니
png 이미지가 안보이네요..흠..
나만그런건가..
2008/07/18 13:57
- 웹초보 수정/삭제
  제가 적용한 것은 오페라에서 이상없이 보이던데요.. 아무래도 너무 간단한 스크립트라 그런지 군데군데 허점이 보이는것 같아요.. ^^;
  2008/07/19 16:20
Drake 수정/삭제 댓글쓰기
제로보드xe에 적용해보니 약간 문제가 생기는듯 합니다.

자체컴포넌트가 없다면야 스크립트를 사용해야겠습니다만..

컴포넌트가 있는데 적용하면 컴포넌트까지 건드리는듯 합니다....

코드를 보니 모든 레이어에서 png를 찾아 클리어해주는것으로 보이는데,

사용은 그리 어렵지 않으나, 그만큼 리스크도 따르는군요.

웹이용은 파이어폭스, 제작은 사파리기반으로 다루다보니 이런 문제가 발생하는군요..

그냥 ie6에 activex 떡칠해서 만들걸 그랬나..
2008/07/19 14:28
- 웹초보 수정/삭제
  네.. 아직 몇군데에서 단점이 노출되는것 같아요.. 일단 적용해보고 잘되면 그대로 쓰고 아니면 다른 방법을 적용해야 할듯합니다.. ;;
  그나저나 이보다 더 큰 문제는 퇴출될 브라우저인 IE6에 여태까지 맞춰야 한다는 사실이.. ㅠㅠ
  2008/07/19 16:22
강짱 수정/삭제 댓글쓰기
이제는 IE6에서 테이블과충돌을 일으키는지
글자나 input 박스들이 테이블 위로 다 붙어 버리는군요.허허허..
2008/07/21 11:30
- 웹초보 수정/삭제
  그러게요.. 몇군데서 사용해보니 버그들이 눈에 띄네요.. 아무래도 나중에 업데이트 나오면 다시 적용해봐야 할 듯.. -_-;
  2008/07/21 22:52
JJEONG 수정/삭제 댓글쓰기
감사합니다. 잘쓸께요 ^^
그리고 다른 브라우저에서 이 스크립트를 막으려면 자바스크립트로 IE6일 때만 onload 시에 실행하게 해주면 될 거 같은데요.

if(navigator.appVersion.indexOf('MSIE 6') != -1)
window.attachEvent('onload', pngfix);
2008/12/17 19:37
- 웹초보 수정/삭제
  좋은 정보를 제공해 주셔서 오히려 더 감사하네요.. ^^
  2008/12/18 12:09
LAVENTER 수정/삭제 댓글쓰기
웹초보님 블로그 아주 잘 활용하고 있습니다 ㅠㅠ도대체 뭐가! 왜! 웹초보이신지 ㅋㅋㅋㅋㅋㅋ
블로그 막 시작한 저에게 한줄기 빛이십니다 후후후후
2009/02/02 20:40
- 웹초보 수정/삭제
  헛.. 그렇게 말씀해 주시니 영광입니다.. ㅎㅎ
  2009/02/03 06:32
방랑객 수정/삭제 댓글쓰기
근데요 왜 이소르를 쓰면 이미지는 투명으로 나오는데 좌측 상단에 엑스표시가 조그맣게 나오나요.??
리사이징되서 보여지는 이미지는 리사이징이 풀리고요..
글고...배경으로깔린 png도 지원하는건가요??
2009/03/03 00:57
- 웹초보 수정/삭제
  간단한 방법이긴 한데.. 아직까지 완벽하지는 않은 것 같아요. 조만간 더 좋은 방법 정리해서 올리겟습니다.. ㅡ.,ㅡ
  2009/03/03 01:31
cornet 수정/삭제 댓글쓰기
소스가 간결하고 좋습니다..
하지만 옥에 티... 좌측마진값을 제로로 만들어 버려서 전체적인 레이아웃이 망가져 버리네요..
다른 방법을 사용해야 되겠습니다. ^^
2009/06/15 22:00