CSS 2.1은 다양한 기능을 제공합니다.  그 중 하나로...
"a" 태그의 "href" 값을 인지하여 button이나 bullet 삽입 등... 다양한 결과를 나타내는 방법을 소개합니다.


우선 결과물을 보시면 아래와 같습니다.

첫번째는 기본적인 hyperlnk. 두번째는 google을 나타내는 external link. 세번째는 MS Word Document의 .doc 파일 네번째는 .zip 파일을 나타내고 있습니다.

위와 같은 style을 표현하는데에 있어서 평소라면 img나 javascript, css의 list-style에 background를 부여하는 방법 등...이 있을 것 입니다.

본 예제는, CSS2.1에서의 Link 및 확장자 판별을 활용하여 각각의 특성에 background 속성을 사용한 것 입니다.

a[href^="http:"] {
    display: inline-block;
    padding-right: 14px;
    background: transparent url("/Images/ExternalLink.gif") center right no-repeat;
    }

상기 code를 살펴보면 link의 특성을 [대괄호] 로 선별하고, 몇 가지 옵션과 함께 간단하게 조건문이 포함되었습니다.
^ 는 연산자를 추가하는 걸 의미합니다. 따라서 a[href^="http:"] 는



"http:" 문자열에 '$' 오퍼레이터(operator)를 추가로 사용하면 파일의 확장자 까지도 분석할 수 있게 됩니다.

a[href$='.pdf'] {
    display:inline-block;
    padding-left: 20px;
    line-height: 18px;
    background: transparent url("/Images/PDFIcon.gif") center left no-repeat;
    }

아래와 같이 확장자끼리의 병합도 가능합니다.

a[href$='.swf'], a[href$='.fla'], a[href$='.swd'] {
    display: inline-block;
    padding-left: 20px;
    line-height: 18px;
    background: transparent url("/Images/FlashIcon.gif") center left no-repeat;
    }
a[href$='.xls'], a[href$='.csv'], a[href$='.xlt'], a[href$='.xlw'] {
    display: inline-block;
    padding-left: 20px;
    line-height: 18px;
    background: transparent url("/Images/ExcelIcon.gif") center left no-repeat;
    }

SeverSide Code나 JavaScript을 사용하지 않는다는 관점에서 보면 효율성이 뛰어나지만, 아쉽게도 아래와 같은 제약이 있습니다.



물론, jquery를 활용 cross browsing이 가능한 방법도 있습니다. (Unobtrusive, cross-browser method to add icons to links)