iframe element - by. UXKM

요약 설명

<iframe> 요소는 다른 HTML 페이지를 현재 문서 안에 삽입할 수 있도록 하는 태그로, 문서 내에 독립적인 브라우저 창(프레임)을 생성합니다.
외부 웹페이지, 지도, 동영상, 광고 등 다양한 콘텐츠를 포함할 수 있으며, src 속성으로 불러올 URL을 지정합니다. 보안과 접근성을 위해 title, sandbox, loading, referrerpolicy 등의 속성을 함께 사용하는 것이 권장되며, 콘텐츠의 소스가 외부일 경우 CORS 정책과 보안 제한을 고려해야 합니다.

주요 역할 및 특징

  1. 웹페이지 내에 다른 문서(웹사이트) 삽입
    • <iframe>은 외부 웹페이지 또는 같은 도메인의 다른 HTML 문서를 현재 페이지에 포함할 수 있습니다.
    • 예: YouTube 동영상, Google 지도, 외부 광고 등을 삽입하는 데 활용됩니다.
  2. 독립적인 문서 컨텍스트
    • <iframe>에 로드된 콘텐츠는 현재 문서와 독립적인 컨텍스트를 가집니다.
    • 즉, <iframe> 내부의 CSS, JavaScript는 부모 문서의 영향을 받지 않습니다.
  3. 동적인 콘텐츠 추가

    <iframe>을 활용하면 특정 웹 애플리케이션이나 대시보드, 소셜 미디어 콘텐츠 등을 불러와 웹사이트 내에서 동적으로 표시할 수 있습니다.

  4. 보안 제한이 있을 수 있음
    • 일부 웹사이트(예: Google, Facebook 등)는 보안상의 이유로 <iframe>을 통한 로딩을 차단할 수 있습니다.
    • X-Frame-Options라는 HTTP 헤더를 통해 외부 사이트가 <iframe>으로 불러오는 것을 차단할 수도 있습니다.
  5. CORS(교차 출처 리소스 공유) 정책 주의
    • <iframe> 내에서 다른 도메인의 콘텐츠를 조작하는 것은 보안 정책상 제한될 수 있습니다.
    • 예를 들어, 자바스크립트로 <iframe> 내부의 다른 도메인 페이지에 접근하는 것은 Same-Origin Policy(동일 출처 정책)에 의해 차단될 수 있습니다.
  6. 브라우저 렌더링 및 크기 조정
    • 기본적으로 <iframe>은 지정된 width 및 height 크기로 표시됩니다.
    • CSS를 사용해 100% 너비로 조정할 수도 있습니다.
  7. SEO 및 성능에 부정적인 영향
    • <iframe>을 과도하게 사용하면 검색 엔진이 콘텐츠를 분석하기 어려워 SEO에 부정적인 영향을 줄 수 있습니다.
    • 또한, 페이지 로딩 속도를 저하시킬 수도 있으므로 적절한 사용이 필요합니다.

CSS 기본 값

<iframe> 요소는 기본적으로 인라인 블록 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

기본 문법

속성

<iframe> 속성 요약

  • 속성명
  • 설명
  • 예제

  • src [필수]

    불러올 웹페이지의 URL 지정

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

  • title [필수]

    접근성을 위한 설명 제공

    <iframe title="YouTube Video"></iframe>

  • width/height

    프레임의 가로/세로 길이(px 또는 %)

    <iframe width="600" height="400"></iframe>

  • frameborder

    테두리 표시 여부(0: 없음, 1: 있음)

    <iframe frameborder="0"></iframe> (현재는 CSS로 제어)

  • allowfullscreen

    전체 화면 모드 허용

    <iframe allowfullscreen></iframe>

  • loading

    로딩 방식 설정 (lazy, eager)

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

  • srcdoc

    <iframe> 내부에 직접 HTML 코드 삽입

    <iframe srcdoc="<p>Hello World!!</p>"></iframe>

  • sandbox

    보안 설정 (스크립트 실행 제한 등)

    <iframe sandbox></iframe>

[src] 필수 <iframe src="URL">

<iframe>이 불러올 웹페이지의 URL을 지정하는 속성입니다.

[title] 필수 - 접근성 고려 <iframe title="타이틀">

<iframe>의 내용을 설명하는 접근성 속성입니다. 스크린 리더 등의 보조 기술이 <iframe>의 용도를 안내할 때 사용됩니다.

[width / height] 선택 사항 <iframe width="px/%" height="px/%">

width/height 속성 설명 및 기본 예제

<iframe>의 가로(width) 및 세로(height) 크기를 픽셀(px) 또는 백분율(%) 단위로 설정하는 속성입니다.

width는 % 값 사용 가능

  • <iframe>의 width 속성에는 퍼센트(%) 값이 적용될 수 있습니다.
  • % 값은 부모 요소의 너비를 기준으로 상대적으로 크기를 조정합니다.

