CSS - 문제 미리보기
문제 1242
hard
다음 두 div 요소가 브라우저 너비 400px에서 어떻게 표시되는지 올바른 설명은?
```css
.container1 {
width: 600px;
margin: auto;
background: lightblue;
}
.container2 {
max-width: 600px;
margin: auto;
background: lightgreen;
}
```
정답: B
작은 화면에서의 서로 다른 동작:
container1 (width: 600px):
• 고정 너비: 브라우저 크기와 관계없이 600px 유지
• 스크롤 발생: 400px 화면에서 200px 넘침
• 사용성 문제: 가로 스크롤 필요로 모바일에서 불편
• margin: auto 무력화: 넘침으로 인해 가운데 정렬 효과 상실
container2 (max-width: 600px):
• 유연한 너비: 브라우저에 맞춰 400px로 자동 축소
• 스크롤 없음: 화면에 완전히 맞춤
• 반응형 동작: 다양한 기기에서 최적 표시
• 가운데 정렬 유지: margin: auto가 정상 작동
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.