[CSS] :focus, :focus-visible 차이점

focus, focus-visible

---

• :focus: 모든 포커스 상황(키보드, 마우스, 터치)에 적용
• :focus-visible: 키보드 포커스 또는 브라우저에서 포커스 표시가 필요하다고 판단할 때만 적용
  • Tab 키로 포커스 이동 시(키보드 포커스)
  • 키보드 입력을 지원하는 요소(텍스트 입력 필드 등)
  • …

 

일반적으로 마우스 사용자에게 불필요한 외곽선은 숨기면서 키보드 사용자의 접근성을 보장하기 위해 :focus와 :focus-visible 선택자를 조합해서 사용하는 경우가 많다.

/* 기본 포커스 스타일 리셋 */
button:focus {
  outline: none;
}

/* 키보드 포커스 시 스타일 적용 */
button:focus-visible {
  outline: 2px solid green;
}

 

 

outline, ring

---

Shadcn 컴포넌트에선 :focus-visible 상태에 outline 대신 ring을 사용한다. outline은 브라우저마다 표시 방식이 조금씩 달라서 디자인 시스템의 일관성을 유지하기 어렵다. 반면, Tailwind CSS의 ring 유틸리티 클래스는 box-shadow를 활용하므로 원하는 두께와 색상으로 일관된 디자인을 유지할 수 있다.

focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring

 

참고로 border는 박스 모델에 포함되기 때문에 요소 크기에 영향을 주지만, outline과 ring은 박스 모델 바깥 영역에 그려져서 요소 크기에 영향을 주지 않는다.