CSS - 문제 미리보기
문제 1521
medium
Media Query를 사용하여 디바이스별로 다른 배경 이미지를 설정하는 코드에서 빈칸에 들어갈 올바른 값은?
```css
/* 작은 디바이스용 */
body {
background-image: url('small.jpg');
}
/* 400px 이상 디바이스용 */
@media only screen and (______: 400px) {
body {
background-image: url('large.jpg');
}
}
```
```css
/* 작은 디바이스용 */
body {
background-image: url('small.jpg');
}
/* 400px 이상 디바이스용 */
@media only screen and (______: 400px) {
body {
background-image: url('large.jpg');
}
}
```
정답: B
Media Query에서 화면 크기 조건을 올바르게 설정하는 방법입니다.
• min-width: 400px:
• 화면 너비가 400px 이상일 때 적용
• 큰 화면에서 고해상도 이미지 사용
• 브라우저 창 크기 기준
• 논리적 구조:
• 기본: 작은 이미지 (모바일 우선)
• 조건: 400px 이상에서 큰 이미지로 교체
• 성능 최적화: 작은 디바이스에서 불필요한 대용량 이미지 로딩 방지
• min-width: 400px:
• 화면 너비가 400px 이상일 때 적용
• 큰 화면에서 고해상도 이미지 사용
• 브라우저 창 크기 기준
• 논리적 구조:
• 기본: 작은 이미지 (모바일 우선)
• 조건: 400px 이상에서 큰 이미지로 교체
• 성능 최적화: 작은 디바이스에서 불필요한 대용량 이미지 로딩 방지
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.