CSS2/3
ie6에서 PNG 사용하기
★버드나무★
2011. 3. 4. 11:52
아직까지 ie6 호환성을 고려해야 하는 것이 현실..
기업들의 오래된 시스템 환경에서는 어쩔수없이 ie6을 사용하는 경우도 많다는데..
그러나 앞으로는 웹사이트 제작사들이 아예 ie6에서 제대로 작동하지 않게 만들어야
사용자들도 다른 브라우저로 갈아타든지 업그레이드 하든지 할듯..
사족이었습니다~
반투명을 지원하는 png 포맷 이미지를 ie6 이하 버전 브라우저에서만 지원을 하지 않고,
배경을 회색으로 표시해버립니다.
ie6에서 png를 사용하기 위한 방법으로 여러가지가 있는데,
a 링크가 안되는 문제등을 생각했을 때 아래 방법이 제일 좋다고 생각됩니다.
1. DD_belatedPNG.js 사용(7kb)
먼저 아래 링크에서 js 파일을 다운받고,
http://www.dillerdesign.com/experiment/DD_belatedPNG/
해당문서 head 영역에 아래와 같이 넣어줍니다.
<!--[if IE 6]>
<script type="text/javascript" src="DD_belatedPNG.js"></script>//스크립트파일을 가져옵니다
<script type="text/javascript">
DD_belatedPNG.fix('.png_bg'); //1. png_bg 클래스가 적용된 png 파일에 작동합니다.
DD_belatedPNG.fix('.class img'); //2. png_bg 클래스 하위에 있는 img들에게 작동합니다.
</script>
<![endif]-->
위 명령에서 1번은, 적용하고 싶은 png 파일에 png_bg 클래스를 적용해주면 됩니다.
2번은 해당 클래스 안에 있는 img들에게 적용해주라는 뜻입니다.
상황에 맞게 해당 img에 직접 클래스를 지정해주거나, 이미지가 많을때는 상위 클래스를 이용해서 2번처럼 추가해 주시면 되겠죠?^^
2. unitpngfix.js 사용(1kb)
먼저 아래 링크에서 js 파일을 다운받고,
http://labs.unitinteractive.com/unitpngfix.php
압축을 풀면 clear.gif 파일과 unitpngfix.js 파일이 있는데,
js 파일 첫줄에 clear.gif 파일의 경로를 맞추어 줍니다.
clear.gif 파일은 png 파일이 들어있는 폴더에 함께 넣어줍니다.
해당문서 head 영역에 아래와 같이 넣어줍니다.
<!--[if IE 6]>
<script type="text/javascript" src="unitpngfix.js"></script>//스크립트를 불러옵니다.
<![endif]-->
1번 방식보다 js 용량도 적고 스크립트를 import 시키기만 하며 사이트 모든 png 파일에 적용되기에 간단한 방법입니다만, 일괄적으로 적용한다는 것에 웬지 모를 찝찝함이 있네요. 그리고 배경으로 png가 사용된 곳의 a 링크가 작동안되는 단점이 있습니다. 필요에 따라 함께 사용하시면 좋을듯^^
기업들의 오래된 시스템 환경에서는 어쩔수없이 ie6을 사용하는 경우도 많다는데..
그러나 앞으로는 웹사이트 제작사들이 아예 ie6에서 제대로 작동하지 않게 만들어야
사용자들도 다른 브라우저로 갈아타든지 업그레이드 하든지 할듯..
사족이었습니다~
반투명을 지원하는 png 포맷 이미지를 ie6 이하 버전 브라우저에서만 지원을 하지 않고,
배경을 회색으로 표시해버립니다.
ie6에서 png를 사용하기 위한 방법으로 여러가지가 있는데,
a 링크가 안되는 문제등을 생각했을 때 아래 방법이 제일 좋다고 생각됩니다.
1. DD_belatedPNG.js 사용(7kb)
먼저 아래 링크에서 js 파일을 다운받고,
http://www.dillerdesign.com/experiment/DD_belatedPNG/
해당문서 head 영역에 아래와 같이 넣어줍니다.
<!--[if IE 6]>
<script type="text/javascript" src="DD_belatedPNG.js"></script>//스크립트파일을 가져옵니다
<script type="text/javascript">
DD_belatedPNG.fix('.png_bg'); //1. png_bg 클래스가 적용된 png 파일에 작동합니다.
DD_belatedPNG.fix('.class img'); //2. png_bg 클래스 하위에 있는 img들에게 작동합니다.
</script>
<![endif]-->
위 명령에서 1번은, 적용하고 싶은 png 파일에 png_bg 클래스를 적용해주면 됩니다.
2번은 해당 클래스 안에 있는 img들에게 적용해주라는 뜻입니다.
상황에 맞게 해당 img에 직접 클래스를 지정해주거나, 이미지가 많을때는 상위 클래스를 이용해서 2번처럼 추가해 주시면 되겠죠?^^
2. unitpngfix.js 사용(1kb)
먼저 아래 링크에서 js 파일을 다운받고,
http://labs.unitinteractive.com/unitpngfix.php
압축을 풀면 clear.gif 파일과 unitpngfix.js 파일이 있는데,
js 파일 첫줄에 clear.gif 파일의 경로를 맞추어 줍니다.
clear.gif 파일은 png 파일이 들어있는 폴더에 함께 넣어줍니다.
해당문서 head 영역에 아래와 같이 넣어줍니다.
<!--[if IE 6]>
<script type="text/javascript" src="unitpngfix.js"></script>//스크립트를 불러옵니다.
<![endif]-->
1번 방식보다 js 용량도 적고 스크립트를 import 시키기만 하며 사이트 모든 png 파일에 적용되기에 간단한 방법입니다만, 일괄적으로 적용한다는 것에 웬지 모를 찝찝함이 있네요. 그리고 배경으로 png가 사용된 곳의 a 링크가 작동안되는 단점이 있습니다. 필요에 따라 함께 사용하시면 좋을듯^^