2-11. HTML의 기본 태그_iframe 태그

Jan 06, 2026

Contents

1. iframe 태그 1️⃣ iframe 태그란?2️⃣ 기본 구조 3️⃣ iframe 주요 속성 ⭐4️⃣ iframe 대표적인 사용 예 5️⃣ iframe과 보안 (매우 중요 ⚠️)6️⃣ iframe과 Same-Origin Policy 7️⃣ iframe vs object / embed 8️⃣ 사용 시 주의사항 ⚠️9️⃣ 실습

1. iframe 태그

1️⃣ iframe 태그란?

iframe = Inline Frame

현재 HTML 문서 안에 또 다른 HTML 문서를 포함시키는 태그

다른 웹 페이지를 현재 페이지 안에 “프레임처럼” 삽입할 때 사용하는 태그


<iframe src="https://example.com"></iframe>

2️⃣ 기본 구조


<iframe
  src="https://www.example.com"
  width="600"
  height="400">
</iframe>

속성	설명
`src`	불러올 페이지 URL
`width`	너비
`height`	높이
`title`	접근성(필수 권장)

3️⃣ iframe 주요 속성 ⭐

1) title (접근성 필수)


<iframe src="..." title="지도"></iframe>

스크린 리더용 설명

2) allow


<iframe
  src="..."
  allow="autoplay; fullscreen">
</iframe>

기능 허용 범위 지정

3) allowfullscreen


<iframe src="..." allowfullscreen></iframe>

전체화면 허용

allowfullscreen 입력하지 않으면 → 전체화면 불가

4) loading (성능 최적화)


<iframe src="..." loading="lazy"></iframe>

lazy: 화면에 보일 때 로딩

5) sandbox (보안 ⭐⭐⭐)


<iframe
	src="..."
	sandbox="allow-scripts allow-forms">
</iframe>

옵션	설명
`allow-scripts`	JS 실행 허용
`allow-forms`	form 전송 허용
`allow-same-origin`	동일 출처
`allow-popups`	팝업 허용

➡️ sandbox 없으면 보안 위험

4️⃣ iframe 대표적인 사용 예

1) 유튜브 영상


<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  width="560"
  height="315"
  title="YouTube video"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

2) 지도 (구글 맵)


<iframe src="https://www.google.com/maps/embed?..."></iframe>

3) 외부 문서

외부 위젯

5️⃣ iframe과 보안 (매우 중요 ⚠️)

1) ❌ 위험 요소

XSS 공격

클릭재킹 (Clickjacking)

악성 스크립트 실행

2) ✅ 방어 방법

sandbox 사용

X-Frame-Options 헤더

Content-Security-Policy (frame-ancestors)


X-Frame-Options: SAMEORIGIN

6️⃣ iframe과 Same-Origin Policy

부모 페이지와 iframe이 다른 도메인이면

DOM 접근 ❌
JS로 내용 조작 ❌

➡️ 보안상 정상 동작

7️⃣ iframe vs object / embed

태그	용도
`iframe`	웹 페이지
`object`	PDF, 플러그인
`embed`	미디어

➡️ 요즘은 iframe이 표준

8️⃣ 사용 시 주의사항 ⚠️

레이아웃용 사용 ❌

너무 많이 쓰면 성능 저하

외부 사이트 의존성 증가

반응형 처리 필요

9️⃣ 실습

1) 외부 사이트


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>IFRAME 액자만들기</h1>
    <hr />
    <iframe
      src="http://www.daum.net"
      frameborder="0"
      width="800px"
      height="400px"
    ></iframe>
  </body>
</html>

2) 유튜브 영상


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>IFRAME 액자만들기</h1>
    <hr />
    <iframe
      src="http://www.daum.net"
      frameborder="0"
      width="400px"
      height="200px"
    ></iframe>
    <hr />
    <div>https://youtu.be/j2R0ohNdo6M</div>
    <iframe
      src="http://www.youtube.com/embed/j2R0ohNdo6M"
      frameborder="0"
      allowfullscreen="true"
    ></iframe>
  </body>
</html>

➡️ allowfullscreen="true" 전체화면 가능 / 입력 안하면 전체화면 불가능

3) 비디오 및 오디오


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>IFRAME 액자만들기</h1>
    <hr />
    <iframe
      src="http://www.daum.net"
      frameborder="0"
      width="400px"
      height="200px"
    ></iframe>
    <hr />
    <div>https://youtu.be/j2R0ohNdo6M</div>
    <iframe
      src="http://www.youtube.com/embed/j2R0ohNdo6M"
      frameborder="0"
      allowfullscreen="true"
    ></iframe>
    <hr />
    <video src="video_sample.mp4" controls width="400px" height="200px"></video>
    <hr />
    <audio src="audio_sample.mp3" controls></audio>
  </body>
</html>

Contents