CSS - 문제 미리보기
문제 1136
medium
`max-width`의 주요 목적과 장점은?
정답: B
`max-width`는 반응형 디자인에서 작은 화면에 대응하기 위한 중요한 속성입니다.
max-width의 동작 원리:
• 화면이 클 때: 설정한 max-width까지 확장
• 화면이 작을 때: 화면 크기에 맞춰 자동 축소
width vs max-width 비교:
width 사용 시 (문제 상황):
```css
.fixed-box {
width: 800px; /* 고정 너비 */
}
/* 화면이 800px보다 작으면 가로 스크롤 발생! */
```
max-width 사용 시 (해결):
```css
.responsive-box {
max-width: 800px; /* 최대 너비 제한 */
}
/* 화면이 작아지면 자동으로 축소됨 */
```
max-width의 동작 원리:
• 화면이 클 때: 설정한 max-width까지 확장
• 화면이 작을 때: 화면 크기에 맞춰 자동 축소
width vs max-width 비교:
width 사용 시 (문제 상황):
```css
.fixed-box {
width: 800px; /* 고정 너비 */
}
/* 화면이 800px보다 작으면 가로 스크롤 발생! */
```
max-width 사용 시 (해결):
```css
.responsive-box {
max-width: 800px; /* 최대 너비 제한 */
}
/* 화면이 작아지면 자동으로 축소됨 */
```
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.