CSS - 문제 미리보기
문제 1138
hard
다음 상황에서 가장 적절한 CSS 설정은?
상황: 블로그 포스트 레이아웃을 만들고 있습니다. 콘텐츠 영역은 데스크톱에서 최대 800px 너비를 가지되, 태블릿과 모바일에서는 화면에 맞게 축소되어야 합니다. 또한 작은 화면에서는 좌우에 최소 20px의 여백을 확보하고, 콘텐츠가 부족해도 최소 500px의 높이를 유지해야 합니다.
정답: B
반응형 레이아웃에서는 유연성과 제약 조건을 모두 고려해야 합니다.
요구사항 분석:
1. 데스크톱 최대 800px → `max-width: 800px`
2. 태블릿/모바일 축소 → max-width 사용으로 자동 해결
3. 좌우 최소 20px 여백 → `padding: 0 20px`
4. 최소 500px 높이 → `min-height: 500px`
5. 중앙 정렬 → `margin: 0 auto`
2번 선택지 분석 (정답):
```css
.post-content {
max-width: 800px; /* 데스크톱에서 최대 800px */
min-height: 500px; /* 최소 높이 보장 */
margin: 0 auto; /* 중앙 정렬 */
padding: 0 20px; /* 좌우 여백 확보 */
}
```
장점:
• 완전 반응형: 모든 화면 크기에 대응 ✓
• 제약 조건 충족: 모든 요구사항 만족 ✓
• 사용자 경험: 가로 스크롤 없는 자연스러운 레이아웃 ✓
핵심 원칙:
1. max-width: 반응형 디자인의 핵심
2. min-height: 콘텐츠 부족 시에도 적절한 높이 유지
3. padding: 내부 여백으로 안전한 가독성 확보
4. margin: 0 auto: 중앙 정렬의 표준 방법
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.