[css2/3] 속성 선택자

 

 

[css2/3] 속성 선택자

 

지난 시간에 css 선택자를 배우면서, 속성 선택자를 짤막하게 소개했는데

 

css 선택자, 선택자 종류와 사용법

 

오늘은 속성 선택자 사용법을 좀 더 자세히 알아보겠습니다.

 

 

속성 선택자란?

 

id나 class 처럼 '구체적인 속성'을 선택해서 스타일을 줄 수 있는 대상입니다.

 

속성 선택자는 대부분의 브라우저에서 지원하지만 ie7, 8에서는 doctype 선언해야 합니다.

 

 

우선 속성 선택자 요약표를 먼저 보고, 차례 차례 설명해 볼게요~

 

 

 

속성 선택자 요약표

 

 

 

 

E[foo]

 

E는 요소 이름이고 foo는 속성 입니다.

 

(밑에서도 계속 나올 "foo" "bar" 등은 이해를 돕기 위한  임시 키워드입니다.)

 

사용 예 :

 

a[href]{color:red;}             a요소에 href 속성이 있으면 빨간색 글자로 표시

p[class]{background:yellow;}   p 요소에 class 속성이 있으면 배경색을 노란색으로

 

 

 

E[foo="bar"]

 

foo의 속성값이 정확히 "bar"일 때

 

사용 예 :

 

a[title="top"]{color:red;}       a요소에 title="top"이 있는 곳은 빨간색 글자로

div[id="left"]{text-align:center;}        div요소에 id="left"가 있는 곳은 중앙 정렬

 

 

E[foo~="bar"]

 

속성값이 "bar"이거나, 공란을 포함한 "bar"이면 적용,

"bar"  "hot bar" "bar ter" 는 가능

"hot-bar" "barter"는 불가능

 

사용 예 :

 

a[title="bar"]{color:red;}       

 

E[lang|="en"]

 

lang은 속성이며, "en"은 속성값

주로 문서의 언어를 지정하는 lang 속성과 함께 사용

 

속성값이 "en" 이거나 "en-" 이면 됨.

 

사용 예 :

 

a[hreflang="en"]{font-size: 11px;}

 

 

E[foo^="bar"]

 

속성값이 정확히 "bar"로 시작함

 

"bar" "barter" "bar tenter" "bar-tender" 가능

"hot bar"는 불가능

 

 

E[foo$="bar"]

 

속성값이 정확히 "bar"로 끝남

 

"hot_bar" "hot-bar" "hotbar" "bar" 가능
 

 

E[foo*="bar"]

 

속성값 "bar"가 어디에 나오든 관계없음

 

즉,  xxxbarxxx 처럼, 앞 뒤로 무엇이 오든 관계 없음

 

사용 예 :

 

a[title*="bar"]{color:red;}       

 

 

 

예제 1. 링크에 마우스 오버했을 때 이미지 나오게 하기

 

attribute.htm

 

 

html

<h2>지구별안내서 오픈캐스트 구독하기</h2>   <p><a href="http://opencast.naver.com/IT741">지구별 안내서 오픈캐스트</a> 구독하시면<br>  html/css를 좀 더 체계적으로 공부하실 수 있어요 </p>

 

 

 

css

a[href]:hover{     content: url(love.png);}

 

 

 

실행 화면

마우스 오버 전   마우스 오버 했을 때

 

 

 

예제 2. 속성값이 "top"으로 시작하면 노란 배경색을 칠하기

 

attribute selector2.htm

 

 

html

<a href="#" title="top">위로 가기</a> <a href="#" title="top ic">위로 가기</a> <a href="#" title="top-ic">위로 가기</a> <a href="#" title="on top">위로 가기</a>

 

 

 

css

a[title^=top] {     background-color: yellow; }

 

 

 

실행화면

 

 

 

[css] content 속성 사용법

 

[css] - :before , :after 가상 요소