가상 클래스와 가상 요소 심화
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
체크된 상태의 라디오 버튼이나 체크박스를 선택합니다.
이러한 가상 선택자들은 사용자 인터페이스 요소의 다양한 상태를 스타일링하는 데 매우 유용합니다. 이를 통해 사용자에게 시각적 피드백을 제공하고, 웹 애플리케이션의 사용성을 크게 향상시킬 수 있습니다.