CSS - 문제 미리보기
문제 1362
medium
다음 상황에서 `div` 요소의 실제 너비는? (부모 컨테이너 너비가 800px일 때)
```css
#container {
width: 800px;
}
#div1 {
width: min(60%, 400px);
}
```
정답: B
• `min()` 함수는 여러 값 중 가장 작은 값을 선택합니다
• 계산 과정:
• 부모 너비: 800px
• 60% 계산: 800px × 0.6 = 480px
• 비교할 값들: 480px vs 400px
• 더 작은 값: 400px 선택
• min() 함수의 특징:
```css
/* 최대값을 제한하면서 반응형 동작 */
width: min(90%, 500px);
/* 화면이 클 때: 90% > 500px → 500px 사용 (최대값 제한) */
/* 화면이 작을 때: 90% < 500px → 90% 사용 (반응형) */
```
• 실용적인 활용 사례:
```css
/* 컨테이너 최대 너비 제한 */
.container {
width: min(100%, 1200px);
margin: 0 auto;
}
/* 반응형 이미지 크기 제한 */
img {
width: min(100%, 600px);
height: auto;
}
/* 폰트 크기 상한선 설정 */
h1 {
font-size: min(4vw, 48px);
}
```
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.