실행 가능한 HTML 문서: iframe 태그

Q: iframe으로 유튜브 영상을 넣으려면 어떻게 하나요?

유튜브에서 공유, 그다음 퍼가기를 누르고 코드를 복사하세요. src가 https://www.youtube.com/embed/ 뒤에 영상 ID가 붙은 iframe이에요. title과 allowfullscreen 속성은 유지하고, 반응형으로 만들려면 CSS aspect-ratio: 16 / 9와 width: 100%를 쓰세요.

Q: iframe에 왜 사이트에서 연결을 거부했다고 나오나요?

그 사이트가 다른 사이트에서 자기를 프레임에 넣지 못하게 하는 X-Frame-Options나 Content-Security-Policy: frame-ancestors 헤더를 보내는 거예요. 클릭재킹을 막으려고 많은 사이트가 이렇게 해요. 내 페이지에서 덮어쓸 수는 없으니, 공식 삽입용 URL이 있다면 그걸 쓰세요.

Q: iframe 테두리는 어떻게 없애나요?

CSS에서 border: 0을 지정하세요. 예전의 frameborder="0" 속성은 더 이상 쓰지 않지만, 복사한 삽입 코드에는 여전히 들어 있는 경우가 많아요.

Q: iframe을 반응형으로 만들려면 어떻게 하나요?

CSS에서 width: 100%와 aspect-ratio를 주고(영상이라면 aspect-ratio: 16 / 9), 고정 높이는 빼세요. 그러면 iframe이 컨테이너에 맞춰 크기가 바뀌면서 비율을 유지해요.

Q: iframe의 sandbox 속성은 무슨 일을 하나요?

빈 sandbox 속성은 프레임 안의 스크립트, 폼 제출, 팝업 등을 막고, 그 콘텐츠를 고유한 출처에서 온 것으로 취급해요. 그다음 allow-scripts나 allow-forms 같은 키워드로 삽입 콘텐츠에 필요한 것만 허용해요.

iframe 사용법

<iframe>은 다른 페이지를 내 페이지 안에 보여 줘요. src에 페이지 주소를, 설명하는 title을, 그리고 크기를 주세요.

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

