vendredi 2 octobre 2009

IE6에서도 투명한 png이미지를 마음대로 써보자

IE6만 쓰던 시절엔 png투명이미지를 아예 쓸 생각을 하지않았는데, IE6이하를 제외한 거의 모든 브라우저,

심지어 IE조차 7부터는 png24 투명/반투명이미지를 지원하기에 단지 IE6때문에 유용한 png파일 사용을 못하기엔 안타깝다는 생각이 많이 든다.

 

예전부터 크게 두가지 방법이 있긴 했다.

1. DXImageTransform.Microsoft.AlphaImageLoader어쩌고로 시작하는 방법

배경에는 속성(repeat,position)적용이 안됨, 물론 배경이 아닌 단순한 이미지를 삽입하거나 배경에 repeat과 같은 속성이 필요없을시에는 요긴하게 쓰일수도있다.


2. iepngfix.htc 이런식의 IE전용인 .htc파일을 불러들여 IE에서만 읽고 실행하는 방법.

이방법이 계속 발전해서 투명 png 배경이미지속성까지 제어가 가능한 이곳의 버전2를 사용하기위해서는

기본적인 .htc파일과 css 배경 속성지원을 위한 .js파일 그리고 blank.gif 라는 작은 투명이미지등이 필요해 약간 귀찮아 보이긴 하지만, .img나 background에 관련된 css속성 지원, 투명png hover지원등 거의 완벽하게 IE6에서 png24투명이미지를 보통의 gif 나 jpg 파일처럼 쓸수있게되었다.

그런데 문제는 투명이미지의 경우 바로 투명으로 뜨지않고, 일전의 형식(이미지의 투명한 부분이 회색바탕으로 나오는)으로 우선 보였다가 .js 화일을 읽어들이고 나서야 투명이 되기때문에 페이지를 열었을때 깜박이는 fliker 현상이 일어난다는 점.

그리 가볍지도 않은 .js,.htc 파일을 항상 로드해야된다는점 등이 아쉬운점이었다.

 


위의 두가지 방법외에 몇가지 새로운 소스들이 있어 소개해 본다.

   

 Unit PNG Fix

2kb바이트도 채 안되는 자바스크립트 한줄의 추가로 모든것이 해결되는 정말 좋은 소스라고 생각된다.

   1: <!--[if lt IE 7]>
   2:         <script type="text/javascript" src="unitpngfix.js"></script>
   3: <![endif]-->

IE filter로 인한 깜박이는 문제(fliker) 해결, 자동으로 페이지 내 모든 투명이미지에 적용, auto width, auto height, background repeat 속성지원등 괜찮은 소스이다.

그러나 간혹 jquery를 이용한 dropdown menu 나 slide toggle 등이 z-index를 이용해 png배경위에 놓였을때 펼쳐지지 않을 때가있음이 발견되었고, background-position은 지원이 되지않는다.

IE6만을 위한 코드이므로 IE5.5 이하의 버전에서는 어찌될지 모르겠다.

우선 원하는 페이지에 적용해보고 이상이 없다면, 현재로선 가장 간단한 방법이 아닌가 싶다.

 

 Achieve alpha transparency in IE6 without the need of an HTTP request

별도의 자바스크립트를 추가하기 원하지 않는 사람들을위해 예전에 사용하던 1번방식이 좀더 발전된 소스라고 보면 되겠다.

   1: * html * { behavior: expres\sion( (this.runtimeStyle.behavior = "none") 
   2: && 
   3: (this.currentStyle.backgroundImage.toString().toLowerCase().indexOf('.png')>-1) 
   4: && ( this.runtimeStyle.filter = 
   5: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + 
   6: this.currentStyle.backgroundImage.toString().replace('url("','').replace('")','') 
   7: + "', sizingMethod='crop')", this.runtimeStyle.zoom = 1, 
   8: this.runtimeStyle.backgroundImage = "none" ) ); } 

CSS에 이런식으로 넣어주면 한꺼번에 페이지내 모든 투명 배경이미지를 제어할수있다.

발견된 문제점으로는 투명png 배경이미지가 있는 레이어위에 z-index로 다른 레이어를 얹었을때 그안에 있는 모든 링크나 버튼들이 클릭이 안된다는 점이다.

투명배경위에 링크나 메뉴버튼을 넣을 필요가 없는 경우엔 유용한 소스라고 할수있다.

 



