CSS3 - 속성 선택자

속성 선택자를 사용하면 특정 속성을 가진 HTML 태그를 선택할 수 있습니다. 속성 선택자는 지금까지 배운 다른 선택자와 함께 사용하는 선택자입니다. 속성 선택자는 기본 속성 선택자와 문자열 속성 선택자로 나눌 수 있으며 기본 속성 선택자는 많이 사용하지만 문자열 속성 선택자는 특별한 경우에만 사용합니다.

기본 속성 선택자

선택자 형태	설명
선택자[속성]	특정한 속성이 있는 태그를 선택
선택자[속성=값][속성=값]	특정한 속성 안의 값이 특정 값과 같은 문서 객체를 선택

input 태그는 이름이 모두 input이지만 type 속성값에 따라 형태가 달라집니다. 따라서 input 태그를 선택할 때는 기본속성 선택자를 많이 사용합니다. 아래 예시1은 기본 속성 선택자를 사용해 input 태그를 선택합니다.

예시1

CSS는 HTML 태그가 기본으로 무엇을 출력하는지에 관심을 갖지 않습니다. HTML에서 확실한 속성값을 인식하며 속성값을 입력하지 않을시 스타일이 제대로 적용되지 않는 경우도 생길 수 있습니다.

문자열 속성 선택자

문자열 속성 선택자는 태그에 지정한 속성의 특정 문자열을 확인합니다.

선택자 형태	설명
선택자[속성~=값]	속성 안의 값이 특정 값을 단어로 포함하는 태그를 선택
선택자[속성|=값]	속성 안의 값이 특정 값을 단어로 포함하는 태그를 선택
선택자[속성^=값]	속성 안의 값이 특정 값으로 시작하는 태그를 선택
선택자[속성$=값]	속성 안의 값이 특정 값으로 끝나는 태그를 선택
선택자[속성*=값]	속성 안의 값이 특정 값을 포함하는 태그를 선택

문자열 속성 선택자는 거의 사용하지 않지만 파일 형태에 따라 스타일을 적용할 때 가끔 사용합니다. 아래 예시2를 보면 파일 형식에 따라 스타일이 적용되는 것을 알 수 있습니다.

예시2