처리중입니다. 잠시만 기다려주세요.
TTJ 코딩클래스
정규반 단과 자료실 테크 뉴스 코딩 퀴즈
더보기
인사이트 FAQ 유튜브 카페

로그인

| 비밀번호찾기

추가 정보 입력

서비스 이용을 위해 휴대전화 번호를 입력해주세요.

회원가입

무료 회원가입 가입비 없이 무료로 가입할 수 있습니다

이미 계정이 있으신가요?

비밀번호 찾기

퀴즈 / CSS / 문제

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

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

해설

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

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

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

정규반 살펴보기

관련 문제

CSS의 상대 길이 단위 lh의 기준은 무엇인가요?
CSS
CSS :nth-child() 선택자의 'of S' 구문(예: :nth-child(2 of .active))의 동작으로 올바른 것은?
CSS
CSS :focus-visible과 :focus 선택자의 차이점은?
CSS
CSS ::backdrop 의사 요소의 역할로 올바른 것은?
CSS
CSS word-break와 overflow-wrap(word-wrap)의 차이점으로 올바른 것은?
CSS