HTML에서 iframe 태그란?
HTML의 iframe 태그는 다른 웹 페이지를 현재 페이지에 내장시키는 데 사용됩니다. 즉, 다른 웹 페이지를 현재 페이지 내부에 포함시켜서 보여줄 수 있습니다.
iframe 태그의 기본 구조
<iframe src="URL" width="값" height="값"></iframe>- src 속성은 내장할 웹 페이지의 URL을 지정합니다.
- width와 height 속성은 내장된 웹 페이지의 너비와 높이를 지정합니다.
iframe 태그 사용 예시
HTML에서 iframe 태그를 설명하기 가장 좋은 예시는 유튜브 동영상입니다. 아래 동영상은 iframe 태그를 사용하여 표시됩니다.
위 영상을 표시하기 위해 작성된 HTML 코드는 아래와 같습니다.
<iframe width="100%" height="409.5" src="https://www.youtube.com/embed/wPl0WgWmGao" title="지브리 스튜디오 OST 40곡 모음 3시간 연속재생 株式会社スタジオジブリ3Hours Studio Ghibli Animation OST No middle Ads" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>iframe 태그에서 사용될 수 있는 속성들
iframe에서 사용될수 있는 속성들은 위에 작성된 유튜브 동영상을 표시하는 코드를 기반으로 알아보도록 하겠습니다.
width
width 속성은 내장된 동영상의 너비를 현재 웹 페이지의 가로 크기에 맞게 100%로 설정했습니다.
height
height 속성은 내장된 동영상의 높이를 409.5px로 설정하고 있습니다.
src
src 속성은 내장할 동영상의 URL을 지정합니다. 이 경우 https://www.youtube.com/embed/wPl0WgWmGao는 YouTube에서 호스팅되는 동영상의 URL입니다.
title
title 속성은 내장된 동영상의 제목을 지정합니다.
frameborder
frameborder 속성은 내장된 동영상 주위에 테두리를 표시할 것인지 여부를 지정합니다. 이 경우 0으로 설정하여 테두리를 제거하고 있습니다.
allow
allow 속성은 내장된 동영상에서 허용되는 기능을 지정합니다. accelerometer, autoplay, clipboard-write, encrypted-media, gyroscope, picture-in-picture, web-share은 모두 내장된 동영상에서 허용되는 기능입니다.
allowfullscreen
allowfullscreen 속성은 내장된 동영상이 전체 화면으로 표시될 수 있는지 여부를 지정합니다. 이 경우 true로 설정하여 내장된 동영상이 전체 화면으로 표시될 수 있도록 허용하고 있습니다.
iframe 태그 사용 시 주의사항
웹 페이지에서 iframe을 사용하여 웹페이지 및 콘텐츠를 구성할 때는 다른 웹 페이지를 긁어오는 것이므로 주의해야할 점이 있습니다.
보안 문제
iframe은 다른 웹 사이트의 컨텐츠를 내장하는 데 사용됩니다. 그러나 이로 인해 보안 문제가 발생할 수 있습니다. 내장된 컨텐츠가 악성 스크립트를 포함할 수 있으므로, 신뢰할 수 없는 소스에서 제공되는 iframe을 사용하는 것은 위험할 수 있습니다.
접근성 문제
iframe 안에 있는 컨텐츠가 일반적으로 별도의 문서로 인식되어 스크린 리더 등의 보조 기술을 사용하는 사용자들에게 접근성 문제를 일으킬 수 있습니다.
레이아웃 문제
iframe의 크기를 지정하는 것은 중요합니다. 크기를 잘못 지정하면 페이지 레이아웃이 깨질 수 있습니다. 또한, 내장된 컨텐츠가 작은 화면에 적합하지 않은 경우, 사용자가 수평 및 수직 스크롤바를 사용해야 할 수도 있습니다.
성능 문제
iframe을 사용하면 외부 컨텐츠를 로드하는 데 시간이 더 걸리기 때문에 웹 페이지의 로딩 속도가 느려질 수 있습니다.
