[CSS] focus-within과 focus-visible

 

 

CSS에서 포커스 상태를 스타일링 하기 위해 가상클래스인 focus를 주로 사용하였지만

focus 이외에 focus-within과 focus-visible도 있다는 사실을 알았다.

 

focus-within이란?

focus-within을 사용한 요소는 해당 요소나 내부 요소 중에 포커스 상태가 되면 활성화가 된다.

 

<div>
	<input />
</div>

div:focus-within {
	background: red;
}

 

div 요소에 focus-within을 사용하여 스타일링을 한 경우 div 안의 input이 포커스를 받으면 활성화가 되어 배경색이 빨강색이 된다. 기존의 focus와 달리 해당 요소를 포함하여 내부 요소까지 감지하여 활성화가 된다는 차이점이 있다.

 

 

focus-visible이란?

focus-visible을 사용한 요소는 해당 요소에 포커스 상태가 되면 활성화가 된다.

 

이 설명을 보고 focus와 focus-visible의 차이에 대해 알아보았다.

focus는 포커스된 요소에 항상 적용되는 반면,  focus-visible는 포커스가 있는 요소에 적용받지만 포커스가 현재 어디에 있는지 알 필요가 있는 경우에만 일치한다. 브라우저의 로직에 따라 포커스된 요소에 적용될 수도 있고 적용되지 않을 수도 있다.

 

즉, 마우스 또는 손가락을 사용하여 요소에 물리적으로 포커스를 설정하는 경우와 같이 사용자가 포커스 위치를 알고 있는 경우에는 포커스 스타일이 필요하지 않기 때문에 활성화가 안되지만 키보드로 페이지를 탐색하거나 스크립트를 통해 포커스가 관리되는 경우 항상 필요하기 때문에 활성화가 된다.

 

See the Pen Untitled by DDD120 (@DDD120) on CodePen.

 

 

아주 간단한 예제로 focus를 적용한 버튼과 focus-visible을 적용한 버튼이 있다. 마우스로 버튼을 클릭해보면 focus를 적용한 버튼만 outline이 나타나고 focus-visible을 적용한 버튼은 나타나지 않는다. 키보드로 탐색해보면 focus-visible을 적용한 버튼에서 outline이 나타나게 된다.