웹에 이미지, 비디오, 오디오 등을 구현하는 임베딩 기술을 앞에서 살펴보았다. 더불어 간략하게 살펴본 iframe에 이어 embed, object 코드를 활용한 임베딩 기술을 소개한다.
임베딩 기술과 코드 구현 방법
CONTENTS
임베딩 기술이란?
웹이 등장했던 초창기에는 frame 코드를 활용해서 웹 사이트를 구현하는 게 일반적이었다. 하지만 사이트에 담기는 콘텐츠가 증가하면서 화면에 렌더링하는 속도가 문제로 작용했다. 이후에 플래쉬와 같은 플러그인 기술로 멀티미디어 요소를 사이트에 구현함으로써, 속도 문제를 어느 정도 해결했다. 하지만 보안상 결함이 나타남에 따라 플래쉬와 같은 플러그인 기술은 금하고 있는 실정이다. 이에 따라 등장한 임베딩 기술이 iframe를 비롯한 embed, obect 코드를 활용한 멀티미디어 구현이다.
embed 및 object 태그
iframe은 임베딩 기술과 관련하여 범용적으로 사용 가능한 태그이다. 이에 반해 임베딩 태그인 embed 또는 object 코드는 조금은 협소한 기능을 지닌 임베딩 기술을 구현한다.
사실상 embed와 object는 동일한 역할을 하는 듯 보인다. 보통 웹페이지 안에 또 다른 웹페이지를 담거나 img 태그 대신에 이미지를 담을 수도 있다. 이때 embed는 닫는 태그가 없는 단일 태그로 경로를 널리 알려진 src 속성에 담는데 반해, object는 data 속성에 경로를 담는다는 차이가 존재한다. 두개 태그 모두 너비와 높이 속성을 사용할 수 있다.
아래는 object 태그를 사용하여 임베딩 기술을 구현한 실례이다.
<object type="application/pdf"
width="100%" height="500px" data="https://interactive-examples.mdn.mozilla.net/media/examples/In-CC0.pdf"></object>
<br/>
<object data="https://www.w3schools.com/html/audi.jpeg"></object>
아래는 embed 태그를 활용해 임베이딩 기술을 구현한 실례이다.
<embed type="video/webm"
src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
width="250" height="200">
<br/>
<embed src="https://www.w3schools.com/html/audi.jpeg">
즉, embed와 object는 iframe 태그로 대체가 가능하다. 그러다보니 굳이 embed와 object 코드를 사용할 일이 거의 없다.
아래는 위와 동일한 소스를 iframe 코드에 넣어 임베이딩 기술을 구현한 실례이다.
<div>
<iframe
width="100%" height="500px" src="https://interactive-examples.mdn.mozilla.net/media/examples/In-CC0.pdf"></iframe>
</div>
<div>
<iframe src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
width="250" height="200"> </iframe>
</div>
단, 이미지는 iframe 코드에 담아도 구현되지 않는다.
임베이딩 기술 요약
embed 태그 및 object 태그는 웹페이지, 사진, 미디어 플레이어 또는 플러그인 등 외부 리소스를 웹에 구현할 수 있는 임베이딩 기술이다.
하지만 사진은 img 태그를, html은 iframe 태그를, 비디오는 video 태그를, 오디오는 audio 태그를 사용하는 게 적절하다.
