CSS - 문제 미리보기
문제 1269
easy
다음 CSS에서 박스가 깨지지 않도록 하는 속성은?
```css
* {
_____: border-box;
}
.box {
float: left;
width: 33.33%;
padding: 50px;
border: 2px solid black;
}
```
```css
* {
_____: border-box;
}
.box {
float: left;
width: 33.33%;
padding: 50px;
border: 2px solid black;
}
```
정답: B
box-sizing의 필수적 역할:
문제 상황:
• `width: 33.33%` + `padding: 50px` + `border: 2px`
• 기본적으로는 총 너비가 33.33%를 초과
• 결과: 3개 박스가 한 줄에 들어가지 않고 레이아웃 깨짐
box-sizing: border-box의 해결책:
• width 값에 padding과 border를 포함
• 총 너비가 정확히 33.33%로 유지
• 3개 박스가 완벽하게 한 줄에 배치
문제 상황:
• `width: 33.33%` + `padding: 50px` + `border: 2px`
• 기본적으로는 총 너비가 33.33%를 초과
• 결과: 3개 박스가 한 줄에 들어가지 않고 레이아웃 깨짐
box-sizing: border-box의 해결책:
• width 값에 padding과 border를 포함
• 총 너비가 정확히 33.33%로 유지
• 3개 박스가 완벽하게 한 줄에 배치
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.