IT 강좌 HTML 기초 014_멀티미디어와 임베디드 콘텐츠
멀티미디어와 임베디드 콘텐츠 HTML5의 오디오 및 비디오 태그 사용 지도, 웹페이지 임베딩 등 임베디드 콘텐츠 응용
이미지
이미지는 매우 중요한 미디어 유형으로, 사용자 경험을 향상시키고 정보 전달을 더욱 직관적이고 생동감 있게 만듭니다. HTML에서는 <img> 태그를 사용하여 이미지를 삽입합니다. <img> 태그는 자체 닫힘 빈 태그로, 즉 닫는 태그가 없습니다. 이미지의 주소는 <img> 태그의 src(source) 속성으로 지정합니다.
예제:
<img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="이미지 설명">효과:
이미지 요소는 다음 속성을 포함할 수 있습니다:
width: 이미지의 너비를 지정합니다.height: 이미지의 높이를 지정합니다.align: 이미지의 정렬 방식을 지정합니다.border: 이미지의 테두리를 지정합니다.hspace: 이미지와 주변 요소 간의 수평 간격을 지정합니다.vspace: 이미지와 주변 요소 간의 수직 간격을 지정합니다.ismap: 이미지가 맵 이미지인지 여부를 지정합니다.
이미지 크기 설정
<img> 태그의 width와 height 속성을 통해 이미지의 너비와 높이를 설정할 수 있습니다. 이 두 속성의 값은 구체적인 픽셀 값일 수도 있고 백분율일 수도 있습니다.
예제:
<img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="이미지 설명" width="100" height="100" align="center" border="1">효과:
대체 텍스트 설정
대체 텍스트(alt text)는 이미지를 불러올 수 없을 때 표시되며, 스크린 리더가 이미지 내용을 읽어주어 시각 장애인이 이미지를 이해하는 데 도움을 줍니다. <img> 태그의 alt 속성을 통해 대체 텍스트를 설정합니다.
예제:
<img src="https://www.zhaojian.net/images/zhaojian-avatar1.png" alt="이미지를 찾을 수 없을 때 이 텍스트 표시">효과:
이미지 링크
이미지는 하이퍼링크로도 사용할 수 있습니다. <img> 태그를 <a> 태그 내부에 넣으면 이미지 링크를 만들 수 있습니다.
예제:
<a href="https://www.zhaojian.net/"> <img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="이미지 설명" width="100" height="100" align="center" border="5"></a>효과:
[!요약]
width와height속성으로 이미지의 너비와 높이를 설정합니다. 이 두 속성의 값은 구체적인 픽셀 값일 수도 있고 백분율일 수도 있습니다.- 이미지의 너비와 높이를 동시에 설정할 때 두 값의 비율이 이미지 자체의 비율과 일치하지 않으면 이미지가 늘어나거나 압축되어 변형될 수 있습니다.
- 이미지 링크에 테두리를 설정하면 테두리는 기본적으로 하이퍼링크와 같은 색상입니다.
비디오
HTML 비디오 요소는 웹페이지에 비디오를 임베드하는 데 사용됩니다. 비디오 요소의 태그는 <video>입니다.
예제:
<video src="https://www.zhaojian.net/images/mp4.mp4" controls> <source src="video.webm" type="video/webm"> <source src="video.ogg" type="video/ogg"></video>효과:
비디오 요소는 다음 속성을 포함할 수 있습니다:
width: 비디오의 너비를 지정합니다.height: 비디오의 높이를 지정합니다.poster: 비디오의 포스터 프레임을 지정합니다.autoplay: 로드 시 비디오를 자동 재생할지 여부를 지정합니다.loop: 비디오를 반복 재생할지 여부를 지정합니다.muted: 비디오를 음소거할지 여부를 지정합니다.preload: 로드 시 비디오를 미리 로드할지 여부를 지정합니다.
예제:
<video src="https://www.zhaojian.net/images/mp4.mp4" controls width="400" height="300" poster="https://www.zhaojian.net/images/zhaojian-avatar.png" autoplay loop muted preload="auto"> <source src="video.webm" type="video/webm"> <source src="video.ogg" type="video/ogg"></video>이 예제는 비디오 요소를 포함합니다. 비디오 파일의 URL은 mp4.mp4로 설정되고, 너비는 400 픽셀, 높이는 300 픽셀, 포스터 프레임은 zhaojian-avatar.png, 자동 재생은 true, 반복 재생은 true, 음소거는 true, 미리 로드는 auto로 설정됩니다.
효과:
매우 포괄적인 HTML 비디오 솔루션(권장하지 않음)
다음 예제는 4가지 다른 비디오 형식을 사용합니다. HTML 5 <video> 요소는 mp4, ogg 또는 webm 형식 중 하나로 비디오를 재생하려고 시도합니다. 모두 실패하면 <embed> 요소로 폴백됩니다.
예제:
<video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> <source src="video.webm" type="video/webm"> <object data="video.mp4" width="320" height="240"> <embed src="video.swf" width="320" height="240"> </object></video>[!요약]
<source>요소는 백업 옵션을 제공하며, 브라우저가 해당 형식을 지원하지 않으면 두 번째<source>요소가 지정한 비디오 파일을 재생하려고 시도합니다.
오디오
HTML의 <audio> 요소는 웹페이지에 오디오 콘텐츠를 임베드하는 데 사용됩니다.
예제:
<audio src="https://www.zhaojian.net/images/mp3.mp3" controls></audio>효과:
오디오 요소는 다음 속성을 포함할 수 있습니다:
controls: 오디오 컨트롤을 표시할지 여부를 지정하며, 기본값은true입니다.autoplay: 로드 시 오디오를 자동 재생할지 여부를 지정합니다.loop: 오디오를 반복 재생할지 여부를 지정합니다.muted: 오디오를 음소거할지 여부를 지정합니다.preload: 로드 시 오디오를 미리 로드할지 여부를 지정합니다.
예제:
<audio src="https://www.zhaojian.net/images/mp3.mp3" controls autoplay loop muted preload="auto"></audio>이 예제는 <audio> 요소를 포함합니다. 오디오 파일의 URL은 mp3.mp3로 설정되고, 컨트롤 컨트롤은 true, 자동 재생은 true, 반복 재생은 true, 음소거는 true, 미리 로드는 auto로 설정됩니다.
효과:
embed 요소
embed 요소는 HTML 4.01에서 도입된 요소입니다. 비디오, 오디오, 이미지, Flash 등 모든 유형의 리소스를 임베드할 수 있습니다. embed 요소는 표시하기 위해 브라우저가 특정 플러그인을 지원해야 합니다.
예제:
<embed src="리소스 URL" type="리소스 유형">[!요약]
- HTML5는
<embed>요소를 대체하기 위해<video>와<audio>요소를 도입했습니다.embed요소는 모든 유형의 리소스를 임베드할 수 있지만,<video>요소와<audio>요소는 비디오 및 오디오 리소스만 임베드할 수 있습니다.embed요소는 표시하기 위해 브라우저가 특정 플러그인을 지원해야 하지만,<video>요소와<audio>요소는 필요하지 않습니다.<embed>요소는 여전히 사용할 수 있지만 더 이상 권장되지 않습니다.
object요소
object 요소는 HTML 4.01에서 도입된 요소입니다. 비디오, 오디오, 이미지, Flash 등 모든 유형의 리소스를 임베드할 수 있습니다. object 요소는 <param> 요소를 사용하여 리소스의 너비, 높이, 배경색 등 리소스의 속성을 지정합니다.
예제:
<object data="리소스 URL" type="리소스 유형"> <param name="속성 이름" value="속성 값"> ...</object>object와 embed 요소의 구체적인 차이점:
| 속성 | object | embed |
|---|---|---|
| 매개변수 | <param> 요소 사용 | type 속성 사용 |
| 리소스 유형 | 모든 유형 | 특정 유형 |
| 플러그인 | 필요 | 불필요 |
| 기능 | 풍부 | 기본 |
[!요약]
- 모든 유형의 리소스를 임베드해야 하고 브라우저가 특정 플러그인을 지원하는 경우
object요소를 사용할 수 있습니다.- 특정 유형의 리소스만 임베드하면 되고 브라우저가 특정 플러그인을 지원할 필요가 없는 경우
embed요소를 사용할 수 있습니다.- 비디오 또는 오디오 리소스만 임베드하면 되는 경우
<video>또는<audio>요소를 사용하는 것이 좋습니다.<video>와<audio>요소는 브라우저가 특정 플러그인을 지원할 필요가 없으며 더 풍부한 기능을 제공합니다.
프레임
<iframe> 요소는 HTML에서 문서 안에 다른 문서를 중첩하는 데 사용되는 태그입니다. 한 문서를 다른 문서에 중첩하고 중첩된 문서의 내용을 표시할 수 있습니다. 일반적으로 다른 웹페이지, 비디오, 지도 등의 콘텐츠를 임베드하는 데 사용됩니다.
<iframe> 요소는 다음 속성을 가집니다:
- src 속성은 임베드할 웹페이지 또는 문서의 URL을 정의합니다.
- width 속성은
<iframe>요소의 너비를 정의합니다. - height 속성은
<iframe>요소의 높이를 정의합니다. - frameborder 속성은
<iframe>요소의 테두리가 표시될지 여부를 정의합니다. - border 속성은
<iframe>요소의 테두리 너비를 정의합니다. - framespacing 속성은
<iframe>요소와 주변 콘텐츠 간의 간격을 정의합니다. - marginwidth 속성은
<iframe>요소의 좌우 여백을 정의합니다. - marginheight 속성은
<iframe>요소의 상하 여백을 정의합니다. - scrolling 속성은
<iframe>요소가 스크롤을 허용할지 여부를 정의합니다. - name 속성은
<iframe>요소의 이름을 정의합니다. - id 속성은
<iframe>요소의 ID를 정의합니다. - class 속성은
<iframe>요소의 클래스를 정의합니다.
예제:
<!DOCTYPE html><html lang="en"><head> <title>HTML iframe 요소</title></head><body> <iframe src="https://www.zhaojian.net"> <p>이것은 zhaojian.net 웹사이트 내용을 표시하는 iframe입니다.</p> </iframe></body></html>효과:
