외부 콘텐츠를 로드하는데 사용되는 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. 태그와 속성 |
'웹 개발 > 웹프로그래밍' 카테고리의 다른 글
| Javascript | 사용자 정의 객체와 이벤트 객체 (81) | 2024.04.10 |
|---|---|
| Javascript | 자바스크립트 객체 (내장, DOM, BOM) (33) | 2024.04.05 |
| Javascript | 자바스크립트 기초 문법 (75) | 2024.04.03 |
| Javascript | 비동기 처리 (콜백, 프로미스, await) (74) | 2024.04.01 |
| Javascript | jQuery 유용한 플러그인과 라이브러리 소개 (53) | 2024.03.25 |
| Javascript | jQuery UI 소개와 사용방법 (34) | 2024.03.22 |
| 파일업로드 dropzone.js 으로 손쉽게 구현하기 (84) | 2024.03.20 |
| JavaScript | 클릭 시 복사 버튼 만들기 (clipboard.js) (34) | 2023.09.30 |
댓글