멀티미디어와 임베딩 소개
Attributions and copyright licensing (opens in a new tab) by Mozilla Contributors (opens in a new tab) is licensed under CC-BY-SA 2.5 (opens in a new tab).
텍스트만 사용한 웹은 따분합니다.
전제조건
HTML에 대한 기본 지식
가이드
다음 문서가 포함됩니다.
- HTML 이미지 : 간단한 이미지를 페이지에 삽입하는데 사용되는
<img>,<figure>를 사용해서 내용 및 캡션을 추가하는 방법, CSS 배경 이미지와의 관계를 자세히 다룹니다. - 비디오와 오디오 콘텐츠 :
<video>와<audio>엘리먼트를 사용해서 페이지에 비디오와 오디오를 포함시킵니다. 여러 브라우저의 여러 파일 포맷에 접근하는 법, 캡션 및 자막 추가, 구형 브라우저에 대한 폴백 추가 방법 등 다양한 기능을 제공합니다. <object>로부터<iframe>까지 - 기타 임베딩 기술 : 페이지에 다양한 콘텐츠 유형을 삽입하게 해주는 몇가지 요소를 살펴봅니다.<iframe>,<embed>,<object>엘리먼트입니다.<iframe>은 다른 페이지를 삽입하는 것이고, 나머지는 PDF, SVG 및 플래시를 포함시킵니다. - 사라지는 중이지만 여전히 있습니다.- Vector graphics 웹에 추가하기 : PNG/JPG와 같은 일반적인 형식과 달리 확대 시 왜곡/픽셀레이트가 발생하지 않으며, 스케일링 시 매끄러운 상태를 유지할 수 있습니다. 페이지에 SVG 포맷을 포함시키는 방법을 소개합니다.
- Responsive images : 휴대폰에서 데스크톱까지 매우 다양한 유형의 장치들로 인해서 형성된 현대 웹을 마스터하기 위한 필수적인 개념입니다. 다양한 화면 크기, 해상도 등에 맞춰 기능을 자동으로 변경하는 웹 페이지를 만드는 것을 말합니다.
<picture>요소를 포함해서 반응형 이미지를 만드는 데 필요한 도구를 살펴봅니다.
같이 보기
- 이미지 위에 히트맵 추가 (opens in a new tab) : 이미지 링크의 다른 부분을 다른 곳에 연결하는 메커니즘을 제공합니다.
- Web literacy basics 2 (opens in a new tab) : 웹 페이지 작성, 접근성을 위한 디자인, 리소스 공유, 온라인 미디어 사용, 오픈 작업(콘텐츠를 다른 사람이 자유롭게 사용하고 공유하는 것)의 기본 사항에 대해 설명합니다.