CSS - 문제 미리보기
문제 1146
hard
다음 상황에서 가장 적절한 CSS 설정은?
상황: 웹 접근성을 고려한 버튼을 디자인하고 있습니다. 평상시에는 아웃라인이 없고, 키보드로 포커스했을 때만 파란색 실선 아웃라인이 나타나야 합니다. 또한 아웃라인으로 인해 레이아웃이 변경되지 않아야 하며, 마우스 클릭 시에는 아웃라인이 나타나지 않아야 합니다.
정답: C
`:focus-visible` 가상 클래스는 키보드 포커스와 마우스 클릭을 구분하여 접근성을 고려한 최적의 사용자 경험을 제공합니다.
요구사항 분석:
1. 평상시 아웃라인 없음 → `outline: none`
2. 키보드 포커스 시에만 표시 → `:focus-visible` 사용
3. 레이아웃 변경 없음 → outline 사용 (border 대신)
4. 마우스 클릭 시 아웃라인 없음 → `:focus-visible`로 자동 해결
3번 선택지 분석 (정답):
```css
.accessible-button {
outline: none; /* 기본 아웃라인 제거 */
}
.accessible-button:focus-visible {
outline: 2px solid blue; /* 키보드 포커스 시에만 표시 */
}
```
장점:
• 접근성: 키보드 사용자에게 명확한 포커스 표시 ✓
• 사용자 경험: 마우스 사용자에게는 방해되지 않음 ✓
• 레이아웃 안정성: outline 사용으로 크기 변화 없음 ✓
• 현대적 접근: 최신 웹 표준 활용 ✓
다른 선택지들의 문제점:
1번: border 사용 문제
• border로 인해 버튼 크기가 변경됨
• 레이아웃이 깨질 수 있음
2번: 논리적 오류
• 모든 상황에서 아웃라인이 표시됨
• `:not(:focus)`는 포커스가 아닐 때를 의미
4번: margin 해킹
• margin으로 크기 변화를 상쇄하려는 잘못된 접근
• 다른 부작용 발생 가능
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.