CSS - 문제 미리보기
문제 1132
medium
다음 코드에서 실제 요소의 전체 너비는?
```css
.box {
width: 200px;
padding: ______;
border: 2px solid black;
}
```
전체 너비가 250px이 되도록 빈칸에 들어갈 값은?
정답: A
CSS의 기본 박스 모델에서는 width + padding + border가 실제 요소의 전체 너비가 됩니다.
박스 모델 계산:
전체 너비 = width + padding-left + padding-right + border-left + border-right
주어진 조건:
• 원하는 전체 너비: 250px
• width: 200px
• border: 2px solid (좌우 각각 2px = 총 4px)
계산 과정:
250px = 200px + padding-left + padding-right + 4px
250px = 204px + (padding-left + padding-right)
46px = padding-left + padding-right
padding 값 구하기:
```css
padding: 23px; /* 좌우 각각 23px = 총 46px */
```
검증:
• width: 200px
• padding: 23px × 2 = 46px
• border: 2px × 2 = 4px
• 총합: 200 + 46 + 4 = 250px ✓
실무에서 자주 하는 실수:
```css
/* 개발자가 원한 것 */
.box { width: 200px; } /* 전체 200px 원함 */
/* 실제 결과 */
.box {
width: 200px; /* 콘텐츠 영역만 200px */
padding: 20px; /* +40px */
border: 1px solid; /* +2px */
}
/* 실제 전체 너비: 242px */
```
이런 문제 때문에 modern CSS에서는 `box-sizing: border-box`를 많이 사용합니다.
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.