focus 시리즈 (:focus, :focus-visible, :focus-within)

 일단 focus가 무엇일까? 뭐 뜻으로는 "~에 초점을 맞추다"이고, 어렸을 적 배우기로는 키보드 입력을 받을 수 있는 상태의 입력폼을 뜻한다. 뭐 이건 html뿐만 아니라, GUI를 지원하는 프로그래밍 언어에서 통용되는 내용이라고 보면 된다.

 당연하게도, focus는 한번에 하나의 엘리먼트만 가능하다. 기본적으로 키보드로 상호작용 가능한 <a>, <input>, <button>, <textarea> 등... 엘리먼트들은 :focus 사용이 가능하다. 이례적으로 tabindex를 이용한 엘리먼트도 :focus 사용이 가능하다.

 :focus

 상호작용 가능한 엘리먼트가 초점 되어있는 상태이다. 

 간단하게 클릭해보자. 그러면 글씨도 빨게지고, 외곽선도 빨갛게 생길것이다. 간단하게 이런식으로 사용가능하다.

 하지만 보자. 솔직히 말이다. 클릭이 이미 끝난 상태에서도 focus가 계속 이어지고 있다. button은 클릭하는 것 말고는 그 이후에 할 행동은 없다. 하지만, 저렇게 초점된 상태를 표현하게 되면, 사용자가 헷갈릴 수 있다.

 :focus-visible

 위에서 클릭하고 나서 계속 선택되어있는 상태가 불편할 것이다. 라고 언급 했다. 마우스를 이용한다던가, 터치를 이용 하는 경우 버튼에 focus상태에 대한 표현은 필요는 없다.

 하지만, 키보드를 사용한다고 생각하자. 현재 뭐에 초점되어 있는 상황인지 확인이 필요하다. 그럴때, 사용할 수 있는게, focus-visible이다.

 간단하게 클릭해보자. 이 상태에서는 아무런 변경이 없는 것을 볼 수 있다. 그러면 TAB을 이용하여 초점을 맞추어 보자. 현재 무엇이 초점 되어있는지, 노출이 될 것이다.

 :focus-within

 해당 셀렉터는 내부에 포커스를 받은 엘리먼트가 있는지에 따라, 활성화 되는 규칙이다. 이 규칙은 현재 선택되어있는 그륩에 초점을 맞춘다. 예를들면 <label>이다.

 일단 말을하자면, :focus-within-visible과 같은 사용하기 편한 셀렉터는 없다. 하지만 :has를 이용해서 내부 속성이 tab을 이용한 것과 차이를 줄 수 있긴하지만, :has는 몇몇 브라우저에서 사용이 불가능 하기에, 이 부분은 적절히 사용 바란다.