CSS - 문제 미리보기

문제 1133

hard
다음 상황에서 가장 적절한 CSS 설정은?

상황: 카드 컴포넌트를 만들고 있는데, 카드의 전체 너비를 300px로 고정하면서 내부 콘텐츠에는 상하 20px, 좌우 30px의 패딩을 주고 싶습니다. 또한 1px 테두리도 포함되어야 하며, 패딩 값이 변경되어도 전체 너비는 항상 300px을 유지해야 합니다.
A. ```css
.card {
width: 300px;
padding: 20px 30px;
border: 1px solid #ccc;
}
```
B. ```css
.card {
width: 238px;
padding: 20px 30px;
border: 1px solid #ccc;
}
```
C. ```css
.card {
width: 300px;
padding: 20px 30px;
border: 1px solid #ccc;
box-sizing: border-box;
}
```
D. ```css
.card {
max-width: 300px;
padding: 20px 30px;
border: 1px solid #ccc;
}
```

정답: C

`box-sizing: border-box`를 사용하면 width에 padding과 border가 포함되어 더 직관적인 크기 제어가 가능합니다.

각 선택지 분석:

3번 (정답) - box-sizing: border-box:
```css
.card {
width: 300px; /* 전체 너비 300px */
padding: 20px 30px; /* 패딩 포함 */
border: 1px solid #ccc; /* 테두리 포함 */
box-sizing: border-box; /* 패딩/테두리 포함 계산 */
}
```
장점:
• 직관적: width가 실제 전체 너비 ✓
• 유지보수성: 패딩 변경해도 전체 크기 유지 ✓
• 예측 가능: 설정한 너비가 실제 보이는 너비 ✓

다른 선택지들의 문제점:

1번: 기본 박스 모델
• 실제 너비: 300 + 60 + 2 = 362px (너무 큼)

2번: 수동 계산
• width: 238px (300 - 60 - 2)
• 패딩 변경 시 다시 계산해야 함 (유지보수 어려움)

4번: max-width
• 최대 너비만 제한, 정확한 크기 제어 불가

box-sizing의 두 가지 모드:

content-box (기본값):
```css
.box {
width: 200px; /* 콘텐츠 영역만 */
padding: 20px; /* +40px */
border: 1px solid; /* +2px */
/* 실제 너비: 242px */
}
```
border-box (권장):
```css
.box {
width: 200px; /* 전체 너비 */
padding: 20px; /* 포함됨 */
border: 1px solid; /* 포함됨 */
box-sizing: border-box;
/* 실제 너비: 200px */
/* 콘텐츠 영역: 158px */
}
```
현대 CSS 베스트 프랙티스:
```css
/* 전역 설정 */
* {
box-sizing: border-box;
}

/* 또는 */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
```
🎯 이 과목 문제 풀기 🏠 홈으로 가기

💡 학습 팁

이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.