[태그:] css

IE6 png filter

IE6에서 알파값이 들어간 png를 처리하지 못하기 때문에 filter를 사용해야 합니다.

[css]
/*scale*/
selector {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’pngImage.png’, sizingMethod=’scale’);
}
/*crop*/
selector {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’pngImage.png’, sizingMethod=’crop’);
}
/*image*/
selector {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’pngImage.png’, sizingMethod=’image’);
}
[/css]

scale, crop, image 속성을 지원합니다.

• scale 상위의 객체에 꽉 체워 줍니다. 만일 이미지를 싸고 있는 레이어가 있다면 그 레이어에 크기에 맞게 그림이 늘어납니다.
• crop 이미지의 크기 비율에 맞게 디스플레이 합니다.
• image 기본 설정값으로 본래의 이미지 크기로 보여줍니다.

Opacity

opacity의 경우 브라우마다 지원하는 방법이 다릅니다.

[css]
/*표준브라우저*/
selector {
opacity:.5;
}
/*IE 5~7*/
selector {
filter:alpha(opacity=50);
}
/*IE 8*/
selector {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
[/css]

expression

IE6에서 max-width같은 지원하지 않는 스타일을 써야할때 많이 사용합니다.

[css]
selector {
max-width:320px;

}
* html selector {
width:expression(this.width > 320 ? "320px" : this.width);
}
[/css]
안에 사용되는 스크립트의 경우 코딩 상황에 따라 달라질수도 있습니다.

child selector

expression을 child selector이용한 사용하기
[css]
.selector { color:blue; }
.selector > .selector { color:red; }
* html .selector .selector { color:expression(/selector/.test(this.parentNode.className) ? ‘red’ : ‘blue’); }
[/css]
class가 아니여도 스크립트만 잘 조합해서 쓰시면 됩니다.

first-child selector

IE6은 :first-child, :last-child 둘 다 지원하지 않고, IE7은 :last-child를 지원하지 않습니다.
(왠만하면 한번만 쓰는게 좋기 때문에 :first-child로 통일하는게 좋을듯합니다.)
[css]
selector { color:blue; }
selector:first-child { color:red; }
* html selector { color:expression((this.previousSibling == null) ? ‘red’ : ‘blue’); }
[/css]
class는 지원하지 않습니다.
태그(li, div…등)에서만 사용 가능합니다.
:last-child는 this.previousSibling를 this.nextSibling로 바꾸시면 됩니다.

이중 class

IE6에서 .class.class2같은 이중클래스를 사용할수있게 해줍니다.
[css]
.selector { color:red; }
.selector.selector2 { color:blue; }
.selector2 { color:green; }
* html .selector { color:expression((function(that) { if(/[selector]\s*[selector2]/.test(that.className) === true) return ‘blue’; })(this)); }
[/css]
부모의 클래스를 찾고 싶을때는 that.className를 that.parentNode.className로 바꿔서 사용 하시면 됩니다.

:before, :after

IE에서 :before, :after를 사용할수 있게 해주는 속성입니다.
[css]
.selector:before {
content:’앞의 내용 추가’;
background-color:blue;
}
.selector:after {
content:’뒤의 내용 추가’;
background-color:red;
}
.selector {
* zoom:expression(
this.runtimeStyle[‘zoom’] = ‘1’,
this.innerHTML = ‘<span style="background-color:blue;">앞의 내용 추가</span> ‘ + this.innerHTML + ‘ <span style="background-color:red;">뒤의 내용 추가</span>’
);
}
[/css]
내용 설명은 생략합니다만, this.runtimeStyle['zoom'] = '1',를 뺀뒤 테스트 해보시는것도 또 하나의 재미라고 생각됩니다.

아래와 같이 selecter tag가 before, after에 사용될 태그와 같을 경우 에러가 납니다.
[css]
span {
* zoom:expression(
this.runtimeStyle[‘zoom’] = ‘1’,
this.innerHTML = ‘<span style="background-color:blue;">앞의 내용 추가</span> ‘ + this.innerHTML + ‘ <span style="background-color:red;">뒤의 내용 추가</span>’
);
}
[/css]
em같은 태그로 회피해서 사용.

소스를 사용함에 있어

몇몇 소스의 경우 인터넷에 돌아다니는 내용이고, 대부분 많이 사용 되는 소스기때문에 문제가 없지만, 몇몇 소스는 제가 만든소스입니다. 저도 실무에서 잘 안쓰는 소스이고, 검증되지 않았습니다.
그런고로 책임은 지지 않습니다.