Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

I LOVE EJ

PNG 포멧 용법 본문

Web publishing/웹 표준

PNG 포멧 용법

BeOne 2009. 10. 25. 16:02

PNG-24 Check
사용자 삽입 이미지

CSS/JS

가장 많이 알려져 있는 방법으로 인터넷 익스플로어의 필터속성을 이용하여 png의 투명/반투명 효과를 만들어준다. 자바스크립트로 작성된 png를 투명하게 처리해주는 스크립트를 작성하고, 이를 stylesheet에서 호출하는 방식이다. 하지만 이 방법의 경우 IMG Element에서만 적용할수 있다는 단점이 있고, 투명 배경 처리를 위해서는 .bgIE6과 같이 별도의 스타일을 지정해줘야 한다.

Stylesheet
.png24 { tmp:expression(setPng24(this)); }

Javascript
function setPng24(obj)
{
    obj.width = obj.height = 1;
    obj.className = obj.className.replace(/\bpng24\b/i,'');
    obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src +"',sizingMethod='image');"
    obj.src = '';
    return '';
}

배경처리를 위한 추가코드

IE6에서 투명 배경을 처리하기 위해서는 아래와 같이 style문서안에 IE6을 위한 별도의 스타일을 지정하거나, HTML문서 Head Element안에 Hack을 이용한 방법으로 처리해야 한다.

방법1

.bg { width: 114px; height: 60px; background: url('img_logo.png') no-repeat 0 0; }
* html .bg { background-image : none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img_logo.png',sizingMethod='scale'); }

위 방법은 .bg에서 png배경을 기본값으로 배경에 설정한 것이고, 다시 * html 핵을 사용해서 IE6에만 배경을 재설정한 것이다.

방법2

<head>
<!--[if IE]>
<style type="text/css">
.bg {
    background-image : none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img_logo.png',sizingMethod='scale');
}
</style>
<![endif]-->
</head>

위 방법은 스타일 문서에 정의하지 않고, HTML문서 내에 직접 작성할때 사용하는 것으로, <--[if IE]> 와 <![endif]-->를 이용한 핵을 사용한다.

HTC

Stylesheet
.iePngFix {behavior:url(iepngfix.htc);}

HTC

이 방법은 twinhelix에서 확인해볼수 있는 방법인데 이미지 앨리먼트와 배경을 동시에 처리할 수 있고, 스타일 문서에 별도의 핵을 사용하지 않아도 된다. 아울러 IE5.5 이상의 익스플로어에서 적용 가능하여, 위의 방법보다는 권장할 수 있는 방법이라고 생각됩니다. 또한, 애플등의 사이트에서도 적용하여 사용하는 것으로 보아 심각한 문제를 일으키지는 않는것으로 보입니다.(나라디자인 참조 문서 확인)

<public:component>
<public:attach event="onpropertychange" onevent="doFix()" />

<script type="text/javascript">
// IE5.5+ PNG Alpha Fix v1.0RC4
// (c) 2004-2005 Angus Turnbull http://www.twinhelix.com
// This is licensed under the CC-GNU LGPL, version 2.1 or later.
// For details, see: http://creativecommons.org/licenses/LGPL/2.1/
// This must be a path to a blank image. That's all the configuration you need.

if (typeof blankImg == 'undefined') var blankImg = 'blank.gif'; // 1x1px 짜리 투명 이미지(blank.gif)의 경로를 변경.
var f = 'DXImageTransform.Microsoft.AlphaImageLoader';

function filt(s, m)
{
 if (filters[f])
 {
  filters[f].enabled = s ? true : false;
  if (s) with (filters[f]) { src = s; sizingMethod = m }
 }
 else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
}

function doFix()
{
 // Assume IE7 is OK.
 if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
  (event && !/(background|src)/.test(event.propertyName))) return;

 var bgImg = currentStyle.backgroundImage || style.backgroundImage;

 if (tagName == 'IMG')
 {
  if ((/\.png$/i).test(src))
  {
   if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
    style.width = offsetWidth + 'px';
   filt(src, 'scale');
// 'scale' 을 'image' 으로 변경하면 padding 적용시 나타나는 이미지 크기의 변화(잘못된 렌더링)를 방지할 수 있다. 하지만 border 표현에 문제가 생긴다.
   src = blankImg;
  }
  else if (src.indexOf(blankImg) < 0) filt();
 }
 else if (bgImg && bgImg != 'none')
 {
  if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
  {
   var s = RegExp.$1;
   if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
    style.width = offsetWidth + 'px';
   style.backgroundImage = 'none';
   filt(s, 'crop');
   // IE link fix.
   for (var n = 0; n < childNodes.length; n++)
    if (childNodes[n].style) childNodes[n].style.position = 'relative';
  }
  else filt();
 }
}

doFix();

</script>
</public:component>

참고링크

본 내용은 이미 인터넷에 여러번 올라온 내용을 재탕하고자 한 것은 아니고, 제가 참여하는 스터디모임에서 사용할 목적으로 작성된 것입니다. png의 개념과 HTC사용과 관련한 문제와 설명은 아래 나라디자인에서 한번더 확인해보시면 좋을것 같습니다.

출처 : http://www.pageoff.net/666?srchid=BR1http%3A%2F%2Fwww.pageoff.net%2F666

저작자표시

'Web publishing > 웹 표준' 카테고리의 다른 글

html5 관련 tag  (0) 2010.03.30
하단에 clear하는 방법 및 상단 위치 마추는 방법  (1) 2010.03.30
Internet Explorer 6 - IE6 (익스플로러) PNG 이미지 투명처리  (0) 2009.11.06
왜 table을 안쓰고 div를 쓰나.. 웹표준?  (2) 2009.05.13
테이블은 이제 그만 쉬어야 할 때.  (0) 2007.10.15
'Web publishing/웹 표준' Related Articles more