CSS - 문제 미리보기
문제 1430
easy
다음 코드에서 빈칸에 들어갈 올바른 속성은?
```css
img {
_______: 100%;
height: auto;
}
```
위 코드는 이미지가 화면 크기에 따라 반응형으로 조절되도록 하려고 합니다.
```css
img {
_______: 100%;
height: auto;
}
```
위 코드는 이미지가 화면 크기에 따라 반응형으로 조절되도록 하려고 합니다.
정답: B
반응형 이미지의 핵심 속성:
• `max-width: 100%`: 부모 요소보다 크지 않게 제한
• `height: auto`: 비율 유지하면서 높이 자동 조절
width vs max-width 차이:
```css
/* 문제가 있는 방법 */
img { width: 100%; } /* 항상 부모 크기에 맞춤 (늘어날 수 있음) */
/* 올바른 방법 */
img { max-width: 100%; height: auto; } /* 원본보다 커지지 않음 */
```
동작 원리:
• 작은 화면: 이미지가 화면에 맞게 축소
• 큰 화면: 원본 크기 이상으로 확대되지 않음
• 비율 왜곡 없이 자연스럽게 조절
• `max-width: 100%`: 부모 요소보다 크지 않게 제한
• `height: auto`: 비율 유지하면서 높이 자동 조절
width vs max-width 차이:
```css
/* 문제가 있는 방법 */
img { width: 100%; } /* 항상 부모 크기에 맞춤 (늘어날 수 있음) */
/* 올바른 방법 */
img { max-width: 100%; height: auto; } /* 원본보다 커지지 않음 */
```
동작 원리:
• 작은 화면: 이미지가 화면에 맞게 축소
• 큰 화면: 원본 크기 이상으로 확대되지 않음
• 비율 왜곡 없이 자연스럽게 조절
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.