티스토리 뷰



[크로스브라우징] ie6에서 png파일 투명하게 하기

ie6 png 검색을 하면 익스프로러 6버젼의 문제점 해결하는 방법이 많이 나와있습니다. 하지만 시대가 변화고 프로그램도 계속변화고 있기에 익스프로러 6에서 png배경 제거하는 방법도 여러가지로 변화하고 있습니다. 그 중 가장 대표적인 방법을 소개합니다. 제일 최신버젼이긴 하지만 다른 방법을 사용해도 무관합니다.

우선 다음 그림 파일들의 차이점을 알아보겠습니다.

JPG 파일 : 압축파일 ㆍ 화질도 좋고 용량도 적음
GIF 파일 : 압축파일 ㆍ 256가지 색 표현 ㆍ 투명도 표현 가능
PNG 파일 : 압축파일 ㆍ 화질은 좋은나 용량이 큼 ㆍ 투명도 표현 가능
BMP 파일 : 원본파일 ㆍ 화질도 좋고 용량도 큼

투명도 표현이 가능한 GIF 파일을 쓰면 좋지만 화질이 좋지 않기 때문에 PNG파일을 써야 하는 경우가 있습니다.
하지만 ie6은 png파일의 투명도를 인식하지 못하기 때문에 자바스크립의 도움이 필요합니다.
자바스크립을 이용한 png투명 배경을 제거하는 법을 배워보겠습니다.




다음은 2개의 PNG 파일을 브라우져로 열어을때의 화면입니다.
[IE 9버젼용 이미지]




다음은 2개의 PNG 파일을 브라우져로 열어을때의 화면입니다.
[IE 8버젼용 이미지]




다음은 2개의 PNG 파일을 브라우져로 열어을때의 화면입니다.
[IE 7버젼용 이미지]




다음은 2개의 PNG 파일을 브라우져로 열어을때의 화면입니다.
[IE 6버젼용 이미지]
왼쪽은 자바스크립을 이용한 화면이고요 오른쪽은 그냥 이미지 파일입니다.

소스파일 다운받기

 




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ie6 PNG 적용하기</title>
<script src="자바스크립있는 주소입력" type="text/livescript"></script>
<script type="text/javascript">
DD_belatedPNG.fix('.png');
DD_belatedPNG.fix('.png2');
</script>
<style type="text/css">
#wrap {width:1100px; height:900px; margin:0 auto;}
#no01 {width:1000px; height:600px;}
</style>
</head>
<body>
<div id="wrap">
 <div id="no01"><img src="light.png" width="500" height="531" alt="dd" class="png" /><img src="light.png" width="500" height="531" alt="dd" /></div>
</div>
</body>
</html>

간단한 DIV구조로 짜고
자바스크립을 불러온 구조입니다.
투명하게 할 이미지에 class를 설정해주고
DD_belatedPNG.fix('.png');에
연동시켜주면.....자바스크립이랑 연결이 되겠죠^^


간단한 자바스크립 소스를 이용한 png이미지 파일 배경 투명하기를 배워봤습니다. 자바스크립을 이용하면 더욱더 효율적인 크로스브라우징 작업을 할 수 있지만 어느 정도의 선이 있어야 합니다. 충분히 html과 css로 구현 가능한 것도 자바스크립트를 이용한면 웹표준과 크로스브라우징에 어긋나는 경우도 많거든요^^








댓글
댓글쓰기 폼