[CSS] focus 관련 가상 클래스의 사용법과 차이점

:focus

기본 설명

• 요소가 현재 포커스를 받고 있을 때 매칭된다.
• 키보드 탐색(예: 탭 키)이나 마우스 클릭 등 모든 입력 방식에서 포커스 상태를 감지한다.

지원 요소
주로 폼 요소(예: input, textarea, button 등)와 같은 포커스 가능한 요소에 적용된다.

사용 예시
포커스를 받은 상태에서 기본적으로 강조하거나 시각적 피드백을 제공할 때 사용한다.

/* 포커스된 버튼에 파란색 아웃라인 */
button:focus {
  outline: 2px solid blue;
}

/* 포커스된 input 필드 배경색 강조 */
input:focus {
  background-color: lightblue;
}

---

:focus-visible

기본 설명

• 사용자가 키보드 탐색(예: 탭키) 또는 접근성 도구를 사용하여 포커스를 얻었을 때 매칭된다.
• 마우스로 클릭한 경우에는 적용되지 않는다.
• 브라우저의 접근성 정책에 따라 동작하며, 명확한 피드백이 필요한 경우에 적합하다.

지원 요소

• 모든 포커스가 가능한 요소에 적용된다.
• 브라우저의 접근성 정책에 따라 동작 방식이 달라질 수 있다.

사용 예시
키보드 사용자에게만 명확한 시각적 피드백을 제공하고, 마우스 사용 시에는 스타일링을 제한할 때 유용하다.

/* 키보드 탐색 시 초록색 아웃라인 표시 */
button:focus-visible {
  outline: 2px solid green;
}

/* 링크에 키보드 탐색 시 텍스트 강조 */
a:focus-visible {
  text-decoration: underline;
  color: blue;
}

---

:focus-within

기본 설명

• 요소 자체 또는 자식 요소 중 하나라도 포커스를 받을 경우 매칭된다.
• 부모 요소가 자식의 포커스 상태를 감지할 수 있도록 돕는다.
• 컨테이너 전체를 강조하거나, 상태 전달이 필요한 경우에 유용하다.

사용 예시
부모 요소를 강조하거나, 자식 요소의 포커스 상태에 따라 스타일을 변경할 때 유용하다.

/* 폼 그룹에 포커스 상태를 시각적으로 강조 */
.form-group:focus-within {
  border: 2px solid orange;
  background-color: #fff5e6;
}

/* 카드 컨테이너 강조 */
.card:focus-within {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

---

차이점

구분	대상 요소	사용 시점	주요 차이점
:focus	현재 포커스를 받은 요소	모든 입력 방식에서 포커스 상태를 감지	키보드, 마우스 등 모든 포커스 상황에서 적용
:focus-visible	키보드 탐색 등으로 포커스를 받은 요소	접근성 피드백 제공	키보드와 같은 명확한 포커스 상황에서만 스타일 적용, 마우스 클릭 시 기본적으로 적용되지 않음
:focus-within	자식 요소가 포커스를 받을 경우 부모 요소에 적용	부모 요소를 강조하거나 상태를 전달할 때 사용	자식 요소의 포커스 상태를 부모 요소로 전파하여 스타일링 가능