Jquery plug-in을 이용한 투명이미지 출력방법도 몇가지 있다.

 

  jquery IE6 png transperency fix

해당싸이트에가서 jqPngFix.zip파일을 다운받아 적용한다. 배경은 지원이 되지않으며, 싸이트내 단순 .img 태그에만 적용한다.

   

jquery.pngFix.js PNG-Transparency

IE 5.5와 6을 지원하며, background에도 png를 적용할수있으나, repeat이나 position속성등은 쓸수없고

예전의 그것과는 약간 다른 느낌의 fliker현상이 발견되었다.

항상 png이미지가 포함되는 요소의 width와 height를 지정 해주어야 한다.

 

iFixPng improved

background-position은 지원하나 repeat은 지원이 안된다. 최신 버전에서는 background-position을 퍼센티지로도 지정할수있다.

 

 

 

마지막으로 jquery 플러그인은 아니지만 현재 블로그에 적용하고있는 소스를 소개해본다. 

 적용했었는데, 텍스트큐브엔 자바스크립트를 업로드 할수없어 다른데서 끌어쓰다가 그냥 없애버렸기때문에 현재 IE6에서는 블로그 투명테두리가 안보이도록 바꿔버렸다.

 DD_belatedPNG

7kb가량의 자바스크립트를 로드해야되지만(7kb가 무겁다는 얘기는 절대 아니다), 셀랙트박스, 라디오버튼, 이미지hover, javascript animation등에도 자유자재로 png투명이미지를 배경이나 버튼이미지로 넣을수있다.

광범위한 지원과 더불어 개발자의 끊임없는 업데이트도 눈에 띈다.

물론 fliker현상도 없다!


개인적으로는 첫번째와 마지막 소스를 추천하고싶다.

5 commentaires:

  1. 우와~ 이런 방법이 있었군요, 이걸 몰라서 애써 만든 스킨을 ie6에서 보고 수정할 엄두가 안 나서 다 지워 버린 기억이 있습니다. 좋은 정보 너무나 감사합니다.

    RépondreSupprimer
  2. @Popeye - 2009/10/14 13:08
    네 맞습니다. 애써 png넣어가며 정성들여 만들고 IE6에서 확인하는 순간 절망적이지요. ㅎㅎ

    좋은 정보가 되셨다니 저도 기분 좋습니다.

    RépondreSupprimer
  3. 보고 또 보고 ...

    그럴 때마다 생각나는 그 사람..



    Mr. 브..레..턴..



    ㅎㅎ ( 이 페이지만도 한 열 댓번은 연듯합니다 헤헤 )



    효과가 좋아요^^ 감사요^^ (Achieve alpha transparency in IE6 <--- 이거 썼음)









    ( 제가 사용한, Achieve alpha transparency in IE6 without the need of an HTTP request 라고 적힌게 추천하신 건가요? 추천품 2개를 정확하게 찝어 주세영^^ )

    RépondreSupprimer
  4. @Popeye - 2010/04/19 05:51
    이 페이지만 그렇게나요 ? ㅎㅎ

    블로그에 이러저러 웹에 관련된 잡다한 정보글도 자주 쓰고싶었는데, 맴처럼 안되더라구요.

    요즘은 시간나면 html5랑 css3를 들여다 보려고 하는데 뽀빠이님이 많이 배우셔서 저 좀 가르쳐 주세요 !



    제가 추천했던건 Unit PNG Fix 하고 DD_belatedPNG 였어요.



    근데, 텍큐는 자바스크립트를 업로드 할수없으니 골라 쓰신게 가장 적절할것 같아요. 본문에서 언급한것 처럼 특별히 작동하지 않는다거나 에러나는게 없다면 말이죠.

    RépondreSupprimer
  5. Unit PNG Fix

    이거 ie6에서 가끔 이미지 작게 처리되는 문제 없나요?

    오버플로 히든되는 현상이 생기네요;;;

    예를 들어 200 정사각 이미지라고 한다면

    30px * 30px만 보이고 나머지 부분은 모두 가려지는 현상이 생기네요;





    jquery IE6 png transperency fix

    이것은 대략 30px * 30px 정도로 축소되어보이고;;







    DD_belatedPNG

    이건 사용 법 좀 알려주세요;

    RépondreSupprimer