HTML 미디어 요소의 활용 및 최신 기법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

초보 웹 개발자 및 HTML/CSS 학습자 (기초 수준)

핵심 요약

• 태그를 통해 화면 크기/방향에 따른 이미지 최적화 가능 (예: )
• 태그를 사용해 영상 삽입 시 src 속성으로 경로 지정 가능
• 태그는 내 마지막 fallback 이미지로 필수적으로 포함해야 함

섹션별 세부 요약

1. `` 태그의 기능

• 태그를 통해 여러 이미지 소스를 등록 가능
• media 속성으로 화면 너비/방향 조건 설정 (예: min-width: 600px)
• type 속성으로 이미지 형식 지정 (예: image/webp, image/jpeg)
• 태그는 모든 조건이 충족되지 않을 때 기본 이미지로 표시

2. `

• 태그에 src 속성으로 영상 파일 경로 지정
• 현재 문서에서는 태그와 src 속성 사용법만 간략히 설명
• 태그에 대한 심화 내용은 다음 포스트에서 다룰 예정

결론

• 반응형 이미지 최적화를 위해 + + 조합 사용 권장
• 태그는 src 속성으로 경로 설정 후 추가 속성(예: controls, autoplay)을 통해 기능 확장 가능
• 태그는 fallback 이미지로 필수 포함 (미포함 시 화면에 이미지 노출되지 않음)