CSS - 문제 미리보기
문제 1271
hard
다음 상황에서 가장 적절한 해결책은?
```css
/* 현재 코드 */
.box {
float: left;
width: 33.33%;
height: 400px; /* 고정 높이 */
padding: 20px;
}
```
문제점: 모바일에서 콘텐츠가 박스 밖으로 넘치고, 각 박스의 콘텐츠 양이 다름
정답: C
레거시 float 문제의 근본적 해결책:
현재 코드의 multiple 문제점:
고정 높이 문제:
• 콘텐츠 양에 따라 넘침 또는 빈 공간 발생
• 모바일에서 특히 심각한 레이아웃 깨짐
• 다국어나 동적 콘텐츠 대응 불가
float의 근본적 한계:
• 원래 텍스트 감싸기 용도로 설계됨
• 2차원 레이아웃에 부적합
• clearfix 등 복잡한 해킹 필요
Flexbox 해결책의 우수성:
완벽한 높이 자동 맞춤:
```css
.container {
display: flex;
flex-wrap: wrap; /* 반응형 지원 */
}
.box {
flex: 1 1 33.33%; /* 유연한 크기 */
padding: 20px;
/* height 불필요! 자동으로 맞춰짐 */
}
```
반응형 대응:
```css
@media (max-width: 768px) {
.box {
flex: 1 1 100%; /* 모바일에서 세로 배치 */
}
}
```
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.