<script language='JavaScript'> //link1 과 link2 지정해
넣은 홈을 통해서 들어오지 않으면 무단링크 취급 기본홈페이지로 열리는 소스 var
home_url="http://www.tagin.net"; // 기본 홈페이지 var
link1="http://tagin.net/"; var link2="http://www.naver.com/"; if
(document.referrer.indexOf(home_url)==-1 &&
document.referrer.indexOf(link1)==-1 &&
document.referrer.indexOf(link2)==-1) { if (document.referrer) {
alert("무단링크 하셨습니다.!"); // 무단링크시 에러
메세지 window.location=home_url; // 기본 홈으로 이동 } else
{ alert("무단링크 하셨습니다. "); // 무단링크시 에러
메세지 window.location=home_url; // 기본 홈으로 이동 } }
</script>
보통 IE5,5와 IE6에서의 투명 PNG이미지 처리시 CSS와 스크립트로 다음과 같이 처리하는데
.png24 { tmp:expression(setPNG24(this)); }
/* png24 이미지 파일을 웹에서 투명하게 변경하는 스크립트 */ 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 ''; }
보통 위와 같이 처리하면 onmouseover='this.src=this.src.replace(".gif","_over.gif")'와 같이 처리하는데..
이미지 토글처리를 하다가 setPNG로 filter:progid:DXImageTransform 필터가 적용되면 mouseover 이벤트로 이미지 변경이 되지 않았다. IE7, IE6에서 필터가 적용되면 onclick, onmouseover이던지 이벤트는 모두 먹어버리고 심지어 <a>태그도 먹질 않는다. 다른 브라우저에서는 아예 filter 속성이 먹질 않아서 정상적으로 작동한다.
<!--[if lt IE 7]> <script type="text/javascript"> var arVersion = navigator.appVersion.split("MSIE") var version = parseFloat(arVersion[1]) function correctPNG() // correctly handle PNG transparency in Win IE 5.5 and 6. { if ((version >= 5.5) && (document.body.filters)) { for(var i=0; i<document.images.length; i++) { var img = document.images[i] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + img.style.cssText var imgAttribs = img.attributes; for (var j=0; j<imgAttribs.length; j++) { var imgAttrib = imgAttribs[j]; if (imgAttrib.nodeName == "align") { if (imgAttrib.nodeValue == "left") imgStyle = "float:left;" + imgStyle if (imgAttrib.nodeValue == "right") imgStyle = "float:right;" + imgStyle break } } var strNewHTML = "<span " + imgID + imgClass + imgTitle strNewHTML += " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" strNewHTML += "(src='" + img.src + "', sizingMethod='scale');\"" strNewHTML += " onmouseover=\"PNGswap('" + img.id + "');\" onmouseout=\"PNGswap('" + img.id +"');\"" strNewHTML += "></span>" img.outerHTML = strNewHTML i = i-1 } } } } window.attachEvent("onload", correctPNG); function PNGswap(myID) { var strOver = "_on" var strOff = "_off" var oSpan = document.getElementById(myID) var currentAlphaImg = oSpan.filters(0).src if (currentAlphaImg.indexOf(strOver) != -1) oSpan.filters(0).src = currentAlphaImg.replace(strOver,strOff) else oSpan.filters(0).src = currentAlphaImg.replace(strOff,strOver) }
</script> <![endif]-->
<script language="JavaScript" type="text/javascript"> <!-- function imgSwap(oImg) { var strOver = "_on" // image to be used with mouse over var strOff = "_off" // normal image var strImg = oImg.src if (strImg.indexOf(strOver) != -1) oImg.src = strImg.replace(strOver,strOff) else oImg.src = strImg.replace(strOff,strOver) } //--> </script>
.context_bar_form_field { height: 15px; // 모든 브라우저 #height: 15px; // IE 전용 _height: 21px; // IE6.0 과 이전버젼용 }
우선 파폭에 맞추어 개발을 한 후 E7 에서 점검한다. 수정할 부분이 있다면 # 접두어를 붙여 수정해 준다. #이 붙은 것은 FF 에서 무시한다. 하지만 IE 는 재설정 해준다. 다음에 IE6 을 열고 수정하면서 _ 를 접두어로 붙여 새로 재설정 한다. IE7 은 '-' 가 붙은 것을 무시한다.
부분적으로 읽어들이지 못하게 하는 경우에는 Caio's hack인 /*/*/를 이용한다. 보통 코멘트는 */으로 닫지만 /*/으로 닫게 되면 Netscape 4에서는 인식되지 않는다. 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Netscape 4에서도 문제없이 적용된다.
p { /*/*/ color:white; /* */ }
Mac IE 4.5, Netscape 4 제외시키기
@import룰로 url()함수를 이용하여 외부 스타일시트를 이중인용부호로 지정한다. Mac IE 4.5는 @import에 url()함수를 이용하는 경우, 단일 인용부호와 인용부호가 없는 것이 아니면 읽어 들이지 못한다. Netscape 4은 @import를 지원하지 않는다.
@import url("/css/style.css")
Mac IE 5 제외시키기
CSS소스 안의 코멘트 서식을 /* \*/ 이라는 방식으로 기술한다. holly hack이라고 하며 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Mac IE 5에서도 문제없이 적용된다.
p { /* \*/ color:white; /* */ }
Win IE 4~5 제외시키기
셀렉터 바로 뒤에 /**/라고 적는다.
p/**/ { color:white;}
Win IE 4~5, Mac IE 4.5~5 제외시키기
프로퍼티와 값을 구분하는 콜론(;) 앞에 코멘트에 스페이스를 포함하여 /* */라고 적는다.
p { color/* */:white;}
Win IE 4~6, Mac IE 4, Netscape 4 제외시키기
셀렉터 앞에 html>body를 붙인다.
html>body p { color:white;}
Win IE 6 제외시키기
프로퍼티와 값을 구분하는 콜론(;)의 앞에, 스페이스와 코멘트를 /**/라고 적는다.
p { color /**/:white;}
star hack
셀렉트 앞에 *html를 붙이면, Win IE 4~6, Mac IE 4~5 등에는 스타일이 적용되고, 그 외의 브라우저에서는 적용되지 않는다.
*html p { color:white; }
underscore hack
프로퍼티의 가장 앞부분에 언더스코어(_)를 붙이면, Win IE 4~6에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.
p { _color:white; }
hash hack
프로퍼티의 앞에 샾(#)을 붙이면, Win IE 4~6, Mac IE 5, Opera 7, Mozilla, Firefox에서는 스타일이 적용되고, 다른 브라우저에는 적용되지 않는다.
p { #color:white; }
star 7 hack
셀렉트의 앞에 html*을 붙이면, Win IE 5.5~6, Mac IE 5, Safari 등에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다. html*과 셀렉터사이에 스페이스를 넣지 않는다.
html*p { color:white; }
xmlns hack
속성셀렉터를 이용하여, html요소에 붙이는 xmlns속성을 스타일적용을 위하여 사용하는 방법. Mozilla, Fire-fox, Opera 7/8, Safari 등 속성셀렉터를 서포트하는 브라우저에서는 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.
html[xmlns] h1 { color:red; }
:root hack
셀렉터의 앞에 :root를 붙이면, Mozilla, Firefox, Mac IE 5, Safari 등 :root유사클래스를 지원하는 브라우저에만 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.
Ajax 사이트를 개발하다보면 브라우저 버전에 따른 별도의 작업을 해줘야 하는 경우가 발생한다. 실제 현재 투입되어 개발중인 사이트의 경우에도 IE6,IE7에 최적화되게 개발하기로 했지만 실제로 테스트해본결과 Opera9, FF2~3, IE7, IE8Beta 버전에서 더 잘 돌아갔다.. 문제는 IE6인데 IE6에서도 Windows 2000 SP1~3, Windows XP SP1,SP2에서는 무리없이 잘 작동되던 스크립트인데 유독 Windows XP SP3 버전의 IE6에서만 오작동하는 경우가 발생했다.
IE6 버전 (WindowsXP SP3) 6.0.2900.5512 xpsp.080413-2111 Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
이놈 하나 때문에 패키징을 다시 해야 되는 경우가 발생되었고 모든 작업을 브라우저버젼별로 분리하여 작업하기란 워낙 까다로운게 아닐수 없다. 그냥 사용자의 브라우저를 IE7로 업그레이드를 시킬수만 있다면 좋을텐데 라는 생각을 많이 하곤 한다.
이올린에 북마크하기
이올린에 추천하기
firebug_lite_by_techbug.zip