본문 바로가기

HTML&CSS

HTML+CSS 기초 강의 - 26. CSS 선택자 기초 3 - 속성과 속성값



클래스/태그[속성]

클래스/태그에 해당 속성이 있는 경우 CSS 속성이 적용됩니다.

예를 들어


p[title]{color:#a00}


과 같이 title 속성이 있는 p 태그에만 색상을 주는 것으로 CSS를 정의했다면


<p>문단1</p>
<p title="두번째">문단2</p>
<p>문단3</p>
<p>문단4</p>


와 같은 섹션이 있다면 "문단2" 에만 컬러 속성이 적용됩니다.


더 중요한 사용법이 있습니다. html 규격에 없는 사용자 정의 속성을 사용해도 적용이 된다는 점입니다.


p[specialitem]{color:#a00}


이렇게 specialitem 이라는 속성이 있는 p 태그에 색상을 주는 것으로 정의했다면


<p>문단1</p>
<p specialitem="두번째">문단2</p>
<p specialitem>문단3</p>
<p>문단4</p>


과 같은 섹션에서는 문단2, 문단3 에 색상이 적용됩니다.


문단3에는 속성 값이 없지만 컬러가 적용되는 것은 속성이 있는지 여부만 판단하기 때문입니다.


이 특성을 활용하면 속성이 있는 태그와 없는 태그를 구분해 다양하게 문서 레이아웃을 조정할 수 있습니다.



클래스/태그[속성="속성값"]


속성에 특정 값이 있는 클래스/태그에만 CSS 속성을 부여합니다.


a[href="https://google.com"]{color:#a00}


이렇게 정의하면


<a href="https://google.com">구글</a>
<a href="https://naver.com">네이버</a>
<a href="http://danawa.com">다나와</a>
<a href="https://bing.com">다음</a>


으로 되어있는 섹션에서는 구글에만 색상 속성이 적용됩니다.

속성값은 정확히 문자열이 일치해야만 CSS 속성이 적용됩니다.

문자열 범위를 넓혀 https 가 있는 링크에는 모두 컬러 속성을 주고 싶을 수 있습니다.

이런 경우에 대응할 수 있도록 속성값에 정규표현식을 사용할 수 있습니다.


예를 들어 


a[href^=https]{color:#a00}


라고 CSS 정의를 했다면 

위의 섹션에서 검색엔진 사이트 링크에만 색상이 적용됩니다.



클래스/태그[속성*="속성값"]

속성값이 문자열 일부로 있으면 CSS 속성을 적용합니다.

정규표현식만큼 광점위하게 적용되지는 않지만, 문자열 비교를 통해 속성값이 포함되어 있으면 적용됩니다.

정규표현식에 익숙하지 않거나, 정규표현식처럼 복잡한 구문이 필요하지 않은 경우 이 선택자가 유효합니다.

예를 들어 위의 검색엔진 링크 섹션에서 


a[href*="http"]{color:#a00}


과 같이 정의했다면

모든 링크에 색상이 적용됩니다.



클래스/태그[속성^="속성값"]

속성 문자열이 속성값으로 시작하는 클래스/태그에 CSS 속성을 적용합니다.


예를들어 


a[href^=http]


라고 정의했다면


<a href="https://google.com">구글</a>
<a href="./files/manual.pdf">설명서</a>
<a href="https://naver.com">네이버</a>


이 섹션에서 CSS 선택자는 구글, 네이버 에만 컬러가 적용됩니다.




클래스/태그[속성$="속성값"]

a[href^=http] 의 반대입니다. 속성 문자열이 속성값으로 끝나는 클래스/태그에 CSS 속성을 적용합니다.


예를들어


a[hre$=jpg]


라고 정의했다면


<a href="./files/manual.pdf">설명서</a>
<a href="./images/preview.jpg">미리보기이미지</a>
<a href="./images/thumbnail.png">썸네일이미지</a>


이 섹션에서 CSS 선택자는 미리보기이미지 에만 컬러가 적용됩니다.



클래스/태그[속성~="속성값"]

속성값이 공백으로 구분되어 2개 이상이 올 수 있는 커스텀 클래스/태그 속성에 해당 속성값이 있으면 CSS 속성을 적용합니다.

예를들어


li[data-type="fruit"]{color:red}


이렇게 정의했을 경우


<ul>
<li data-type="fruit red">사과</li>
<li data-type="fruit purple">포도</li>
<li data-type="vegetable green">파프리카</li>
<li data-type="vegetable red">당근</li>
</ul>


섹션에서는 사과와 포도만 컬러 속성이 적용됩니다.

사용자 정의 속성으로 태그들을 종류별로 무작위로 그룹지어야 할 경우에 사용하면 유용합니다.




클래스/태그:checked

클래스/태그[속성="속성값"]:checked

체크 속성이 있는 클래스/태그에 사용할 수있는 상태 입니다.

체크된 상태인 경우 CSS 속성이 적용됩니다.

실질적으로 양식의 체크박스, 또는 라디오박스에만 사용하는 속성입니다.


예를들어


input[type=checkbox]:checked{color:#a00}


로 CSS를 정의하면


모든 체크된 체크박스에 컬러 속성을 주게 됩니다.


실제 사용에 있어서는 


#myform input[type=checkbox]:checked{color:#a00}


이런 방식으로 앞에 한정 선택자를 지정해 범위를 제한해 사용하게 됩니다.


< 이전강의 다음강의 >



닫기