CSS - 문제 미리보기
문제 1478
medium
다음 코드에서 .container 안에 .item 요소 3개가 나란히 배치되도록 하려면 빈칸에 무엇이 들어가야 할까요?
```css
.container {
width: 600px;
}
.item {
width: ____%;
padding: 10px;
border: 2px solid black;
box-sizing: _____;
float: left;
}
```
정답: B
문제 상황 분석:
• 3개 요소를 나란히 배치하려면 각각 33.33% 너비가 필요합니다
• 각 `.item`에는 padding과 border가 있습니다
`content-box`를 사용할 경우:
• `width: 33.33%` + padding + border > 33.33%
• 실제 너비가 33.33%를 초과하여 3개가 한 줄에 들어가지 못합니다
• 마지막 요소가 다음 줄로 밀려납니다
`border-box`를 사용할 경우:
• `width: 33.33%`가 padding과 border를 포함한 전체 너비
• 정확히 33.33% × 3 = 100%가 되어 3개가 완벽하게 나란히 배치됩니다
실무 팁:
• 그리드나 flexbox 레이아웃에서 `border-box`는 필수적입니다
• 반응형 디자인에서 예측 가능한 크기 제어가 가능합니다
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.