선택자 심화
1. 고급 포커스 선택자
고급 포커스 선택자는 웹 접근성을 높이면서도 깔끔한 UI를 유지하기 위한 CSS 가상 클래스들입니다.
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 [속성이름*="속성값"] 선택자
특정 문자열을 포함하는 요소를 모두 선택합니다.