목차
TL;DR#
- CSS에서 요소를 선택하는 방법은 태그, 아이디, 클래스 외에도
input[type="submit"]처럼 속성을 활용하는 방법이 있습니다. - 속성 선택자에
=,*=,$=,^=구문을 붙이면 값이 정확히 일치하는 경우뿐 아니라 포함·끝·시작 조건으로도 요소를 선택할 수 있습니다. - 고정된 값만 매칭하는
[href="..."]보다 훨씬 유연하게 스타일링 대상을 고를 수 있습니다.
속성 선택자가 필요한 이유#
CSS에서 요소를 선택하는 방법은 여러 가지입니다. h1처럼 태그만으로 선택할 수도 있고, 아이디나 클래스로 선택할 수도 있습니다. 여기에 더해 input[type="submit"]처럼 속성을 사용해 선택하는 방법도 있습니다.
이 속성 선택자 중에서 특정 구문을 함께 쓰면 조금 더 유연하게 요소를 고를 수 있습니다.
예를 들어 a 요소에서 href 속성을 이용한 선택자를 만든다고 가정해 보겠습니다. hooneylog.com이 들어간 링크를 선택하려면 어떻게 해야 할까요?
a[href="hooneylog.com"]을 사용하면 됩니다. 하지만 이 방식은 고정된 도메인 값과 정확히 일치하는 경우만 선택합니다.
서비스를 만들다 보면 hooneylog.com으로 끝나거나, 시작하거나, 해당 텍스트를 포함하는 요소를 선택하고 싶을 때가 있습니다. 이때 구문을 활용한 속성 선택자가 필요합니다.
속성 선택자 구문 정리#
[attr=value]#
- 정확한 value 값과 일치하는 요소를 선택합니다.
[attr*=value]#
- 해당 value를 포함한 요소를 선택합니다.
a[href*=hooneylog.com]→hooneylog.com이 포함된 요소를 선택합니다.
[attr$=value]#
- 해당 value로 끝나는 요소를 선택합니다.
a[$=hooneylog.com]→hooneylog.com으로 끝나는 요소를 선택합니다.
[attr^=value]#
- 해당 value로 시작하는 요소를 선택합니다.
a[href^=hooneylog.com]→hooneylog.com으로 시작하는 요소를 선택합니다.
정리하며#
속성 선택자로 스타일링해 본 경험이 많지 않아, 이렇게 구문을 활용해 유연하게 선택하는 방법이 있다는 것을 이번에 공부하면서 알게 됐습니다.
평소에는 CSS 전처리기를 사용해 해당 DOM에 유니크한 클래스를 부여하는 방식으로 스타일링했는데, 기회가 된다면 속성 선택자를 활용한 스타일링도 시도해 봐야겠습니다.