CSS :focus-visible과 :focus 선택자의 차이점은?

보통 MDN Web Docs

보기 및 정답

A :focus-visible은 키보드 탐색 시에만 포커스 스타일을 적용하고, :focus는 마우스 클릭을 포함한 모든 포커스에 적용된다

B ::placeholder 의사 요소는 입력 필드에 값이 있어도 표시되지만 :placeholder-shown은 빈 필드에서만 활성화된다

C ::placeholder와 :placeholder-shown은 동일한 기능을 하지만 전자는 구형 브라우저에서만 지원되는 레거시 문법이다

D :nth-child() 선택자와 :nth-of-type() 선택자는 형제 요소의 타입에 관계없이 동일한 요소를 항상 선택하게 된다

:focus는 마우스 클릭이나 탭 키 모두에서 스타일이 적용되어 불필요한 포커스 링이 보일 수 있습니다. :focus-visible은 키보드 탐색처럼 포커스 표시가 필요한 상황에서만 스타일을 적용하여, 접근성을 유지하면서 불필요한 시각 효과를 줄입니다.

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

로그인