📌 :focus
: 사용자가 요소를 클릭하거나 키보드 Tab 키로 선택했을 때 현재 요소를 포커스하는 속성
- 스타일을 추가하면 화면에 표시되기 때문에 :focus의 outline을 지우기도 한다
=> 반드시 대체제인 focus-visible을 같이 사용해야 한다.
:focus {
outline: none;
}
📌 :focus-visible
: 사용자가 키보드를 사용하여 요소에 포커스를 주었을 때, 해당 요소가 실제로 포커스를 받고 있는지를 나타내는 속성
- 마우스로 클릭 시에는 보이지 않음 (키보드를 사용하여 포커스가 주어진 경우에만 적용)
=> 접근성 측면에서 사용자 경험을 개선하는 데 도움 - border는 사용 X, outline을 사용 O
border는 상자 크기에 영향을 줌 ⭕
outline은 상자 크기에 영향을 받지 않음 ❌ - :focus 속성의 outline을 디자인 때문에 0으로 만들었다면 focus-visible 속성을 넣어줘야 한다.
*:focus{
outline: 0;
}
*:focus-visible {
outline: 2px solid green;
}
See the Pen :focus-visible by nadia kwon (@nadia-kwon) on CodePen.
* IE에서는 지원하지 않음
📌 :focus-within
: 요소나 그 요소의 자손 중 하나가 포커스 되었을 때 해당 요소를 선택하는 속성
- 드롭다운 메뉴나 모달 창에 유용하게 사용
<input> 태그에 포커스하면 조상 태그인 <fieldset>가 선택됨
See the Pen :focus-within by nadia kwon (@nadia-kwon) on CodePen.
참고