개발일지/React

[16] Iframe

꾸주니=^= 2024. 12. 9. 18:02

아이프레임은 HTML Inline Frame 요소이며 inline frame의 약자이다.

효과적으로 다른 HTML 페이지를 현재 페이지에 포함시키는 중첩된 브라우저로
iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입할 수 있다.

또한 웹 페이지 안에 다른 HTML 페이지나 콘텐츠를 삽입하는 데 사용된다. 흔히 동영상(예: YouTube), 지도(예: Google Maps), 또는 다른 웹 페이지를 임베드하는 데 사용된다.

 

기본 문법

<iframe src="URL" width="WIDTH" height="HEIGHT"></iframe>

 

주요 속성

  1. src:
    • 삽입할 콘텐츠의 URL을 지정.
    • 예: YouTube 동영상 링크, 다른 웹 페이지 주소.
  2. width:
    • iframe의 너비를 지정.
    • 단위: px, % (예: 600, 100%).
  3. height:
    • iframe의 높이를 지정.
    • 단위: px, %.
  4. title:
    • 화면 판독기와 같은 접근성 도구를 위한 설명 제공.
  5. frameborder (deprecated, 비추천):
    • 프레임 테두리를 표시할지 여부를 지정 (값: 0 또는 1).
  6. allow:
    • 특정 기능(예: 풀스크린)을 허용.
    • 예: allow="fullscreen".
  7. sandbox:
    • iframe 안의 콘텐츠가 브라우저에서 수행할 수 있는 작업을 제한.
    • 예: sandbox="allow-scripts allow-same-origin".
  8. allowfullscreen:
    • 콘텐츠가 풀스크린 모드로 표시될 수 있도록 허용.

sandbox 속성 예제

sandbox 속성을 사용하면 iframe 콘텐츠의 보안성을 높일 수 있다.

<iframe 
    src="https://www.example.com" 
    width="600" 
    height="400" 
    sandbox="allow-scripts allow-same-origin">
</iframe>

주요 옵션:

  • allow-scripts: 스크립트 실행 허용
  • allow-same-origin: 같은 출처의 콘텐츠와 상호작용 허용
  • allow-popups: 팝업 창 열기 허용
  • allow-forms: 폼 제출 허용
저작자표시