투명 PNG를 IE6에서 보이게 하는 방법 소개 #2 : 쉬운 방법 - ie7-js 활용

투명 PNG를 IE6에서 보이게 하는 어려운 방법에서 적은 내용은 이 글을 적기 위한 서문이었습니다.

google code에서 배포하는 코드들은 여러모로 쓸만하면서도 간결한 것들이 많습니다.
Code Highlighter도 google code에서 배포하는 것을 티스토리에서 활용한 것입니다.

이 중 ie7-js/ie8-js는 css 표준을 IE가 잘 지원하도록 도와주는 유용한 스크립트입니다.

아니, 도와준다기 보다는 css 표준을 잘 준수한다고 최면을 건다는 편이 더 맞습니다. 레드-썬!

간단하게 몇 줄의 코드만 스킨(skin.html)에 추가하면 동작하며 IE 계열의 약점인 표준 미준수 문제를 많이 해결해줍니다.

ie7-js와 ie8-js의 주요 기능은 아래와 같습니다.

• ie7-js(IE7.js) : MSIE 5,6을 IE7과 같이 동작하도록 최면을 검
  
  
• ie8-js(IE8.js) : MSIE 5-7에서 지원하지 못하는 CSS 기능들을 구현하게 최면을 검
  ※ IE8.js에는 IE7의 기능이 모두 포함되어 있음
  

이 js 중 하나만 사용하면 투명 PNG 문제를 포함한 CSS와 관련된 여러가지 문제를 해결해줍니다.

사용법은 간단합니다. 아래의 코드를 스킨파일(skin.html)의 헤더에 삽입하면 됩니다.

IE7.js

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"
  type="text/javascript"></script>
<![endif]-->

IE8.js

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js"
  type="text/javascript"></script>
<![endif]-->

※ 앞에도 설명했듯이, IE8.js를 사용할 때는 IE7.js를 사용할 필요가 없습니다.

단, 투명 PNG 파일을 저장할 때 png 파일은 파일명이 반드시 -trans.png로 끝나도록 지정해야 합니다.
스크립트 내에서 -trans.png 파일인 경우만 별도의 렌더러를 호출하도록 해주기 때문입니다.

투명 PNG 외에도 이 스크립트들이 해결해주는 호환성 문제가 꽤 많습니다.
상세한 기능들은 IE7/IE8 시험페이지를 보시면 볼 수 있습니다.

덧, 티스토리에 글을 포스팅할 때는 파일명 문제때문에 정상적으로 투명 PNG를 활용할 수 없습니다.