[CSS] 웹 접근성을 높이는 CSS 포커스 링 스타일링 [outline, box-shadow, focus-visible 활용법]

---

- 웹 접근성을 높이는 CSS 포커스 링 스타일링

1. outline을 이용한 포커스 링 스타일 조정

button:focus {
  outline: 2px solid #ff0000; /* 빨간색 포커스 링 */
  outline-offset: 4px; /* 테두리와의 간격 */
}

outline 이용

---

2. box-shadow를 이용한 커스텀 포커스 효과

button:focus {
  outline: none; /* 기본 포커스 제거 */
  box-shadow: 0 0 5px 2px rgba(0, 150, 255, 0.8); /* 파란색 발광 효과 */
}

box-shadow 이용

---

3. focus-visible을 이용한 개선된 접근성

button:focus-visible {
  outline: 3px dashed #00ff00; /* 초록색 점선 포커스 */
}

focus-visible 이용

---