처리중입니다. 잠시만 기다려주세요.
TTJ 코딩클래스
정규반 단과 자료실 테크 뉴스 코딩 퀴즈
퀴즈 / CSS / 문제

CSS :focus-visible 의사 클래스가 :focus와 다른 점으로 올바른 것은?

쉬움 MDN Web Docs
보기 및 정답
A 키보드로 포커스했을 때만 스타일을 적용하고, 마우스 클릭 시에는 적용하지 않는다
B ::before 가상 요소는 content 속성 없이도 자동으로 화면에 표시된다
C ::placeholder 가상 요소는 모든 입력 필드에 기본으로 적용되어 있다
D 가상 요소에는 JavaScript를 통한 이벤트 리스너를 직접 추가할 수 있다

해설

:focus-visible은 키보드 탐색 등 포커스 표시가 필요한 상황에서만 매칭됩니다. 마우스 클릭 시에는 적용되지 않아 '클릭 후 남는 포커스 윤곽선' 문제를 해결합니다. outline: none 대신 :focus-visible을 사용하면 접근성을 유지하면서 깔끔한 UI를 만들 수 있습니다.

코딩, 제대로 배우고 싶다면?

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

정규반 살펴보기