'2009/08/06'에 해당되는 글 3건
- 2009.08.06 (사) 김해문화연구소
- 2009.08.06 [펌] [CSS] IE6리하 PNG 투명값처리 소스들..
- 2009.08.06 [펌][CSS] PNG 포멧 용법
이번건 제법 내부가 튼실하게 된거 같다.
관리자 모드를 40프로 정도 완성했을때 급하게 일정이 당겨지는 바람에 엉망이 되긴했지만... 흑
아직 관리자모드 일단 필요한것만 완성을 하고 다음버전에는 기능을 더 추가시켜야 할거 같다.
근데... 나도 플래시, html, 데이터베이스, asp, 자바스크립트, 디자인까지...
모두 분리된 환경에서 일해보고 싶기도 하다.
혼자서 카테고리 짜내고 시안 2장 달랑 받아서 쪼개고 html 짜고 스크립트 짜고 asp짜고 플래시 만들고 테스트까지 하는건 너무 힘들단 말이다.........
그래서 항상 결과물이 안 좋은듯 -_-;
아 그런데 왜 티스토리 글작성시 스크롤이 휠로 안되냔 말이다!
방금은 링크도 안되서 수동으로 해주고, 쉬프트 선택도 안된다.
오페라라서 그런가
'포토폴리오' 카테고리의 다른 글
| 에코뷰 리뉴얼 중 (0) | 2010.03.04 |
|---|---|
| 대영솔라텍 (0) | 2009.08.26 |
| 쏠라텍 작업중... (0) | 2009.08.13 |
| 2009 한일스포츠 관광대축제 (0) | 2009.07.29 |
다운로드->>http://www.twinhelix.com/css/iepngfix/iepngfix.zip
다운로드
blank.gif와 iepngfix.htc파일을 원하는경로에 놔둡니다.(단 blank.gif 경로에따라 iepngfix.htc에서 경로바꿔야 하는듯)
CSS에 behavior: url(iepngfix.htc); 추가
문제점: 내부에 하이퍼링크(<a href~~~></a>)가 있는경우 IEPNGFix:Childeren of posioned element are unclickable이라고 에러가뜸
1.다운로드
1.다운로드
여제
TAG
<ul id="test"><li><a href="#">sdsd</a></li></ul>
CSS
#test{ position:relative; left:100px; top:100px; behavior: url(iepngfix.htc); background: #fcc url(image/pic.png) no-repeat 0 0;height:250px; width:250px;}
2)unit-png-fix (http://labs.unitinteractive.com/unitpngfix.php)
다운로드->>http://labs.unitinteractive.com/downloads/unitpngfix.zip
다운로드
clear.gif와 unitpngfix.js파일을 원하는경로에 놔둡니다.(역시 clear.gif ,unitpngfix.js 경로지정 주의)
태그에<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->추가
문제점: CSS의 포지션지정,z-index 증 몇몇이 안먹힘 불가.....
예제
<head>
<title>무제 문서</title>
<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->
<style type="text/css">
#test{ position:relative; left:100px; top:100px; background: #fcc url(image/05mainnavi.png) no-repeat 0 0;height:250px;
</style>
</head>
<body>
<ul id="test"><li><a href="#">sdsd</a></li></ul>
</body>
3)DD_belatedPNG.fix(http://www.dillerdesign.com/experiment/DD_belatedPNG/)
다운로드->>http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.7a.js
다운로드
clear.gif와 unitpngfix.js파일을 원하는경로에 놔둡니다.(역시 clear.gif ,unitpngfix.js 경로지정 주의)
html에<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('#test')
</script>
<![endif]--> 가
위예제 #test와 같이 사용할한 선택자(id 또는 class 또는 tag)를 지정
문제점: 몇몇에 태그에 먹히지않음 body,tr,td,input
예제
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('#test');
</script>
<![endif]-->
</head>
<style type="text/css">
#wrap{ position:relative;}
#test{ position:relative; left:100px; top:100px; background: #fcc url(image/05mainnavi.png) no-repeat 0 0;height:250px; width:250px;}
</style>
<body>
<div id="wrap">
<ul id="test"><li><a href="#">sdsd</a></li></ul>
</div>
</body>
단! 포지션 지정을 위해선 위와같이 바깥에 하나더 감싸줄 필요가 있슴..위 예제는 #test에 #wrap로 감싸준것.
CSS와 알파값을 제대로 사용하기위한 몇몇 방법이였습니다.. 그나마 마지막이 CSS지정을 거의 다할수 있는데 각기 여러문제가 많군요. 다른좋은 방법이 있다면 좋은데..불필요한 마크업이 들어가는건 어쩔수 없는것인지 ㅠㅠ
[출처] IE6리하 PNG 투명값처리 소스들.. (웹디들의커뮤니티카페 :: Dom FAM ::) |작성자 샷타이거
'프로그래밍 > 기타 등등' 카테고리의 다른 글
| 이미지 사이즈를 줄여서 홈페이지에 업로드하기 (0) | 2009.10.16 |
|---|---|
| 언어(ISO 639) 코드 (0) | 2009.09.29 |
| 네이버 스마트에디터, 다음 오픈에디터 (0) | 2009.09.25 |
| HTML 특수문자코드표 (0) | 2009.08.07 |
| [펌][CSS] PNG 포멧 용법 (0) | 2009.08.06 |
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사용과 관련한 문제와 설명은 아래 나라디자인에서 한번더 확인해보시면 좋을것 같습니다.
'프로그래밍 > 기타 등등' 카테고리의 다른 글
| 이미지 사이즈를 줄여서 홈페이지에 업로드하기 (0) | 2009.10.16 |
|---|---|
| 언어(ISO 639) 코드 (0) | 2009.09.29 |
| 네이버 스마트에디터, 다음 오픈에디터 (0) | 2009.09.25 |
| HTML 특수문자코드표 (0) | 2009.08.07 |
| [펌] [CSS] IE6리하 PNG 투명값처리 소스들.. (0) | 2009.08.06 |
