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 전처리기를 사용해서 해당 돔에 유니크한 클래스를 넣어 스타일링을 하는 방법들을 사용하였는데, 기회가 된다면 해당 방법으로 스타일링을 해봐야겠다고 생각했다.