CSS 속성 선택기란?
CSS에서는 HTML 요소가 가진 특정 속성(attribute)을 기준으로 스타일을 적용할 수 있습니다. 이를 속성 선택기(Attribute Selector)라고 하며, 별도의 클래스나 ID를 추가하지 않고도 원하는 요소만 정확하게 선택할 수 있어 매우 유용합니다.
속성 선택기 기본 예제
예를 들어, 아래 스타일 규칙은 type 속성의 값이 text인 모든 <input> 요소에 적용됩니다.
input[type = "text"]{
color: #000000;
}속성 선택기의 주요 규칙
속성 선택기는 다양한 방식으로 활용할 수 있습니다. 대표적인 규칙은 다음과 같습니다.
- p[lang] —
lang속성을 가진 모든 문단(<p>) 요소를 선택합니다. - p[lang="fr"] —
lang속성의 값이 정확히 "fr"인 모든 문단 요소를 선택합니다. - p[lang~="fr"] —
lang속성 값이 공백으로 구분된 여러 단어 중 "fr"이라는 단어를 포함하는 모든 문단 요소를 선택합니다. - p[lang|="en"] —
lang속성 값이 정확히 "en"이거나, "en-"으로 시작하는(예: en-US, en-GB) 모든 문단 요소를 선택합니다.
추가로 알아두면 좋은 속성 선택자
위 네 가지 외에도 CSS3부터 다음과 같은 속성 선택자를 활용할 수 있습니다.
- p[lang^="en"] — 속성 값이 "en"으로 시작하는 요소를 선택합니다.
- p[lang$="fr"] — 속성 값이 "fr"으로 끝나는 요소를 선택합니다.
- p[lang*="fr"] — 속성 값 어디든 "fr"이 포함된 요소를 선택합니다.
속성 선택기를 잘 활용하면 HTML 구조를 수정하지 않고도 훨씬 세밀하고 유연한 스타일링이 가능합니다. 특히 폼 요소나 다국어 콘텐츠를 다룰 때 강력한 도구가 되니 꼭 익혀두시기 바랍니다.