iframe
1. iframe
- inline frame을 줄여 쓴것.
- 현재 웹페이지에 다른 HTML 페이지를 포함시켜 중첩하는 기능을 제공합니다.
- iframe 속성
src
: 삽입될 문서의 주소width
: 너비 지정(px,%)height
: 높이 지정(px,%)frameborder
: 테두리 표시 여부(1: 테두리 있음, 0: 테두리 없음)scrolling
: 스크롤바 표시 유무(yes,no,auto)longdesc
: 내용을 설명하는 페이지marginwidth
: left(좌), right(우), 여백공간(margin)align
: 정렬(top, middle, bottom, left, right)allow
: iframe 에서 허용할 기능들을 지정합니다.allowfullscreen
: 전체화면을 지원합니다.
<iframe
width="1280"
height="720"
src="https://www.youtube.com/embed/-iuX3r8PSzU"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
>
</iframe>
<iframe
width="1280"
height="720"
src="https://www.youtube.com/embed/-iuX3r8PSzU"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
>
</iframe>
💡 '연결을 거부했습니다' 일부 사이트에서는 아이프레임을 거부하기도 합니다.
+) 추가적인 팁
속도를 향상시키기 위해서는 메인 콘텐츠가 완전히 로딩된 이후 JavaScript로 <iframe>
의 src 속성을 설정하는 편이 좋습니다. 웹 페이지를 더 빠르게 이용할 수 있고 SEO 측정 시 중요한 지표인 웹 페이지 로딩 시간을 단축할 수 있기 때문입니다!