얼마나 잘 만든 브라우져이길래 IE6은 png 이미지 파일을 회색으로 보이게 할까요.ㅎㅎㅎㅎ
많은 사람들이 ie 6을 사용하기에 이점을 무시할수는 없습니다.
ie6의 경우 아예 렌더링 엔진 자체가 없습니다. ie7이 되서야 Triden 엔진을 사용합니다.고로 ie6에서는 png 이미지 파일을 회색배경으로 보이게 하는 버그가 있습니다.
이 문제를 해결하기 위해 많은 자바스크립트 파일이 존재하는것으로 알고 있습니다. 그중에서 제가 사용해본결과 가장 좋은넘을 소개합니다.
바로 DD_lelatedPNG 입니다.
다른것은 background-position을 이용하지 못하는 등 제약이 있지만 이는 그런 제약도 없습니다.
물론 다 되는것은 아닙니다만 많이 사용하는것중에 전 이것이 제일 나아보입니다.

사용법

DD_lelatedPNG를 사용하는 방법을 알려드립니다.
우선 홈페이지에서 js 파일을 다운로드 하세요.
첨부해서 올려드립니다.



이 파일을 HTML/CSS 스킨편집창에서 업로드하세요.
그다음 html 편집창에서 </head>위에 아래의 코드를 넣으세요. 아래처럼요.


<head>
....
<!--[if IE 6]>
<script type="text/javascript" src="./images/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
	DD_belatedPNG.fix('.png');
</script>
<![endif]-->
</head>



자 이로써 모든 준비는 끝났습니다. 조건부 주석을 사용함으로써 다른 브라우져는 저 js파일을 읽지않고 IE6만 저 js파일을 읽습니다.
이제 사용해볼까요....
이전에 작성한 이미지를 이용한 제목 서식을 예로 들어보겠습니다.
두가지 방법으로 이용하는 방법이 있습니다.
하나는 div 자체에 클래스를 지정하는 방법과 head에 삽입한 코드를 수정하는 방법입니다.
이미지를 이용한 제목서식의 클래스가 아래와 같았습니다.


<div class="post_title_h3">
	제목
</div>



이걸 아래처럼 수정하면 됩니다.


<div class="post_title_h3 png">
	제목
</div>



어때요? 아주 간단하죠. 
이렇게 간단한것도 모르면 머리 아픕니다. 저도 모를때는 누가 가르쳐주지 않으니 번역본을 몇번씩 읽곤 했었습니다.ㅎㅎㅎㅎㅎ
적용전과 적용후의 스샷을 참고해보세요.
이미지를 클릭하시면 크게 보실수 있습니다.

적용전

적용후



이로써 간단이 png 이미지 파일을 ie 6에서도 동일하게 보이게끔 할수 있습니다.