class 선택자
<p class="important">terebyte</p>
p.important { font-weight : bold;}
class가 important인 p태그의 글씨에 bold효과를 준다.
다중class -> .
<p class = "important wintercrew kwu">terebyte</p>
<p class = "important wintercrew ssu">winterclue</p>
p.wintercrew { font-weight : bold;}
class가 wintercrew인 p태그의 글씨에 bold효과를 준다.
p.wintercrew.important { font-style : italic;}
class가 wintercrew와 important모두 포함된 p태그의 글씨에 italic효과를 준다.
p.kwu.important { background : blue;}
class가 kwu와 important모두 포함된 p 태그의 글씨의 배경색을 blue로 준다.
이와 같이 다중 class를 사용할경우 class 선택자를 연결할때 순서는 전혀 상관이 없다.
id 선택자 -> #
<p id="terebyte">terebyte</p>
p#terebyte { font-weight : bold;}
id가 terebyte인 p태그의 글씨에 bold 효과를 준다.
class와 id의 차이점
HTML문서에서 class는 중복해서 사용이 가능하지만 id는 중복사용이 불가능하다.
유효
<p class="wintercrew">terebyte</p>
<p class="wintercrew">winterclue</p>
유효하지않음
<p id="wintercrew">terebyte</p>
<p id="wintercrew">winterclue</p>
속성 선택자
img[alt] { border : 2px solid blue;}
alt속성이 있는 img태그에 테두리효과를 준다.
마찬가지로 속성여러개를 동시에 사용할수도있으며 정확하게 속성값을 지정할수도 있다.
a[class][href] { font-style : italic;}
class속성과 href속성이있는 a태그의 글씨에 italic효과를 준다.
a[href="wintercrew-official.com"] { font-weight : bold;}
href속성이 wintercrew-official.com인 a태그의 글씨에 bold효과를 준다.
하지만 이방식은 정확한 속성값을 요구해서 공백으로 분리된 목록을 값으로 가지는 속성들과 사용할때는 문제가 생긴다.
<p class="wintercrew kwu">terebyte</p>
p[class="wintercrew kwu"] {font-style : italic;}
class속성이 wintercrew kwu인 p태그의 글씨에 italic효과를 준다.
p[class="wintercrew"] {font-weight : bold;}
class속성에 wintercrew가 포함된 p태그의 글씨에 bold효과를준다.
라는 의미로 썼지만 이경우는 해당이 되지않는다.
위와 같은 의미로 사용할경우
p[class~="wintercrew"] {font-weight : bold;}
다음과 같이 ~ (틸데기호)를 사용해야한다.
이러한 부분 속성값으로 선택할때 사용하는기호가 몇가지 있다.
attribute ^= "value" 속성이 value로 시작하는 요소
attribute $= "value" 속성이 value로 끝나는 요소
attribute *= "value "속성에 value가 포함되는 요소
특정 속성 선택자
<p class="wintercrew">wintercrew</p>
<p class="winterclue">winterclue</p>
p[class |= "winter"] {font-weight : bold;}
이 선택자는 class속성이 winter이거나 winter로 시작되는 요소를 선택해준다.
따라서 위의 두 p태그모두의 글씨에 bold효과를 준다.
'공부 > Cascading Style Sheets' 카테고리의 다른 글
| 가상클래스와 가상요소 선택자 (4) | 2010.04.02 |
|---|---|
| 문서 구조 선택자 (0) | 2010.04.02 |
| 대체 스타일시트 (0) | 2010.04.02 |
| link 태그 (1) | 2010.04.02 |
| element (1) | 2010.04.02 |
