iframe
1. iframe 태그
inline frame을 줄여 쓴 것으로, 현재 웹페이지에 다른 HTML 페이지를 포함시켜 중첩하는 기능을 제공합니다. 주요 속성
| 속성 | 설명 |
|---|---|
src | 삽입될 문서의 주소 |
width | 너비 지정(px, %) |
height | 높이 지정(px, %) |
title | 콘텐츠의 제목 (접근성을 위해 사용 권장) |
scrolling | 스크롤바 표시 유무(yes, no, auto) |
longdesc | 내용을 설명하는 페이지 |
marginwidth | left(좌), right(우) 여백공간 |
align | 정렬(top, middle, bottom, left, right) |
:::div{.callout}
종종 보이는 iframe의 속성 중 `frameborder` 속성은 테두리 유무를 제어합니다. frameborder="0"을 사용하던 것은 HTML5에서 더 이상 권장되지 않는 방법이며, CSS를 사용하여 `iframe { border: none; }`과 같이 설정하는 것이 좋습니다!
::::::div{.callout}
종종 보이는 iframe의 속성 중 `frameborder` 속성은 테두리 유무를 제어합니다. frameborder="0"을 사용하던 것은 HTML5에서 더 이상 권장되지 않는 방법이며, CSS를 사용하여 `iframe { border: none; }`과 같이 설정하는 것이 좋습니다!
:::보안 관련 속성
| 속성 | 설명 |
|---|---|
sandbox | iframe 안의 콘텐츠에서 스크립트 실행, 폼 제출, 팝업 생성 등을 제한 |
allowfullscreen | 전체화면 전환 허용 |
allow | iframe에서 허용할 기능들을 지정 (카메라, 마이크 등) |
<iframe
width="1280"
height="720"
src="https://www.youtube.com/embed/-iuX3r8PSzU"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
>
</iframe><iframe
width="1280"
height="720"
src="https://www.youtube.com/embed/-iuX3r8PSzU"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
>
</iframe>💡 '연결을 거부했습니다' 일부 사이트에서는 브랜드 이미지 보호 및 보안상의 이유로 아이프레임을 거부하기도 합니다.
+) 추가적인 팁
속도를 향상시키기 위해서는 메인 콘텐츠가 완전히 로딩된 이후 JavaScript로 <iframe>의 src 속성을 설정하는 편이 좋습니다. 웹 페이지를 더 빠르게 이용할 수 있고 SEO 측정 시 중요한 지표인 웹 페이지 로딩 시간을 단축할 수 있기 때문입니다!