WeniVooks

검색

HTML/CSS 에센셜

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 측정 시 중요한 지표인 웹 페이지 로딩 시간을 단축할 수 있기 때문입니다!

7.3 video & audio7.5 SVG, Canvas