CSS 링크 유형별 스타일 지정
유형별 스타일 지정에 대한 설명은 속성선택자(포스팅참고)가 사용되는 만큼 IE6등 몇몇 브라우저에 적용안된다. 명심하고 보자
유형별로 스타일을 지정해준다 이말은 각각 링크가 나올때마다 변경하기 귀찮으니 유사한 경우 이렇게 해라고 처리해주는것이다.아래예를보자
#example a{
background:url(test.gif)
}
이와같은 것을 여러번 변경하기 귀찮다. 클래스로 지정해서 비슷한경우를 처리해줘도 되지만 이것도 일일이 클래스 부여라는 문제가있다. 속성선택자를 이용해보자
a[href^="http:"]{
background:url(test.gif)
}/*일반적으로 http:로 시작하는 외부링크일때 배경이미지를 test.gif로 잡아준다.*/
a[href^="http://www.naver.com"]{
background:url(naver.gif)
}/*네이버란 사이트링크일떄 배경이미지는 naver.gif*/
a[href^="mailto:"]{
background:url(mail.gif)
}/*메일과 관련된 링크 일경우 배경이미지를 mail.gif
메신져역시 가능하다
지금바로 메신저로
a[href^="aim:"]{
background:url(ms.gif)
}/*메신저 관련 링크일경우 ms.gif를 배경이미지로*/
정말 다양하게 쓰이는 점은 특별문서 지정에도 가능하다는점이다 :)가끔 사용자들은 갑자기 링크된곳이 pdf, doc링크로 새창으로 떠버리거나 하면 당황하는경우도 있다 정확한 정보전달은 중요하다. 이를 위해 다음과 같이 사용할 수있다.
a[href$=".pdf"]{
background:url(imgpdf.gif)
}/*pdf 문서를 보여주는 링크일경우 배경이미지를 imgpdf.gif*/
doc문서경우도 마찬가지다 a[href$=".doc"] 요렇게 해주면된다
마지막으로 RSS의경우또한a[href$=".rss"]
이같이 사용하는이유는정보전달의 명확화를 위해서다 갑자기 문서링크가 뜬다던지 메일이 뜬다던지 하면 사용자는 당황할수 밖에 없다.그리고 앞서 말했듯이 단순히 개별 아이디나 클래스로 지정하지않고 속성 선택자를 사용하는이유는 일일이 링크마다 지정하기가 번거로우며 그럴경우 혼돈을 주기때문이다
여전히 아쉬운점은 IE6는 지원하지않는다.
댓글