CSS - 문제 미리보기
문제 1445
easy
다음 코드에서 빈칸에 들어갈 올바른 값은?
```css
img {
width: 300px;
height: 200px;
object-fit: _______;
}
```
위 코드는 이미지가 컨테이너를 완전히 채우면서도 원래 비율을 유지하려고 합니다. (일부가 잘려도 괜찮음)
```css
img {
width: 300px;
height: 200px;
object-fit: _______;
}
```
위 코드는 이미지가 컨테이너를 완전히 채우면서도 원래 비율을 유지하려고 합니다. (일부가 잘려도 괜찮음)
정답: C
cover의 특징:
• 이미지의 원본 비율(aspect ratio) 유지
• 컨테이너를 완전히 채움
• 비율이 맞지 않으면 이미지의 일부분이 잘릴 수 있음
다른 옵션과의 차이:
```css
/* cover: 비율 유지 + 컨테이너 완전히 채움 */
object-fit: cover;
/* contain: 비율 유지 + 컨테이너 안에 완전히 들어감 */
object-fit: contain;
/* fill: 컨테이너 완전히 채움 + 비율 무시 */
object-fit: fill;
```
• 이미지의 원본 비율(aspect ratio) 유지
• 컨테이너를 완전히 채움
• 비율이 맞지 않으면 이미지의 일부분이 잘릴 수 있음
다른 옵션과의 차이:
```css
/* cover: 비율 유지 + 컨테이너 완전히 채움 */
object-fit: cover;
/* contain: 비율 유지 + 컨테이너 안에 완전히 들어감 */
object-fit: contain;
/* fill: 컨테이너 완전히 채움 + 비율 무시 */
object-fit: fill;
```
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.