Tool Hub

포커스 링 테스터

outline·box-shadow 포커스 스타일 미리보기

CSS 선택자

키보드만(권장)

아래 컨트롤을 클릭하거나 Tab을 눌러 포커스 링을 미리 봅니다.

CSS
:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

사용 방법

  1. 숫자 입력과 색상 선택기를 사용하여 아웃라인 너비, 오프셋, 색상을 조정하세요.
  2. 아웃라인 스타일을 선택하세요: 실선, 파선 또는 점선.
  3. 선택적으로 box-shadow를 활성화하고 이중 링 효과를 위해 확산과 색상을 설정하세요.
  4. 미리보기 버튼 또는 입력으로 탭하여 실시간으로 렌더링된 포커스 링을 확인하세요.
  5. 생성된 CSS를 복사하여 스타일시트에 사용하세요.

예제

  • 너비 3px, 오프셋 2px, 색상 #0066FF, 스타일 실선을 설정하면 outline: 3px solid #0066FF; outline-offset: 2px;을 생성하여 미리보기 버튼에 포커스되었을 때 표시됩니다.
  • box-shadow를 활성화하고 확산 4px, 색상 rgba(0,102,255,0.4)를 설정하면 아웃라인 주변에 부드러운 글로우 링이 추가됩니다.

프로덕션 사용 전 출력을 검증하십시오. 보증 없음 — 자세한 내용은 이용약관.