HTML - 문제 미리보기
문제 892
hard
다음 `<picture>` 요소 코드에서 화면 너비가 500px일 때 어떤 이미지가 표시될까요?
```html
<picture>
<source media="(min-width: 650px)" srcset="desktop.jpg">
<source media="(min-width: 465px)" srcset="tablet.jpg">
<img src="mobile.jpg" alt="반응형 이미지">
</picture>
```
```html
<picture>
<source media="(min-width: 650px)" srcset="desktop.jpg">
<source media="(min-width: 465px)" srcset="tablet.jpg">
<img src="mobile.jpg" alt="반응형 이미지">
</picture>
```
정답: B
`<picture>` 요소는 위에서부터 순서대로 조건을 확인하여 첫 번째로 일치하는 `<source>`를 선택합니다. 화면 너비가 500px인 경우:
• 첫 번째 조건: `(min-width: 650px)` → 500px < 650px이므로 false
• 두 번째 조건: `(min-width: 465px)` → 500px ≥ 465px이므로 true
따라서 `tablet.jpg`가 선택됩니다. 브라우저는 조건에 맞는 첫 번째 `<source>`를 찾으면 나머지는 무시하므로, 세 번째 `<img>` 태그는 확인하지 않습니다.
• 첫 번째 조건: `(min-width: 650px)` → 500px < 650px이므로 false
• 두 번째 조건: `(min-width: 465px)` → 500px ≥ 465px이므로 true
따라서 `tablet.jpg`가 선택됩니다. 브라우저는 조건에 맞는 첫 번째 `<source>`를 찾으면 나머지는 무시하므로, 세 번째 `<img>` 태그는 확인하지 않습니다.
💡 학습 팁
이 문제를 포함한 HTML 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.