CSS - 문제 미리보기
문제 1118
hard
다음 상황에서 가장 효율적인 CSS 작성 방법은?
상황: 폼의 입력 필드를 디자인하는데, 기본 상태에서는 연한 회색 테두리(1px solid #ccc)를 가지고, 포커스 상태에서는 파란색 테두리(2px solid #007bff)로 변경하고 싶습니다. 또한 브라우저의 기본 outline을 제거해야 합니다.
정답: D
효율적인 CSS 작성을 위해서는 코드의 간결성, 성능, 사용자 경험을 모두 고려해야 합니다.
4번 선택지 분석 (정답):
```css
.input-field {
border: 1px solid #ccc;
outline: none;
}
.input-field:focus {
border: 2px solid #007bff;
}
```
장점:
• 간결성: 단축 속성으로 코드가 깔끔 ✓
• 성능: 최소한의 속성 변경으로 리플로우 최소화 ✓
• 일관성: outline 제거를 기본 상태에서 처리 ✓
• 유지보수: 수정할 부분이 명확함 ✓
다른 선택지들의 문제점:
1번: 너무 장황함
• 개별 속성으로 인한 코드 길이 증가
• 유지보수 시 여러 곳을 수정해야 함
2번: outline 처리 위치 문제
• focus 상태에서만 outline을 제거하면 다른 상황에서 문제 발생 가능
3번: 혼재된 방식
• 단축 속성과 개별 속성이 섞여 일관성 부족
• `outline: 0`과 `outline: none`의 불일치
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.