[CSS] focus 가상 클래스 | :focus, :focus-within, :focus-visible

목차

1. Focus(포커스)란?

2. :focus

3. :focus-within

4. :focus-visible

 

 

Focus(포커스)란?

요소를

1. 클릭하거나
2. 키보드 tab키로 요소에 이동하면

해당 요소는 Focus(포커스) 상태가 된다.

 

 

잠깐! Pseudo Class(가상 클래스)를 사용하면 좋은 이유

• 따로 자바스크립트를 사용하는 작업 없이, CSS만으로 해결이 가능하다.
• 따라서 단순 스타일링 작업은 최대한 CSS 내에서 해결하자!

 

 

이번 포스팅에선 포커스된 요소를 나타내는 3개의 가상 클래스에 대해 알아보자.

 

 

1. :focus 

<input> 태그 등, 포커스를 받은 요소를 나타낸다.

 

See the Pen input focus1 by hayoung-99 (@hayoung-99) on CodePen.

 

 

주의 ❗

:focus는 포커스가 가능한 요소에만 적용된다.

• 포커스가 가능한 요소) <input>, <a>, <button>, <textarea>, <select> 등의 태그
• 포커스가 불가능한 요소) <div>, <h1>, <p> 등의 태그

 

 

🤔 그러면 :foucs가 적용되지 않는 요소는 어떻게 스타일링하나요?

특정 요소를 클릭해서 포커싱될 때의 스타일링을 하고 싶은 거라면

• 자바스크립트로 요소의 Client Event를 제어하거나
• 자식 요소가 포커스가 가능한 요소인 경우 아래의 :focus-within을 사용한다.

 

 

 

2. :focus-within

하위 자식 요소가 포커스가 가능한 요소라면, 자식 요소가 포커스될 때의 부모 요소를 스타일링할 수 있다.

대표적으로 div 요소가 input 요소를 감싼 형태에서 div 요소를 스타일링하고 싶을 때 유용하다.

 

네이버 로그인 화면을 대표적인 예시로 들 수 있다.

네이버 로그인 화면 일부. div 태그 안에 input 태그를 감싼 모습이다. 출처) NAVER

 

위처럼 네이버 로그인 화면은 div 요소 안에 input 요소를 감싼 형태인데,

input 요소는 입력 크기만큼만 설정되어 있으므로 포커싱 스타일은 부모인 div 요소에 설정하는 것이 적절하다.

 

이 경우엔 div 요소에 :focus-within 가상 클래스를 적용하여,

포커스가 가능한 input 요소가 포커스될 때의 div 요소를 스타일링할 수 있다.

 

See the Pen input focus2 by hayoung-99 (@hayoung-99) on CodePen.

 

 

 

3. :focus-visible

:focus 가상 클래스와 용도는 비슷하지만, 접근성 고려를 위해 :focus-visible을 권장한다.

 

접근성 고려란?

디자인을 하다 보면 포커싱 스타일링이 예쁘지 않아 스타일을 아예 무효화하는 경우가 종종 있다.

input:focus {
    outline: none;
}

:focus 가상 클래스를 통해 outline: none으로 포커싱 스타일을 무효화하면, 키보드 tab 키로 요소 간 이동을 할 때도 포커싱 스타일이 보이지 않는다.

즉, 만약 마우스 없이 키보드만 사용하는 유저 입장에선 현재 요소가 포커스된 건지 알 수 없다는 문제가 발생한다.

 

따라서 이런 문제를 고려해서 :focus와 :focus-visible을 함께 사용하는 것이 좋다.

 

See the Pen Untitled by hayoung-99 (@hayoung-99) on CodePen.

 

✅ 클릭으로 요소를 포커스할 때와 키보드 tab 키로 포커스할 때의 스타일링이 다른 것을 볼 수 있다.