인라인 프레임(iframe) 요소

<iframe>

인라인 프레임(Inline Frame)에 다른 HTML 페이지를 포함하여 화면에 표시.

예를 들어 위치를 안내하기 위해 지도를 첨부할 때, 해당 요소를 사용할 수 있다.

속성

• src - 프레임 소스 설정

• width - 프레임 너비 설정

• height - 프레임 높이 설정

• allow - 허용의 의미를 가진다. 예를 들어 비디오의 autoplay(자동 재생 설정) 등을 할 수 있다.

• allowfullscreen - 프레임 전체화면 설정

예제

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/0wlXaHmmOVc?rel=0&amp;showinfo=0"
  allow="autoplay; encrypted-media"
  allowfullscreen
></iframe>

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12643.636820892792!2d127.01610674058901!3d37.60429582641849!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357cbc91e5ca4f03%3A0x18820a16e406c8ea!2z7ISc7Jq47Yq567OE7IucIOyEseu2geq1rCDquLjsnYwx64-ZIDUzMC0zNg!5e0!3m2!1sko!2skr!4v1520001155674"
  width="600"
  height="450"
  style="border: 0"
  allowfullscreen
></iframe>

<!-- iframe -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/0wlXaHmmOVc"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
>
</iframe>

<iframe
  src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6324.212923431429!2d127.0002682!3d37.5761107!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca2e2c8102391%3A0x51d36941638dd458!2sDobbit!5e0!3m2!1sko!2skr!4v1597675479744!5m2!1sko!2skr"
  width="600"
  height="450"
  frameborder="0"
  style="border:0;"
  aria-hidden="false"
  tabindex="0"
>
</iframe>

유튜브 비디오를 가져오는 방법

1. 영상의 공유 버튼 클릭 후, 퍼가기 클릭하면 Embed video 형태로 가져갈 수 있다.

2. 우측의 소스 복사

지도를 가져 올 때도 동일한 방법으로 소스를 가져올 수 있다.