embed 및 object 요소

<embed>는 브라우저 플러그인이나 브라우저에 내장된 처리기를 사용하여 외부 콘텐츠를 삽입합니다. type 속성은 MIME 유형을 지정하고 src는 리소스 URL을 지정합니다. 이 요소는 자식 요소나 대체 콘텐츠가 없는 빈 요소입니다.

<object>는 embed보다 유연합니다. data 속성은 리소스를 가리키고 type은 MIME 유형을 지정합니다. 객체를 로드할 수 없을 때는 자식 요소가 대체 콘텐츠로 사용되며, 여기에는 중첩된 object나 설명 텍스트가 포함될 수 있습니다.

대체 콘텐츠를 중첩하십시오. <object data="file.pdf" type="application/pdf"><a href="file.pdf">Download PDF</a></object>. 브라우저에서 PDF를 인라인으로 렌더링할 수 없으면 대신 다운로드 링크를 표시합니다. 대체 콘텐츠를 제공할 수 있다는 점이 embed보다 object가 뛰어난 가장 큰 장점입니다.

object 또는 embed로 PDF 파일을 삽입하십시오. <object data="doc.pdf" type="application/pdf" width="100%" height="600">. 브라우저 지원은 다양합니다. 크롬과 파이어폭스는 PDF를 기본적으로 렌더링하지만 다른 브라우저에서는 다운로드 확인 창이 표시될 수 있습니다. 대체 링크를 제공하십시오.

HTML 문서를 삽입할 때는 iframe을 우선 사용하십시오. 이 목적에 맞게 설계되어 있고 보안 모델이 명확합니다. 미디어 플러그인에는 embed(기존 Flash 및 SVG 렌더링)를 사용하고, 대체 콘텐츠가 필요한 문서에는 object를 사용하십시오. 현대적인 개발에서는 대부분의 플러그인 사용 사례를 기본 HTML5 요소(video, audio, canvas)로 처리합니다.

embed와 object는 플러그인 콘텐츠(과거에는 Flash)를 실행할 수 있으며, 이는 주요 공격 표면이 됩니다. 현대적인 브라우저에서는 플러그인 지원이 제거되었습니다. 신뢰할 수 있는 콘텐츠만 삽입해야 합니다. 출처가 다른 embed/object 콘텐츠에는 동일 출처 콘텐츠처럼 스크립트를 실행할 수 없습니다.

object로 SVG를 삽입할 수 있습니다. <object data="image.svg" type="image/svg+xml" width="200" height="200">. img 태그와 달리 object 내부의 SVG는 자체 스크립트를 실행하고 동일 출처인 경우 외부 CSS에 반응할 수 있습니다. 인라인 SVG를 사용하기 어려울 때 대화형 SVG에 사용하십시오.

중첩된 <param name="autoplay" value="true"> 요소를 사용하여 object 플러그인에 매개변수를 전달할 수 있습니다. 이는 Flash 객체를 구성하는 표준 방식이었습니다. 브라우저에서 플러그인 지원이 제거되었으므로 현대적인 사용 사례는 드뭅니다.

object는 usemap과 함께 사용하여 이미지 맵을 만들 수 있습니다. 이미지 맵은 삽입된 이미지에서 클릭할 수 있는 영역입니다. <map> 요소에 <area> 자식 요소를 넣어 영역을 정의하십시오. 대화형 이미지 영역에는 요소에 href를 사용하는 현대적인 SVG 방식이 더 적합합니다.

화면 낭독기가 식별할 수 있도록 embed와 object 모두에 title 속성을 추가하십시오. object는 aria-label을 허용합니다. 두 요소 모두 기본 HTML5 요소가 제공하는 풍부한 접근성 의미를 제공하지 않습니다. 미디어 콘텐츠에는 캡션이 포함된 기본 video 및 audio 요소를 항상 우선 사용하십시오.

embed와 object는 대부분 기존 요소입니다. 주요 사용 사례였던 Flash는 사라졌습니다. 현재의 정당한 사용 사례는 대체 콘텐츠가 포함된 인라인 PDF 문서, 대화형 SVG 삽입, 현대화할 수 없는 기존 콘텐츠입니다. 새 프로젝트에서는 모든 미디어 요구 사항에 기본 HTML5 요소를 우선 사용해야 합니다.

삽입 콘텐츠에 embed보다 object를 사용하는 가장 큰 장점은 무엇입니까?

embed와 object는 HTML이 아닌 콘텐츠를 삽입하기 위한 기존 요소입니다. 대체 콘텐츠가 필요할 때는 object를 우선 사용합니다. 두 요소 모두 MIME 유형을 지정하고 매개변수를 전달할 수 있습니다. 새 프로젝트에서는 현대적인 대안(video, audio, canvas, 인라인 SVG)을 우선 사용합니다. object를 통한 PDF 삽입은 iframe을 대안으로 사용할 수 있는 일반적인 사용 사례로 남아 있습니다.