HTML | 콘텐츠 삽입 태그 iframe, embed, object 비교
외부 콘텐츠를 로드하는데 사용되는 HTML 태그인 iframe, embed, object 태그를 소개하고 장단점을 비교해 보겠습니다.
1. iframe 태그
소개
콘텐츠를 표시하고 공유하는데 가장 많이 사용되지만 몇 가지 단점이 있습니다.
▶ 예제
<iframe src="content.html" width="800" height="600">
</iframe>
단점
▶ 외부 콘텐츠를 포함하기 때문에 웹사이트 디자인을 망가질 수 있고 검색 엔진에 색인되지 않기 때문에 SEO에 부정적인 영향을 줄 수도 있습니다. 또한 iframe으로 로드할 때 보안 문제가 발생할 수도 있습니다.
▶ 테이블 안에서 사용 시 높이 조절이 매우 어렵습니다.
2. embed 태그
소개
간단하게 외부 콘텐츠를 보여주는데 사용합니다. object와 달리 대체 콘텐츠를 지원하지 않기 때문에 미지원 브라우저에서는 아무 것도 안 보이는 경우가 발생할 수 있습니다.
▶ 예제
<embed src="content.html" width="800" height="600">
3. object 태그
object 태그는 iframe의 단점을 보안하고 대체하여 사용할 수 있는 강력한 태그입니다. 외부 콘텐츠가 브라우저의 문제로 표시되지 않을 때 대체 콘텐츠를 넣을 수 있다는 장점이 있습니다.
▶ 지원하는 멀티미디어 - 오디오, 비디오, 자바 애플릿, 액티브 X, 플래시 등
▶ 지원하는 브라우저 - 크롬, 익스플로러, 파이어폭스, 사파리, 오페라
태그
▶ <body>요소 내부에만 위치할 수 있습니다. 더 이상 <head> 요소 내에 위치할 수 없습니다.
<object data="content.html" width="800" height="600">
<!-- 콘텐츠가 로드되지 않을 때 뜰 내용 -->
</object>
속성
data 속성이나 type 속성을 반드시 명시해야 합니다.
▶ data - 속성값은 URL로 object 요소에서 사용할 리소스를 명시합니다.
▶ form - 속성값으로 포함될 form id 를 명시합니다.
▶ height - 객체의 높이를 픽셀값으로 명시합니다.
▶ name - 요소의 이름을 명시합니다.
▶ type - 속성값으로 미디어 타입을 명시합니다.
▶ usemap - 객체와 함께 사용될 클라이언트사이드 이미지맵의 이름을 명시합니다.
▶ width - 객체의 넓이를 픽셀값으로 명시합니다.
html5에서 더 이상 지원하지 않는 속성
align, archive, border, classid, codebase, codetype, declare, hspace, standby, vspace
| 관련포스트 |
| HTML | 6. 인라인 프레임 (iframe) 속성 |
| HTML | 5. 콘텐츠 모델 |
| HTML | 4. meta 태그의 속성과 종류 |
| HTML | 3. 태그와 속성 |
