CSS - 문제 미리보기
문제 1522
hard
HTML `<picture>` 요소의 올바른 사용법과 장점에 대한 설명으로 맞는 것은?
```html
<picture>
<source srcset="mobile.jpg" media="(max-width: 400px)">
<source srcset="desktop.jpg">
<img src="desktop.jpg" alt="Description">
</picture>
```
```html
<picture>
<source srcset="mobile.jpg" media="(max-width: 400px)">
<source srcset="desktop.jpg">
<img src="desktop.jpg" alt="Description">
</picture>
```
정답: C
`<picture>` 요소는 반응형 이미지의 가장 강력한 해결책입니다.
• 작동 원리:
• 위에서부터 조건을 확인하여 첫 번째 맞는 이미지 선택
• 400px 이하: `mobile.jpg` 사용
• 그 외: `desktop.jpg` 사용
• 필수 요소들:
• `srcset`: 이미지 소스 지정 (필수)
• `media`: 조건 설정 (선택, 없으면 기본 선택)
• `<img>`: 구형 브라우저 호환성을 위한 폴백 (필수)
• CSS 대비 장점:
• 브라우저가 최적 이미지를 미리 선택하여 성능 향상
• 불필요한 이미지 다운로드 방지
• 더 세밀한 제어 가능
• 접근성: `alt` 속성으로 스크린 리더 지원
• 작동 원리:
• 위에서부터 조건을 확인하여 첫 번째 맞는 이미지 선택
• 400px 이하: `mobile.jpg` 사용
• 그 외: `desktop.jpg` 사용
• 필수 요소들:
• `srcset`: 이미지 소스 지정 (필수)
• `media`: 조건 설정 (선택, 없으면 기본 선택)
• `<img>`: 구형 브라우저 호환성을 위한 폴백 (필수)
• CSS 대비 장점:
• 브라우저가 최적 이미지를 미리 선택하여 성능 향상
• 불필요한 이미지 다운로드 방지
• 더 세밀한 제어 가능
• 접근성: `alt` 속성으로 스크린 리더 지원
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.