focus 관련 선택자를 알아보자(focus, focus-within, focus-visible)

우리는 input, button, a 태그와 같이 포커스 가능한 요소를 클릭시, 선택자를 사용해 스타일을 지정할 수 있다. 일반적으로 focus 선택자를 사용하겠지만, 사실 focus 관련하여 여러 선택자가 존재한다. 이 본문에서는 focus, focus-within, focus-visible 선택자에 대해 알아본다.

 

1. focus와 focus-within 선택자

1) focus (:focus)

(1) focus 선택자?

• focus선택자는 사용자가 요소를 선택(마우스 클릭, 탭)했을 경우, 해당 요소에서 사용할 수 있다.

<input />

input:focus {
  /*input에 적용한 스타일*/
}

 

(2) 사용 예시

• focus 선택자는 주로, 선택된 요소 자체에 스타일을 지정할 때 사용된다.

See the Pen input example by KumJungMin (@kumjungmin) on CodePen.

2) focus-within (:focus-within)

(1) focus-within선택자?

• 사용자가 요소를 포커스했을 때, 요소 혹은 요소의 부모에서 해당 선택자를 사용할 수 있다.

<div>
  <input />
</div>

div:focus-within {
  /*focus시 요소의 부모에 스타일 지정*/
}

input:focus {
 /*focus시 자체 스타일 지정도 가능*/
}

 

• 위 코드는 실제로 아래와 같이 작동된다.

See the Pen focus-within example-1 by KumJungMin (@kumjungmin) on CodePen.

 

(2) 사용 예시

• 요소 선택시, 요소를 감싸는 부모의 스타일을 지정할 때 좋다.
• 한 예시로, 요소가 포커스되었을 때 라벨을 추가하거나 부모의 스타일을 변경할 수 있다.

See the Pen focus-within example2 by KumJungMin (@kumjungmin) on CodePen.

3) focus vs focus-within

(1) 요소에 스타일 지정

• focus, focus-within 모두 선택된 요소의 스타일 지정이 가능하다.

See the Pen focus vs focus-within(1) by KumJungMin (@kumjungmin) on CodePen.

 

(2) 요소의 부모에 대한 스타일 지정

• focus는 선택된 요소의 부모에 대한 스타일 지정이 불가하다.
• 그러나 focus-within 의 경우, 선택된 요소의 부모 스타일 지정이 가능하다.
• 신기한 점, 부모 내부에 어떤 요소라도 focus되면 부모 스타일 지정이 가능하다!

See the Pen focus vs focus-within(2) by KumJungMin (@kumjungmin) on CodePen.

2. focus와 focus-visible 선택자

1) focus-visible (:focus-visible)

(1) focus-visible 선택자?

• focus-visible은 포커스된 요소에 대한 스타일 지정이 가능하다.
• 단, 버튼은 키보드 탭 클릭시에만 focus-visible이 적용된다.
• focus와 용도가 유사해보이지만, 키보드 탭 접근성 고려할 때 유용하다.

<input />

input:focus-visible {
  outline: 2px solid red;
}

See the Pen focus-visible by KumJungMin (@kumjungmin) on CodePen.

 

(2) 접근성이 좋은 선택자라고?

• focus-visible이 접근성 좋은 선택자라고 하니, 말이 너무 어려우니 예시와 함께보자.
• 아래 이미지는 우리가 버튼을 클릭했을 때 주로 나타나는 현상이다.
• 디자인적인 측면에서 버튼에 외곽선이 나타나는 건 좋지 않다.

• 해결 방법으로 focus선택자를 사용해 outline 지울 수 있다.

button:focus {
  outline: none;  /*방법1*/
}

button:focus {
  outline: 0;     /*방법2*/
}

• 하지만 focus선택자를 이용해 outline을 지우면 문제가 발생한다.
• 포커스 가능한 요소의 경우, 마우스 클릭은 물론 키보드 탭을 이용해서 포커스가 가능하다.
• 하지만 focus선택자를 사용해 outline을 지우면, 키보드 탭을 했을 때 포커스 효과도 사라진다!
• 이렇게 되면 사용자는 본인이 해당 요소를 선택했는지 알 수 없기에, 접근성 측면에서 좋지 않은 방법이다.

 

• 그럼 어떻게 해야할까? 바로 focus-visible을 사용하는 것이다!

button:focus-visible {
  outline: 3px solid red;
}

참고자료

• [CSS] 선택자 :Focus-Within 알아보기
• :focus-visible
• CSS :focus 스타일을 키보드 사용자에게만 보여주기 (:focus-visible)