속성 선택자
1. 속성 선택자
속성 선택자는 HTML 요소의 속성을 기반으로 요소를 선택하는 강력한 도구입니다. 이를 통해 특정 속성을 가진 요소나 속성 값이 특정 패턴을 가진 요소를 선택할 수 있습니다.
1.1 기본 속성 선택자 [속성이름]
해당 속성을 가진 모든 요소를 선택합니다.
1.2 속성값 선택자
1.2.1 [속성이름~="속성값"] 선택자
공백으로 구분된 단어 목록 중 특정 단어를 포함하는 요소를 선택합니다.
1.2.2 [속성이름|="속성값"] 선택자
특정 문자열만 포함하거나, 특정 문자열로 시작하면서 바로 하이픈(-)이 오는 요소를 선택합니다.
1.2.3 [속성이름^="속성값"] 선택자
특정 문자열로 시작하는 요소를 모두 선택합니다.
1.2.4 [속성이름$="속성값"] 선택자
특정 문자열로 끝나는 요소를 모두 선택합니다.
1.2.5 [속성이름*="속성값"] 선택자
특정 문자열을 포함하는 요소를 모두 선택합니다.
1.3 종합 예제
다음은 모든 속성 선택자를 사용한 종합 예제입니다:
이 종합 예제에서는 다양한 속성 선택자를 사용하여 요소들을 스타일링하고 있습니다. 이를 통해 HTML 구조를 변경하지 않고도 특정 패턴을 가진 요소들을 쉽게 스타일링할 수 있음을 보여줍니다.
속성 선택자는 특히 대규모 프로젝트나 외부 라이브러리를 사용할 때 유용합니다. 클래스나 ID를 추가하지 않고도 기존 HTML 구조에 스타일을 적용할 수 있기 때문입니다.