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은 키보드 탐색처럼 포커스 표시가 필요한 상황에서만 스타일을 적용하여, 접근성을 유지하면서 불필요한 시각 효과를 줄입니다.

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

시장과 사람의 답을 봤다면,다음 결과물의 구조를 고릅니다.