iFrame 및 사용 이해

게시 됨: 2022-04-06

iFrame은 일반적으로 웹사이트에 콘텐츠를 삽입하는 데 사용됩니다. 매우 유용할 수 있지만 콘텐츠를 올바르게 표시하는 데 문제가 발생할 수도 있습니다. 이 기사에서는 iFrame이 정확히 무엇인지, 어떻게 사용하는지, 발생할 수 있는 문제를 해결하는 방법에 대해 자세히 알아볼 것입니다.

이것으로 뛰어 들어 봅시다.

iFrame이란 정확히 무엇입니까 ?

iFrame은 '인라인 프레임'의 약자입니다. 그 목적은 다른 HTML 콘텐츠 안에 HTML 콘텐츠를 포함하고 웹 페이지 요소로 표시하는 것입니다.

포함된 소스의 콘텐츠는 웹사이트 레이아웃의 일부인 것처럼 보이지만 그렇지는 않습니다. 다른 웹 페이지, 문서, 비디오 또는 기타 유형의 대화형 미디어가 될 수 있습니다. iFrame의 일반적인 용도는 YouTube 동영상과 같은 것을 포함하는 것입니다.

iFrames는 HTML 태그이며 1997년에 처음 도입된 지 꽤 오래되었습니다. 오래된 제품임에도 불구하고 여전히 일반적으로 사용되며 모든 최신 브라우저에서 지원됩니다.

iFrame을 사용하는 방법

간단한 iFrame을 만들려면 <iframe> HTML 요소를 사용하고 src 속성에서 소스를 설정해야 합니다. 이 작업을 수행하려면 index.html 과 같은 html 파일을 만드십시오. 그런 다음 즐겨 사용하는 편집기로 열고 다음 코드를 삽입합니다.

 <!DOCTYPE html> <html> <body> <h1>This is an iframe</h1> <iframe src="http://www.example.com"> </iframe> </body> </html>

이제 브라우저로 파일을 열면 다음과 같이 표시되어야 합니다.

아이프레임

보시다시피 기본 iframe 크기에는 포함된 콘텐츠(이 경우 웹 페이지)의 전체 너비가 포함되지 않으므로 창 내부를 탐색할 수 있도록 스크롤 막대가 자동으로 나타납니다.

이제 iFrame의 너비와 높이를 직접 설정해 보겠습니다.

 <!DOCTYPE html> <html> <body> <h1>This is an iframe</h1> <iframe src="http://www.example.com" width="480" height="320" > </iframe> </body> </html>

페이지를 새로 고치고 지금 어떻게 보이는지 확인하십시오.

치수가 있는 iFrame

iFrame을 사용할 때 구성할 수 있는 다른 옵션이 많이 있습니다. 가장 인기 있고 유용한 것은 다음과 같습니다.

  • name : JavaScript에서 사용할 수 있도록 Fframe의 이름을 설정할 수 있습니다.
  • loading : iFrame이 로드되는 방식을 정의합니다. '게으른', '열심히' 또는 '자동' 중에서 선택합니다. 예를 들어 'lazy' 값을 사용하면 사용자가 페이지를 iFrame으로 스크롤할 때 iFrame이 로드됩니다. 이는 페이지 로드 속도를 향상시키는 효과가 있습니다. 'Eager'는 즉시 로드하는 반면 'auto'는 브라우저가 iFrame을 로드할 시기를 결정할 수 있도록 합니다.
 <!DOCTYPE html> <html> <body> <div class="wrapper"> <iframe src="https://www.youtube.com/embed/PMz9ovrVb_Q" loading="lazy"></iframe> </div> </body> </html>
  • sandbox : 이 속성은 스크립트 실행, 양식 제출 등과 같은 iFrame의 콘텐츠에 대한 몇 가지 제한 사항을 설정합니다. 당신은 또한 그들 중 하나에 대해 예외를 만들 수 있습니다. 다음은 몇 가지 제한 사항입니다.
    – 허용 양식
    – 포인터 잠금 허용
    – 팝업 허용
    – 동일 출처 허용
    – 스크립트 허용
    – 상단 탐색 허용
    – 허용 모달

샌드박스 속성을 추가하여 모든 제한 사항을 적용하거나 다음과 같이 코드에서 정의하여 위의 항목 중 제외할 항목을 지정할 수 있습니다.

 <!DOCTYPE html> <html> <body> <iframe src="https://www.youtube.com/embed/PMz9ovrVb_Q" sandbox="allow-forms allow-modals"></iframe> </body> </html>
  • allowfullscreen : 주석에 표시된 대로 수행하고 iFrame이 화면에서 완전히 열리도록 합니다.

전체 화면 허용을 테스트하려면 다음과 같이 YouTube 동영상을 임베딩 하여 시도할 수 있습니다.

 <!DOCTYPE html> <html> <body> <iframe width="560" height="315" src="https://www.youtube.com/embed/jofNR_WkoCE" allowfullscreen></iframe> </body> </html>

