CSS (CSS3) 속성선택자 (attribute selector)

CSS/CSS3 2011.12.30 13:02

CSS (CSS3) 속성선택자 (attribute selector)

CSS2에서도 지원했지만 CSS3에서 좀더 추가되었다. 예제를 통해간편히 확인해보자.아래 html에서는 각포탈사이와 그에 따라 title속성에 값을 주었다.


<p><a title="tistory" href="#">티스토리</a></p> 
<p><a title="naver" href="#">네이버</a></p> 
<p><a title="potal daum site" href="#">다음</a></p> 
<p><a title="nate-mobile" href="#">네이트</a></p> 
<p><a title="dreamwiz" href="#">드림위즈</a></p> 
<p><a title="yahoo" href="#">야후</a></p> 
<p><a title="TheBestgoogleWeb" href="#">구글</a></p>

이번엔 CSS를 보자 정의 한것

[attr] : 속성값을 가지는경우
[attr=" "] : 속성값이 정확히 일치
[attr~=" "] : 속성값이공백으로 구분한 경우
[attr|=" "] 속성값이 하이픈으로 구분한 경우
아래 세개는 CSS3에 추가된것이다 [attr^=" "] 속성값이 주어진값으로 시작한경우
[attr$=" "]주어진값으로 끝나는경우
[attr*=" "] 속성값이 일부일치한다면 적용

아래는 적용한 예제다


/*title 속성을 가지고 있는 엘리먼트에 모두적용*/
a[title]{border: 1px solid #999; font-size:3em;}
/*title 속성값 naver와 정확히 일치하는 경우*/
a[title="naver"] {color:#0F0;}
/*title 속성값인 daum을 공백으로 구분한 경우*/
a[title~="daum"] {background-color: #09F;}
/*title 속성값인 nate를 하이픈으로 구분한 경우*/
a[title|="nate"] { color:#F00;}
/*title 속성값인 dre로 시작한경우 */
a[title^="dre"] {background-color:#FF0;}
/*title 속성값인 hoo로 끝나는경우*/
a[title$="hoo"] {background-color:#60F;}
/*title 속성값인 google로 일부일치하는경우*/
a[title*="google"] {background-color:#666;}

완성된 예제를 확인하려면 아래주소로

http://sianasiatiger.cafe24.com/study/CSS_selector_attribute.html

*주의 : 속성값의 대소문자는 인식은다르다.google과 Google은 다르단 말

저작자 표시
신고

설정

트랙백

댓글

CSS 링크 유형별 스타일 지정(css3)

CSS 2009.09.06 12:22

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는 지원하지않는다.

저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바