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}
이런 방식으로 앞에 한정 선택자를 지정해 범위를 제한해 사용하게 됩니다.