오른쪽 하단의 전체 화면 버튼은 allowfullscreen 속성이 사용될 때만 작동하는 것을 알 수 있습니다. 속성을 제거하면 전체 화면 버튼이 회색으로 표시됩니다.

iFrame을 반응형으로 만드는 방법

웹사이트의 모든 요소가 반응형이어야 하는 것은 매우 중요합니다. iFrame도 예외는 아닙니다. HTML iFrame이 반응하도록 하려면 먼저 코드에서 너비 및 높이 속성을 제거한 다음 아래와 같이 일부 HTML 요소와 CSS 코드를 사용해야 합니다.

 <!DOCTYPE html> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .container { position: relative; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; } </style> </head> <body> <div class="container"> <iframe class="responsive-iframe" src="https://www.youtube.com/embed/PMz9ovrVb_Q"></iframe> </div> </body> </html>

iFrame을 div 요소로 래핑하고 모바일을 포함한 모든 화면에서 잘 보이도록 치수를 설정하기 위해 일부 CSS를 적용했습니다.

Pressidium으로 웹사이트 호스팅

60일 환불 보장

계획 보기

이제 브라우저 내에서 화면 너비를 테스트하면 iFrame이 반응적으로 표시되고 가로 세로 비율이 유지되는 것을 볼 수 있습니다.

참고: 브라우저 도구에 대해 잘 모르는 경우 Chrome용 "Responsive Web Design Tester"와 같은 확장 프로그램이 유용할 수 있습니다.

iFrame 사용의 이점

iFrames는 매우 유명하며 그럴만한 이유가 있습니다. 다음과 같은 몇 가지 이유를 살펴보겠습니다.

외부 미디어 공유

외부 미디어를 공유하고 싶지만 방문자를 타사 웹사이트로 보내는 대신 웹사이트에 계속 머물게 하려는 경우가 많이 있습니다. iFrame을 사용하면 웹사이트에서 사용자 친화적인 방식으로 외부 미디어를 통합하여 이를 원활하게 수행할 수 있습니다.

사용자 정의 구성

미디어(예: YouTube 비디오)를 포함할 때 대부분의 비디오 호스팅 플랫폼은 이 콘텐츠가 표시되는 방식에 대한 많은 제어를 제공합니다. 예를 들어 iframe의 비디오가 로드될 때 자동 재생되도록 할지 또는 비디오를 무기한 반복할지 여부를 선택할 수 있습니다.

격리된 상태로 유지

iFrame의 또 다른 장점은 상위 문서(일반적으로 해당 문서가 포함된 웹사이트의 페이지)를 방해하지 않는다는 것입니다. 즉, iFrame은 웹사이트의 CSS 및/또는 Javascript의 영향을 받지 않습니다.

iFrame의 가장 널리 사용되는 용도는 다음과 같습니다.

  • Youtube 비디오, Twitter 타임라인 또는 Spotify 팟캐스트 재생 목록 포함
  • 일기 예보를 포함하여 날씨에 대한 정보를 사이트로 가져옵니다.
  • Google 지도 위치 추가

표시하려는 소스가 포함 코드를 제공하는 한 일반적으로 iFrame 내에서 사이트에 항상 이를 표시할 수 있습니다.

iFrame 사용의 잠재적인 단점

iFrame을 사용하지 않는 가장 큰 이유 중 하나는 웹사이트가 사이트 간 공격을 받을 위험이 증가할 수 있다는 것입니다.

iFrame에 포함된 소스를 신뢰할 수 없는 경우 공격자가 iFrame을 웹 페이지에 주입하는 것과 관련된 '악성 iFrame 주입'을 경험할 위험이 있습니다. iFrame 주입 공격에서 '악의적인 웹사이트는 일반적으로 최종 사용자의 컴퓨터를 잠재적으로 손상시킬 수 있는 코드를 악용합니다'.

따라서 iFrames를 사용하여 웹사이트에 콘텐츠를 포함할 때 이 콘텐츠가 신뢰할 수 있는 출처에서 오는 것이 매우 중요합니다. 의심스러운 경우 사용하지 마십시오.

iFrame 사용의 또 다른 단점은 특히 여러 개를 로드하는 경우 웹사이트 속도가 느려질 수 있다는 것입니다. 그러면 웹 사이트는 로드해야 하는 외부 콘텐츠만큼 빨라집니다. 이에 대한 예방책으로 앞서 설명한 loading 속성을 사용할 수 있습니다.

결론

iFrame은 웹사이트에서 광범위하게 사용되며 조만간 중단될 조짐은 없습니다. 올바르게 사용하면 웹 사이트의 콘텐츠를 향상시키는 훌륭한 도구가 될 수 있습니다.