input[type="submit"]처럼 속성을 활용하는 방법이 있습니다.=, *=, $=, ^= 구문을 붙이면 값이 정확히 일치하는 경우뿐 아니라 포함·끝·시작 조건으로도 요소를 선택할 수 있습니다.[href="..."]보다 훨씬 유연하게 스타일링 대상을 고를 수 있습니다.CSS에서 요소를 선택하는 방법은 여러 가지입니다. h1처럼 태그만으로 선택할 수도 있고, 아이디나 클래스로 선택할 수도 있습니다. 여기에 더해 input[type="submit"]처럼 속성을 사용해 선택하는 방법도 있습니다.
CSS counter-reset, counter-increment, counter() 속성으로 ol 요소의 순서를 원하는 모양으로 표현하는 방법을 정리합니다.
2022. 8. 27.FrontendCSS 명시도 점수 체계를 이해하고 !important 남용 없이 스타일 충돌을 해결하는 전략을 정리합니다.
2022. 9. 10.Frontend순서 기준으로 자식 요소를 선택하는 CSS 가상 클래스 nth-of-type와 nth-child의 차이를 예시로 비교합니다.
2022. 9. 10.이 속성 선택자 중에서 특정 구문을 함께 쓰면 조금 더 유연하게 요소를 고를 수 있습니다.
예를 들어 a 요소에서 href 속성을 이용한 선택자를 만든다고 가정해 보겠습니다. hooneylog.com이 들어간 링크를 선택하려면 어떻게 해야 할까요?
a[href="hooneylog.com"]을 사용하면 됩니다. 하지만 이 방식은 고정된 도메인 값과 정확히 일치하는 경우만 선택합니다.
서비스를 만들다 보면 hooneylog.com으로 끝나거나, 시작하거나, 해당 텍스트를 포함하는 요소를 선택하고 싶을 때가 있습니다. 이때 구문을 활용한 속성 선택자가 필요합니다.
a[href*=hooneylog.com] → hooneylog.com이 포함된 요소를 선택합니다.a[$=hooneylog.com] → hooneylog.com으로 끝나는 요소를 선택합니다.a[href^=hooneylog.com] → hooneylog.com으로 시작하는 요소를 선택합니다.속성 선택자로 스타일링해 본 경험이 많지 않아, 이렇게 구문을 활용해 유연하게 선택하는 방법이 있다는 것을 이번에 공부하면서 알게 됐습니다.
평소에는 CSS 전처리기를 사용해 해당 DOM에 유니크한 클래스를 부여하는 방식으로 스타일링했는데, 기회가 된다면 속성 선택자를 활용한 스타일링도 시도해 봐야겠습니다.