CSS - 문제 미리보기
문제 1319
easy
다음 코드에서 이미지가 갤러리 컨테이너에 맞게 크기가 조절되도록 하는 빈칸의 값은?
```css
div.gallery img {
width: _____;
height: auto;
}
```
```css
div.gallery img {
width: _____;
height: auto;
}
```
정답: C
• **`width: 100%;`**는 이미지를 부모 컨테이너의 너비에 맞게 자동으로 조절합니다
• 반응형 이미지의 핵심 원리:
• `width: 100%`: 컨테이너 너비에 꽉 차게 맞춤
• `height: auto`: 가로세로 비율을 유지하면서 높이 자동 조절
• 이 조합의 장점:
• 다양한 크기의 이미지가 일관된 크기로 표시됩니다
• 원본 이미지의 비율이 왜곡되지 않습니다
• 컨테이너 크기가 변해도 자동으로 맞춰집니다
• 다른 값들의 문제:
• `auto`: 원본 크기 그대로, 컨테이너를 벗어날 수 있음
• `180px`: 고정 크기, 반응형 효과 없음
• `inherit`: 부모 요소의 width 값 상속, 부적절
• 반응형 이미지의 핵심 원리:
• `width: 100%`: 컨테이너 너비에 꽉 차게 맞춤
• `height: auto`: 가로세로 비율을 유지하면서 높이 자동 조절
• 이 조합의 장점:
• 다양한 크기의 이미지가 일관된 크기로 표시됩니다
• 원본 이미지의 비율이 왜곡되지 않습니다
• 컨테이너 크기가 변해도 자동으로 맞춰집니다
• 다른 값들의 문제:
• `auto`: 원본 크기 그대로, 컨테이너를 벗어날 수 있음
• `180px`: 고정 크기, 반응형 효과 없음
• `inherit`: 부모 요소의 width 값 상속, 부적절
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.