선택자 심화
1. 고급 포커스 선택자
1.1 :focus-visible
:focus와 유사하지만 :focus는 포커스된 요소에 항상 적용되는 반면, :focus-visible은 좀 더 선택적으로 작동합니다.
:focus-visible은 주로 키보드를 사용하여 페이지를 탐색할 때나 스크립트를 통해 포커스가 관리될 때 활성화됩니다. 이는 사용자가 현재 어떤 요소에 포커스가 있는지 시각적으로 확인해야 하는 상황에서 유용합니다. 그러나 마우스나 터치 인터페이스를 사용하여 요소에 물리적으로 포커스를 설정할 때는 일반적으로 :focus-visible이 활성화되지 않습니다. 이는 사용자가 이미 자신이 어떤 요소를 선택했는지 알고 있기 때문입니다.
:focus-visible의 주요 목적은 사용자 경험을 개선하는 것입니다. 이 가상 클래스를 사용함으로써 불필요한 시각적 표시를 줄여 인터페이스를 깔끔하게 유지할 수 있습니다. 동시에 키보드 사용자에게는 명확한 포커스 표시를 제공하여 웹 접근성을 향상시킬 수 있습니다.
주의
:focus-visible의 정확한 동작은 브라우저에 따라 약간 다를 수 있습니다. 일부 브라우저에서는 마우스 클릭으로도 :focus-visible이 트리거될 수 있습니다.
1.2 :focus-within
요소 또는 그 자식 요소가 포커스를 받았을 때 적용됩니다.
:focus-within은 폼 디자인에 특히 유용합니다. 사용자가 특정 입력 필드에 포커스를 맞출 때 전체 폼 그룹의 스타일을 변경할 수 있습니다.
2. 상태 관련 가상 클래스 선택자
2.1 :enabled
활성화된 상태의 폼 요소를 선택합니다.
2.2 :disabled
비활성화된 상태의 폼 요소를 선택합니다.
2.3 :checked
체크된 상태의 라디오 버튼이나 체크박스를 선택합니다.
3. 속성 선택자 ([])
속성 선택자는 HTML 요소의 속성을 기반으로 요소를 선택하는 강력한 도구입니다. 이를 통해 특정 속성을 가진 요소나 속성 값이 특정 패턴을 가진 요소를 선택할 수 있습니다.
3.1 기본 속성 선택자 [속성이름]
해당 속성을 가진 모든 요소를 선택합니다.
3.2 속성값 선택자
3.2.1 [속성이름="속성값"] 선택자
해당 속성에 해당 속성값을 가진 모든 요소를 선택합니다.
3.2.2 [속성이름~="속성값"] 선택자
공백으로 구분된 단어 목록 중 특정 단어를 포함하는 요소를 선택합니다.
3.2.3 [속성이름|="속성값"] 선택자
특정 문자열만 포함하거나, 특정 문자열로 시작하면서 바로 하이픈(-)이 오는 요소를 선택합니다.
3.2.4 [속성이름^="속성값"] 선택자
특정 문자열로 시작하는 요소를 모두 선택합니다.
3.2.5 [속성이름$="속성값"] 선택자
특정 문자열로 끝나는 요소를 모두 선택합니다.
3.2.6 [속성이름*="속성값"] 선택자
특정 문자열을 포함하는 요소를 모두 선택합니다.