HTML iframe 태그는 웹 문서를 웹 페이지에 포함합니다. 포함된 문서는 PDF, 웹 페이지 또는 다른 자산일 수 있습니다. src 속성은 포함된 리소스의 위치를 정의합니다.
HTML을 사용하여 한 웹 문서의 콘텐츠(예:PDF 또는 Google 지도의 지도)를 다른 페이지에 포함할 수 있습니다.
HTML HTML 태그는 다른 웹 페이지와 같은 외부 개체를 단일 웹 페이지에 포함하는 데 사용됩니다. 이 튜토리얼에서는 예제와 함께 HTML 사용 방법에 대해 설명합니다. 웹 리소스를 웹 페이지에 삽입하는 태그입니다.
HTML iframe
HTML iframe 또는 인라인 프레임은 페이지에 외부 웹 문서를 표시합니다.
를 사용하여 지도, PDF, 비디오 또는 기타 리소스를 포함할 수 있습니다.인라인 프레임에 저장된 코드는 웹 페이지의 나머지 부분과 독립적입니다. 웹페이지에 적용되는 모든 스타일 또는 JavaScript는 iframe 내에서 적용되지 않습니다.
다음은 HTML 의 구문입니다. 태그:
<iframe src="url"></iframe>
태그는 iframe을 만드는 데 사용됩니다. iframe src를 지정했습니다. 기인하다. 속성에는 웹 페이지에 포함하려는 HTML 요소의 위치가 포함됩니다. HTML URL이어야 합니다.
iframe HTML 코드 예
태그가 작동합니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
지역 워싱턴 D.C. 역사 사회를 위한 웹사이트를 구축한다고 가정해 보겠습니다. 그들은 우리가 미국 헌법의 탄생에 대한 Khan Academy의 비디오가 포함된 페이지를 만들기를 원합니다. 이 페이지는 사회 가입에 관심이 있는 모든 사람에게 권장되는 자료입니다. 다음 코드를 사용하여 웹사이트에 동영상을 삽입할 수 있습니다.
<iframe src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>
코드 반환:
을 사용했습니다. 웹 페이지에 외부 웹 리소스를 포함하는 요소입니다. 포함된 웹 리소스는 "https://www.youtube.com/embed/Rk8dCnKIfP4" 링크입니다. 이것은 역사적 사회가 그들의 웹사이트에 보여주고자 하는 비디오를 가리킵니다.
HTML Iframe 높이 및 너비
height 속성과 width 속성은 iframe의 크기를 설정하는 데 사용됩니다. 지역 워싱턴 D.C. 역사 협회에서 우리가 자신들의 사이트에서 비디오를 더 크게 만들기를 원한다고 가정해 보겠습니다.
YouTube 동영상의 너비를 500픽셀로, 높이를 300픽셀로 설정하겠습니다.
<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>
코드 반환:
포함된 비디오는 이제 HTML 문서에서 너비가 500픽셀이고 높이가 300픽셀입니다. 이렇게 하면 사람들이 웹사이트에서 우리 동영상을 더 쉽게 볼 수 있습니다.
또는 CSS를 사용하여 iframe 태그의 너비와 높이를 설정할 수 있습니다. 그러나 HTML은 height 및 weight 속성을 지원하기 때문에 이것은 필요하지 않습니다.
HTML iframe 테두리 제거
으로 작업할 때 태그를 보면 내용이 테두리로 둘러싸여 있음을 알 수 있습니다. 이 테두리를 제거하려면 border:none;을 사용할 수 있습니다. CSS 속성.
역사적 사회는 YouTube 동영상 주변의 경계선을 사이트에서 제거하도록 요청했습니다. 테두리를 제거하는 데 사용할 코드는 다음과 같습니다.
<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4" style="border:none;"></iframe>
코드는 다음을 반환합니다.
이제 동영상에 테두리가 없습니다.
HTML iframe 링크 대상
또한 태그는 링크의 대상 프레임으로 사용할 수 있습니다. HTML 링크의 target 속성을 사용하여 링크의 대상 프레임이 되도록 iframe을 설정할 수 있습니다. 대상 HTML 속성은 의 이름 속성을 참조해야 합니다. .
미국 헌법 제1조에 대한 웹사이트에 우리가 보여주길 원하는 또 다른 비디오가 역사 사회에 있다고 가정해 보겠습니다. 이 영상은 또한 칸아카데미에서 퍼블리싱한 것입니다.
텍스트 Birth 미국 헌법의 탄생 웹페이지를 클릭합니다. 비디오는 iframe에서 렌더링되어야 합니다. 텍스트 제1조 클릭하면 헌법 제1조에 대한 비디오가 렌더링되어야 합니다.
다음 코드를 사용하여 이 작업을 수행할 수 있습니다.
<iframe src="https://www.youtube.com/embed/Rk8dCnKIfP4" name="iframe1"></iframe><br /> <a href="https://www.youtube.com/embed/Rk8dCnKIfP" target="iframe1">Birth</a><br /> <a href="https://www.youtube.com/embed/CIFBjZU55so" target="iframe1">Article I</a>
코드 반환:
기본적으로 미국 헌법의 탄생에 대한 비디오는 iframe에 표시됩니다. iframe의 내용은 헌법 제1조에 대한 칸아카데미의 영상을 가리키도록 변경됩니다. 이것은 제1조를 클릭할 때 발생합니다. URL.
출생을 클릭할 때 해당 동영상이 아직 등장하지 않은 경우 iframe은 헌법의 탄생에 대한 동영상으로 리디렉션됩니다. .
결론
HTML 태그는 웹 페이지와 같은 외부 웹 리소스를 다른 웹 페이지에 포함합니다. 사이트에 지도, 파일, 비디오 또는 기타 웹 페이지를 추가하려는 경우에 유용합니다.
이 자습서에서는 예제를 참조하여 HTML 사용 방법에 대해 설명했습니다. 태그를 사용하여 웹 페이지에서 외부 웹 리소스를 렌더링합니다. 이제 사용을 시작하는 데 필요한 지식이 있습니다. 전문가처럼 태그하세요!
HTML 코딩에 대해 자세히 알아보려면 HyperText Markup Language 학습 가이드를 읽어보세요.