HTML Iframes
HTML에서 <iframe> 요소는 한 웹 페이지 내에 다른 웹 페이지를 임베드 할 때 사용됩니다.
이를 통해 사용자는 현재 웹 페이지를 떠나지 않고 다른 웹 페이지의 내용을 볼 수 있습니다.
HTML Iframe Syntax
HTML <iframe>태그는 인라인 프레임을 지정합니다.
인라인 프레임은 현재 HTML 문서 내에 다른 문서를 삽입하는 데 사용됩니다.
<iframe> 요소에 title 속성을 포함시키는 것은 웹 접근성 지침에 따라 권장되는 사항 중 하나입니다.
<iframe src="https://www.google.com/maps/embed?..." title="Google Maps location of New York"></iframe>
Iframe - 주요 속성
src: 이 속성은 임베드될 페이지의 URL을 지정합니다.
width & height: 이러한 속성은 iframe의 너비와 높이를 각각 지정합니다. 이는 픽셀 값이나 퍼센트로 지정될 수 있습니다.
frameborder: 이 속성은 iframe 주위의 테두리의 표시 여부를 결정합니다. 1은 테두리를 표시하고, 0은 표시하지 않습니다.
scrolling: 스크롤 바의 표시 여부를 결정합니다. 값은 auto, yes, 또는 no 중 하나가 될 수 있습니다.
name: iframe에 이름을 지정하면 JavaScript에서 이를 참조할 수 있습니다.
sandbox: 이 속성은 임베드된 콘텐츠의 권한을 제한하는 데 사용됩니다. 예를 들어, 스크립트 실행, 양식 제출, 팝업 창 열기 등의 기능을 제한하려면 이 속성을 사용할 수 있습니다.
allowfullscreen: 이 속성은 iframe 내의 내용이 전체 화면으로 확장되는 것을 허용합니다.
srcdoc: 이 속성을 사용하면 직접 HTML 콘텐츠를 iframe에 포함시킬 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>iframe의 크기를 지정하기 위해 height와 width 속성을 사용할 수 있습니다.</p>
<p>iframe의 테두리를 지정하기 위해 frameborder 속성을 사용할 수 있습니다.</p>
<p>iframe의 스크롤을 지정하기 위해 scrolling 속성을 사용할 수 있습니다.</p>
<iframe src="https://daum.net/" height="200" width="100%" frameborder="0" scrolling="yes" title="Iframe Example"></iframe>
</body>
</html>HTML Iframes
iframe의 크기를 지정하기 위해 height와 width 속성을 사용할 수 있습니다.
iframe의 테두리를 지정하기 위해 frameborder 속성을 사용할 수 있습니다.
iframe의 스크롤을 지정하기 위해 scrolling 속성을 사용할 수 있습니다.
Iframe - Target for a Link
iframe은 링크의 대상 프레임으로 사용할 수 있습니다.
target링크의 속성은 iframe의 name속성을 참조해야 합니다.
<!DOCTYPE html>
<html>
<body>
<h2>Iframe - Target for a Link</h2>
<iframe src="https://upload.wikimedia.org/wikipedia/commons/4/44/Daum_communication_logo.svg" name="iframe_b" height="300px" width="300px" title="Iframe Example"></iframe>
<p><a href="https://daum.net" target="iframe_b">다음 사이트</a></p>
<p>링크의 target 속성이 iframe의 name과 일치할 때, 링크는 iframe 내에서 열립니다.
</p>
</body>
</html>Iframe - Target for a Link
링크의 target 속성이 iframe의 name과 일치할 때, 링크는 iframe 내에서 열립니다.
iframe 사용 시 주의사항
보안: iframe을 사용할 때는 원치 않는 콘텐츠가 임베드되지 않도록 주의해야 합니다. 특히 사용자가 입력한 URL을 직접 iframe에 임베드하는 경우 크로스 사이트 스크립팅(XSS) 공격에 노출될 수 있습니다.
성능: 대량의 iframe을 사용하면 페이지 로드 시간에 영향을 줄 수 있습니다.
반응형 디자인: iframe의 크기는 기본적으로 고정되므로 반응형 디자인에서 적절히 조절해야 합니다.
'FRONTEND > HTML' 카테고리의 다른 글
| [FE] HTML 문서 구조 - Doctype, html, head, body (1) | 2023.11.10 |
|---|---|
| HTML 튜토리얼 - HTML JavaScript (0) | 2023.08.16 |
| HTML 튜토리얼 - HTML id Attribute (0) | 2023.08.04 |
| HTML 튜토리얼 - HTML class Attribute (0) | 2023.07.28 |
| HTML 튜토리얼 - HTML Block and Inline Elements (0) | 2023.07.24 |