CSS에서 요소를 선택할때는 많은 방법들이 존재한다.
단순히 h1 처럼 요소만을 넣어서 선택하는 방법이 있으며, 아이디 혹은 클래스로 선택하는 방법도 있다.
뿐만아니라 input[type=’sumbit’] 과 같은 방법으로 속성을 사용하여 선택하는 방법도 있다.
이중에서 속성을 사용해서 선택하는 방법 중에 특정 구문을 사용해서 조금 더 유연하게 사용하는 방법이 있다.
예를들어 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 전처리기를 사용해서 해당 돔에 유니크한 클래스를 넣어 스타일링을 하는 방법들을 사용하였는데, 기회가 된다면 해당 방법으로 스타일링을 해봐야겠다고 생각했다.