외부 콘텐츠를 로드하는데 사용되는 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. 태그와 속성 |
'컴퓨터공학 > 웹 개발' 카테고리의 다른 글
| 웹프레임워크 | 부트스트랩 소개와 시작하기 (103) | 2024.08.09 |
|---|---|
| FTP 폴더 권한 변경하는 방법 (파일질라, 명령프롬프트) (22) | 2024.08.07 |
| MVC 패턴 구조와 흐름 파악하기 (108) | 2024.08.05 |
| 웹프레임워크 | PHP 프레임워크 소개와 폴더 구조 (79) | 2024.08.02 |
| 도메인 | 내 도메인 이메일 주소로 사용하는 방법 (107) | 2024.07.05 |
| 도메인 | SSL 인증서 종류(DV, OV, EV)와 인증 브랜드 (95) | 2024.06.28 |
| 웹호스팅 | 아이네임즈 대표도메인 변경과 도메인 관리 (94) | 2024.06.26 |
| 도메인 | 도메인 네임 시스템(DNS)과 레코드, 네임 서비스 (85) | 2024.06.24 |
댓글