다음 상황에서 가장 적절한 border-style 조합은? 상황: 양식(form)의 입력... | CSS

CSS - 문제 미리보기

문제 1100

hard

다음 상황에서 가장 적절한 border-style 조합은? 상황: 양식(form)의 입력 필드를 디자인하는데, 평상시에는 연한 실선으로 표시하다가 사용자가 클릭(focus)했을 때는 더 진하고 두꺼운 실선으로 변경하고 싶습니다. 또한 오류가 있을 때는 빨간색 점선으로 표시하고 싶습니다.

A. ```css input { border-style: none; } input:focus { border-style: solid; } input.error { border-style: dashed; } ```

B. ```css input { border-style: solid; } input:focus { border-style: double; } input.error { border-style: dotted; } ```

C. ```css input { border-style: dotted; } input:focus { border-style: solid; } input.error { border-style: groove; } ```

D. ```css input { border-style: dashed; } input:focus { border-style: ridge; } input.error { border-style: inset; } ```

정답: B

사용자 경험(UX)을 고려한 적절한 테두리 스타일 선택이 중요합니다. 요구사항 분석: 1. 평상시: 연한 실선 → 기본적이고 깔끔한 `solid` 2. 포커스 시: 진하고 두꺼운 → `double`로 강조 효과 3. 오류 시: 주의를 끄는 → `dotted`로 시각적 구분 선택지 분석: 2번 (정답): • `solid`: 깔끔하고 표준적인 입력 필드 스타일 ✓ • `double`: 포커스 시 시각적 강조 효과 ✓ • `dotted`: 오류 상태의 부드러운 경고 효과 ✓ 다른 선택지들의 문제점: • 1번: 기본 상태가 `none`이면 테두리가 없어서 입력 필드 인식 어려움 • 3번: 기본 상태가 `dotted`이면 너무 산만함 • 4번: `ridge`, `inset` 등 3D 효과는 현대적 디자인에 부적합

💡 학습 팁

이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.