CSS - 문제 미리보기
문제 1270
medium
float로 만든 박스들의 높이를 동일하게 만드는 방법으로 제한이 있는 것은?
```css
.box {
float: left;
width: 33.33%;
_____: 500px;
}
```
정답: C
고정 height의 장단점과 한계:
height: 500px의 효과:
• 모든 박스가 정확히 500px 높이
• 시각적으로 완벽하게 정렬된 레이아웃
• 깔끔하고 일관된 디자인
심각한 제한사항들:
콘텐츠 넘침 문제:
• 내용이 500px를 초과하면 박스 밖으로 넘침
• 텍스트가 다른 요소와 겹칠 수 있음
• 사용자 경험 크게 저하
더 나은 대안들:
• Flexbox: `display: flex` + `align-items: stretch`
• CSS Grid: `display: grid` + `grid-template-rows: 1fr`
• JavaScript: 동적으로 최대 높이 계산
Flexbox 해결책:
```css
.container {
display: flex;
}
.box {
flex: 1; /* 동일한 크기 + 자동 높이 맞춤 */
}
```
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.