height는 % 값이 기본적으로 적용되지 않음

  • <iframe>의 height 속성에 % 값을 지정해도, 부모 요소가 명확한 높이를 가지고 있어야 적용됩니다.
  • 부모 요소가 높이를 지정하지 않으면, <iframe>의 높이는 0으로 설정될 수도 있습니다.

[frameborder] HTML5에서 제거됨 <iframe frameborder="0">

<iframe>의 테두리(border)를 표시할지 여부를 지정하는 속성이지만, HTML5에서는 더 이상 지원되지 않습니다. 대신 CSS의 border 속성을 사용하는 것이 권장됩니다.

[allowfullscreen] 선택 사항 <iframe allowfullscreen>

<iframe> 내 콘텐츠(예: 동영상)를 전체 화면으로 볼 수 있도록 허용하는 속성입니다.

[loading] 선택 사항 - 성능 최적화 <iframe loading="값">

<iframe>을 언제 로드할지를 결정하는 속성입니다.

  • lazy : 화면에 나타날 때 로드(지연 로딩, 성능 최적화 가능)
  • eager : 페이지가 로드될 때 즉시 로드(기본값)

[srcdoc] 선택 사항 <iframe srcdoc="유효한 HTML 코드">

<iframe> 내부에 직접 HTML 코드를 작성하여 표시할 수 있도록 합니다.

  • src 속성을 대신하여 별도의 HTML 문서 없이 즉시 콘텐츠 삽입 가능
  • JavaScript, CSS, HTML을 포함할 수 있고, 외부 리소스를 로드하지 않아 보안 및 성능 면에서 유리합니다.

[sandbox] 선택 사항 <iframe sandbox="값">

sandbox 속성 설명

<iframe> 내 콘텐츠의 보안 정책을 설정하는 속성입니다.

  • sandbox만 지정하면 모든 기능이 제한됩니다.
  • 특정 기능을 허용하려면 추가 속성을 명시해야 합니다.

sandbox 속성의 사용 가능한 값

  • 값
  • 설명

  • sandbox (속성만 지정)

    모든 제한 적용 (기본값)

  • sandbox="allow-forms"

    <form>을 통한 데이터 전송 허용

  • sandbox="allow-modals"

    window.alert(), confirm(), prompt() 등 모달 창 허용

  • sandbox="allow-downloads"

    사용자가 <iframe> 내에서 파일을 다운로드할 수 있도록 허용

  • sandbox="allow-popups"

    window.open()과 같은 새 창(팝업) 열기 허용

  • sandbox="allow-popups-to-escape-sandbox"

    allow-popups가 활성화된 상태에서 팝업 창이 sandbox 밖에서 실행될 수 있도록 허용

  • sandbox="allow-same-origin"

    <iframe>이 부모 페이지와 같은 출처(same-origin)로 동작하도록 허용

  • sandbox="allow-scripts"

    JavaScript 실행 허용 (eval()은 여전히 제한됨)

  • sandbox="allow-top-navigation"

    <iframe>이 부모 페이지를 변경할 수 있도록 허용 (window.top.location 변경 가능)

  • sandbox="allow-top-navigation-by-user-activation"

    사용자의 직접적인 액션(예: 클릭)으로만 부모 페이지 변경 가능

  • sandbox="allow-presentation"

    Presentation API 사용 허용

  • sandbox="allow-storage-access-by-user-activation"

    사용자가 <iframe> 내부에서 직접 상호작용할 때만 Storage API 접근 가능

예제

외부 웹페이지 삽입

YouTube 동영상 삽입

Google 지도 삽입

CodePen 삽입

srcdoc을 활용한 내부 HTML 문서 포함

주의사항

  • 다른 도메인의 콘텐츠를 포함할 때, JavaScript로 해당 <iframe>에 접근하려면 CORS 정책이 허용되어 있어야 합니다.
    (해결 방법: sandbox 속성을 적절히 사용하거나, JSONP 또는 서버 프록시 활용.)
  • <iframe> 내부의 콘텐츠는 검색 엔진이 직접 크롤링하지 않기 때문에 웹사이트의 검색 순위에 부정적인 영향을 줄 수 있습니다.
    중요한 콘텐츠는 <iframe>이 아닌 일반 HTML로 추가하는 것이 바람직합니다.
  • 신뢰할 수 없는 외부 콘텐츠를 포함하면 XSS(크로스 사이트 스크립팅) 공격에 노출될 위험이 있습니다. 보안을 강화하기 위해 sandbox 속성을 적극 활용하세요.
  • <iframe>을 남용하면 페이지 로딩 속도가 느려질 수 있습니다. loading="lazy" 속성을 사용하여 성능을 저하를 방지하는 것이 권장됩니다.
  • 일부 <iframe> 콘텐츠가 크기에 맞지 않으면 스크롤이 생길 수 있습니다. scrolling="no" 속성을 사용하면 스크롤을 숨길 수 있지만, CSS로 overflow: hidden;을 설정하는 것이 더 추천됩니다.