CSS - 문제 미리보기

문제 1527

hard
웹페이지에 반응형 비디오를 추가할 때 고려해야 할 사항들로 올바른 것은?
```css
video {
width: 100%;
height: auto;
/* 추가 속성들 */
}
```
A. 비디오는 항상 자동재생되어야 하고, 컨트롤을 숨겨야 함
B. 모든 디바이스에서 동일한 해상도의 비디오를 사용해야 함
C. 비디오 파일 크기와 로딩 성능, 그리고 다양한 형식 지원을 고려해야 함
D. 비디오는 페이지 로딩 시 즉시 전체 화면으로 재생되어야 함

정답: C

반응형 비디오 구현 시 성능과 호환성을 종합적으로 고려해야 합니다.

• 파일 크기 최적화:
• 모바일에서는 작은 해상도 비디오 사용
• `<source>` 태그로 여러 해상도 제공
• 압축률과 화질의 균형점 찾기

• 다양한 형식 지원:
```html
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogg" type="video/ogg">
</video>
```
• 성능 고려사항:
• `preload` 속성으로 로딩 방식 제어
• `poster` 속성으로 썸네일 이미지 설정
• 자동재생 지양 (데이터 사용량, 배터리 절약)

💡 학습 팁

이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.