HTML - iframe, object 요소

<iframe> 요소는 웹 페이지 안에 다른 웹페이지를 삽입할때 사용하는 HTML요소이다.

흔하게 유투브 영상을 퍼가는 소스코드를 보면 자주 볼 수 있다.

 

<iframe
      width="560"
      height="315"
      src="https://www.youtube.com/embed/fUcIe7-2zxw?si=HNJILp3IonlyCgCQ"
      title="웹 접근성이란? - AOA11Y youtube"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      referrerpolicy="strict-origin-when-cross-origin"
      allowfullscreen
    ></iframe>

속성	설명
src	포함할 컨텐츠 경로
width	가로 크기
height	세로 크기
title	컨텐츠의 제목(스크린 리더용)
allowfullscreen	전체 화면 허용
loading	lazy 또는 eager로 로딩방식 제어
sandbox	보안 제한 설정

 

소스코드의 allow 속성과 referrerpolicy속성은 웹 표준에 위배되는 속성으로 사용하지 않는것이 좋다.

---

 

<object> 요소는 다양한 유형의 외부 콘텐츠를 삽입하는 데 사용한다 <iframe>과 유사하지만 더 다양한 파일들을 지원한다.

과거에는 플래시 콘텐츠 삽입에 많이 사용되었으나 요즘은 PDF나 다른 문서 뷰어로서 많이 사용된다.

<object
        type="application/pdf"
        data="/src/assets/pdf/wai-aria.pdf"
        width="600"
        height="1200"
      ></object>

속성	설명
data	삽입할 컨텐츠의 경로
type	파일의 유형 (type="application/pdf")
width	가로 크기
height	세로 크기
name	객체 이름(자바스크립트로 접근 가능)
form	<form> 요소와 연결하는 id 값