프레임은 페이지를 자체 스타일과 스크립트를 가진 별도의 문서로 불러와요. 이 페이지의 예제들은 src 대신 srcdoc을 써요. 프레임의 HTML을 속성에 바로 넣기 때문에 다른 사이트를 불러오지 않아도 동작해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    p { color: #2563eb; font-weight: 600; }
  </style>
</head>
<body>
  <p>This paragraph is in the outer page.</p>
  <iframe title="Inner page" width="320" height="120"
    srcdoc="<h1 style='font: 20px system-ui'>Hello from inside the frame</h1><p>The outer page's CSS does not reach me.</p>">
  </iframe>
</body>
</html>

바깥 문단은 파란색 굵은 글씨지만, 같은 p 규칙이 페이지에 있는데도 프레임 안의 문단은 그렇지 않아요. 스타일은 어느 방향으로도 프레임 경계를 넘지 않아요. 기본 테두리와 300×150 기본 크기는 브라우저에서 오고, width와 height 속성이 크기를 덮어써요.

유튜브 영상이나 지도 삽입하기

영상 사이트와 지도 서비스는 바로 쓸 수 있는 iframe 코드를 줘요. 유튜브에서 공유, 그다음 퍼가기를 누르세요.

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

Google 지도라면 장소를 열고 공유, 그다음 지도 퍼가기를 누른 뒤 같은 방식으로 iframe을 복사하세요. title은 유지하고(프레임에 들어갈 때 스크린 리더가 알려 줘요), 고정 크기는 아래의 반응형 CSS로 바꾸세요. allow 속성은 삽입된 페이지에서 기본적으로 꺼져 있는 자동 재생이나 전체 화면 같은 기능을 프레임에 허용해요.

크기, 테두리, 반응형 iframe

복사한 삽입 코드는 고정 픽셀 크기를 써서 휴대폰에서 넘쳐요. width: 100%에 aspect-ratio를 더하면 프레임이 컨테이너를 채우면서 비율을 유지하고, border: 0은 기본 inset 테두리를 없애요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Responsive iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .embed {
      width: 100%;
      aspect-ratio: 16 / 9;
      border: 0;
      border-radius: 8px;
      background: #111827;
    }
    .wrap { max-width: 480px; }
  </style>
</head>
<body>
  <div class="wrap">
    <iframe class="embed" title="Video placeholder"
      srcdoc="<body style='margin:0;height:100vh;display:grid;place-items:center;color:#fff;font:16px system-ui'>16:9 frame">
    </iframe>
  </div>
</body>
</html>

max-width: 480px를 다른 값으로 바꿔도 프레임은 모든 너비에서 16:9 비율을 유지해요. border: 0을 지우면 브라우저의 기본 테두리가 보여요. 예전의 frameborder, scrolling, marginheight 속성은 더 이상 쓰지 않으니 CSS를 쓰세요.

sandbox: 프레임이 할 수 있는 일 제한하기

프레임은 다른 페이지처럼 스크립트를 실행하고, 폼을 제출하고, 팝업을 열 수 있어요. sandbox 속성은 그 권한을 빼앗아요. 빈 sandbox는 거의 모든 걸 막고, 키워드 하나가 권한 하나를 돌려줘요. 아래 두 프레임은 작은 스크립트가 들어 있는 같은 HTML을 받아요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sandbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { width: 240px; height: 70px; border: 2px solid #e5e7eb; border-radius: 6px; }
    code { display: block; margin: 8px 0 4px; }
  </style>
</head>
<body>
  <code>sandbox=""</code>
  <iframe id="a" sandbox="" title="Sandboxed frame"></iframe>
  <code>sandbox="allow-scripts"</code>
  <iframe id="b" sandbox="allow-scripts" title="Frame with scripts allowed"></iframe>
  <script>
    const html = '<p id="s" style="font: 15px system-ui">Scripts are blocked</p>' +
      '<script>document.getElementById("s").textContent = "JavaScript ran";<\/script>';
    document.getElementById('a').srcdoc = html;
    document.getElementById('b').srcdoc = html;
  </script>
</body>
</html>

첫 번째 프레임은 스크립트가 실행되지 않아서 자리 표시 텍스트가 그대로예요(Chrome 콘솔에는 "Blocked script execution" 메시지가 찍혀요). 사용자가 작성한 HTML처럼 완전히 믿을 수 없는 콘텐츠를 프레임에 넣을 때는 항상 sandbox를 쓰고, 필요한 키워드만 추가하세요.

키워드	허용하는 것
`allow-scripts`	JavaScript 실행
`allow-forms`	폼 제출
`allow-popups`	`window.open`과 `target="_blank"` 링크
`allow-modals`	`alert()`, `confirm()`, `prompt()`
`allow-same-origin`	콘텐츠를 실제 출처로 취급(쿠키, 저장소)
`allow-top-navigation`	탭 전체를 내 페이지에서 다른 곳으로 이동

내 출처의 콘텐츠에 allow-scripts와 allow-same-origin을 절대 함께 주지 마세요. 프레임 안의 스크립트가 자기 sandbox를 없앨 수 있게 돼요.

프레임과 대화하기: postMessage

바깥 페이지와 프레임은 별개의 문서예요. 출처가 다르면 서로의 DOM을 건드릴 수 없지만 메시지는 보낼 수 있어요. 메시지를 입력하고 프레임으로 보내 보세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>postMessage</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { display: block; width: 280px; height: 80px; margin-top: 10px; border: 2px solid #2563eb; border-radius: 6px; }
  </style>
</head>
<body>
  <input id="msg" value="Hello, frame">
  <button id="send">Send</button>
  <iframe id="frame" title="Message receiver" srcdoc="
    <p style='font: 15px system-ui' id='got'>Waiting for a message</p>
    <script>
      addEventListener('message', (e) => {
        document.getElementById('got').textContent = 'Received: ' + e.data;
      });
    </script>">
  </iframe>
  <script>
    document.getElementById('send').onclick = () => {
      const frame = document.getElementById('frame');
      frame.contentWindow.postMessage(document.getElementById('msg').value, '*');
    };
  </script>
</body>
</html>

실제 코드에서는 '*' 대신 프레임의 정확한 출처('https://maps.example.com' 같은)를 넘기고, 받는 쪽에서 e.origin을 확인해서 예상한 사이트와만 메시지를 주고받게 하세요.

성능과 사이트가 거부할 때

지연 로딩. 페이지 아래쪽의 프레임에는 loading="lazy"를 추가하세요. 독자가 근처까지 스크롤할 때만 브라우저가 불러와요. iframe 하나하나가 페이지 전체를 불러오는 것이라서, 삽입 콘텐츠가 많은 페이지는 이게 없으면 느려져요.
"연결을 거부했습니다". 많은 사이트(은행, 대부분의 소셜 네트워크, Google 검색)가 프레임에 넣지 못하게 하는 X-Frame-Options나 frame-ancestors 헤더를 보내고, 브라우저는 프레임에 오류를 보여 줘요. 내 페이지에서 덮어쓸 수 없어요. 그 사이트의 공식 삽입용 URL이나 링크를 쓰세요.
접근성. 항상 title을 설정하세요. 스크린 리더가 프레임에 이름을 붙이는 방법이고, 제목 없는 프레임이 여러 개인 페이지는 돌아다니기 어려워요.

자주 하는 실수

title이 없음. 스크린 리더가 이름 없는 프레임이라고 알려 줘요.
복사한 삽입 코드의 고정 너비. width: 100%와 aspect-ratio로 바꾸세요.
일반 영상 파일을 프레임에 넣음. 내 .mp4 파일에는 video 요소를 쓰세요. iframe은 페이지용이에요.
프레임 콘텐츠를 믿음. 직접 작성하지 않은 것에는 sandbox를 추가하세요.
바깥 CSS가 프레임을 꾸밀 거라고 기대함. 프레임 안의 페이지는 그 안에서 꾸미세요.

자주 묻는 질문

HTML에서 iframe이란 무엇인가요?

<iframe>(인라인 프레임)은 현재 페이지 안에 별도의 웹페이지를 보여 주는 상자예요. 자체 문서, 스타일, 스크립트를 가지고 있어서 영상, 지도, 광고, 코드 미리보기 같은 삽입 콘텐츠에 써요.

iframe으로 유튜브 영상을 넣으려면 어떻게 하나요?

유튜브에서 공유, 그다음 퍼가기를 누르고 코드를 복사하세요. src가 https://www.youtube.com/embed/ 뒤에 영상 ID가 붙은 iframe이에요. title과 allowfullscreen 속성은 유지하고, 반응형으로 만들려면 CSS aspect-ratio: 16 / 9와 width: 100%를 쓰세요.

iframe에 왜 사이트에서 연결을 거부했다고 나오나요?

그 사이트가 다른 사이트에서 자기를 프레임에 넣지 못하게 하는 X-Frame-Options나 Content-Security-Policy: frame-ancestors 헤더를 보내는 거예요. 클릭재킹을 막으려고 많은 사이트가 이렇게 해요. 내 페이지에서 덮어쓸 수는 없으니, 공식 삽입용 URL이 있다면 그걸 쓰세요.

iframe 테두리는 어떻게 없애나요?

CSS에서 border: 0을 지정하세요. 예전의 frameborder="0" 속성은 더 이상 쓰지 않지만, 복사한 삽입 코드에는 여전히 들어 있는 경우가 많아요.

iframe을 반응형으로 만들려면 어떻게 하나요?

CSS에서 width: 100%와 aspect-ratio를 주고(영상이라면 aspect-ratio: 16 / 9), 고정 높이는 빼세요. 그러면 iframe이 컨테이너에 맞춰 크기가 바뀌면서 비율을 유지해요.

iframe의 sandbox 속성은 무슨 일을 하나요?

빈 sandbox 속성은 프레임 안의 스크립트, 폼 제출, 팝업 등을 막고, 그 콘텐츠를 고유한 출처에서 온 것으로 취급해요. 그다음 allow-scripts나 allow-forms 같은 키워드로 삽입 콘텐츠에 필요한 것만 허용해요.