동적 CSS 적용 > html

요즘 간만에 Client 단 작업을 하다보니...

이런것도 필요하더군...

어떤 조건에 맞춰서 CSS 값을 바꿔주는. 뭐 경우에 맞게 클래스를 몽땅 만들어서 지정해 줘도 되겠지만...

나의 귀차니즘은 끝을 알 수 없는지라... @@;;

CSS 를보면 expression 이란것이 있다 여기에 어떤 구문을 넣어주면 해석해서 결과를 리턴한다. 이것이 관건이지...

input 태그의 종류가 여러가지 있는데 일률적으로 input 태그에 border:1px 를 주게되면 checkbox나 radio 에도 border가 생겨 흉하다. 그렇다고 따로 클래스를 만들기는 앞서 말한것과 같이 귀찮은 작업...

해서 요로코럼 해주면 되고... 나머지는 응용해서 쓰시길....

input
{
    font-size:9pt;
    border:expression((this.type=='checkbox'||this.type=='radio'||this.type=='button')?'':'1pt solid #CCCCCC');
    background-color:expression((this.readOnly)?'#EAEAEA':'');
    cursor:expression((this.type=='button'&&this.disabled==true)?'':((this.type=='button')?'hand':''));
    filter:expression((this.type=='button'&&this.disabled==true)?'alpha(opacity=60)':'');
}

이번에는 Expression을 사용한 꽁수 하나를 소개하겠습니다.

또한, Expression은 IE 전용인지라, Firefox에서는 어떻게 동적으로 적용시킬 수 있는지도 설명 드리겠습니다.

먼저, 어떤 꽁수냐 하면, 링크된 파일의 확장자를 보고 확장자에 맞는 아이콘을 앞에 보여주는 간단한것입니다.

IE 용인 Expression을 사용하여 본다면

a { expression(어쩌구 문법) }

이렇게 해서 a 태그 즉, 링크에 걸린 항목에 대하여 Expression은 적용 시킬 수 있을것입니다.

그럼 예로.. 링크주소중에 pdf 라은 확장자가 있다면 링크 앞에 자동으로 PDF 아이콘을 띄워봅시다.

a {
   padding-left: expression(this.href.indexOf('.pdf') > 0 ? '20px' : '');
   background: expression(this.href.indexOf('.pdf')>0 ? 'transparent url(pdf.gif) no-repeat center left' : '');
}

이건 IE 용입니다. Firefox에선 이렇게 하시면 됩니다.

a[href $='.pdf']{
   padding-left: 20px;
   background: transparent url(pdf.gif) no-repeat center left;
}

음... 불여시에서 사용하는게 훨씬 간편하네요 @@;;

[href $='.pdf'] 이 구문에서 $는 .pdf로 끝나는 것을 의미합니다.

.pdf로 시작하는 것을 찾으려면 $대신에 ^을 사용하시면 됩니다.

[href ^='.pdf']가 되겠죠. 그냥 포함 되어 있는지를 찾는 거라면 *을 사용하시면 됩니다.

<style>
a[href $='.pdf']{
   padding-left: 20px;
   background: transparent url(pdf.gif) no-repeat center left;
}

a {
   padding-left: expression(this.href.indexOf('.pdf') > 0 ? '20px' : '');
   background: expression(this.href.indexOf('.pdf')>0 ? 'transparent url(pdf.gif) no-repeat center left' : '');
}
</style>

<a href="test.pdf">test1</a><br/>
<a href="test.gif">test2</a>