HTML의 iframe

WBOY원래의: 2024-09-04 16:41:33508검색

HTML의 Iframe은 다른 HTML 문서를 추가하기 위해 HTML 문서로 사용되는 인라인 프레임일 뿐입니다. 해당 웹페이지의 광고와 같은 다른 소스를 통해 다른 콘텐츠를 포함하기 위해 웹페이지나 웹 개발 프로세스에서 주로 사용됩니다.

대부분의 웹 디자이너는 Iframe을 사용하여 웹사이트나 웹페이지에 대화형 애플리케이션을 표시합니다. JavaScript나 HTML의 target 속성을 사용하면 가능합니다.

Iframe의 주요 목적은 다른 웹페이지 내에 웹페이지를 표시하는 것입니다. 인라인 프레임은 이라는 태그를 사용하여 표시되어야 합니다. 이는 브라우저가 스크롤 막대와 테두리가 있는 다른 문서를 표시할 수 있는 웹 페이지의 직사각형 블록처럼 작동합니다.</p> <p><strong>구문</strong></p> <ul> <li>이제 Iframe이 정확히 어떻게 사용되는지 살펴보겠습니다.</li> </ul> <pre class="brush:php;toolbar:false"><iframe src ="URL"></iframe></pre> <ul> <li>여기 <iframe> HTML iframe이 정의되는 태그입니다. 인라인 프레임 페이지의 URL을 정의하는 데 사용되는 Src 속성이 포함됩니다.</li> </ul> <p><strong>예:</strong></p> <pre class="brush:php;toolbar:false"><iframe src ="www.educba.com" ></iframe></pre> <ul> <li>다음과 같이 Iframe에 특정 높이와 너비를 픽셀 형식으로 지정할 수도 있습니다.</li> </ul> <pre class="brush:php;toolbar:false"><iframe src ="URL" height="value" width="value"></iframe></pre> <ul> <li>위 구문에서는 모든 것이 동일하게 됩니다. 또한 높이와 너비를 픽셀 형식으로 지정하여 다음과 같이 정의할 수 있습니다.</li> </ul> <p><strong>예:</strong></p> <pre class="brush:php;toolbar:false"><iframe src ="www.educba.com" height="300" width="300"></iframe></pre> <ul> <li>CSS를 통해 값을 사용하여 iframe의 높이와 너비를 정의하는 또 다른 방법은 아래 구문에 나와 있습니다.</li> </ul> <pre class="brush:php;toolbar:false"><iframe src ="URL" style="height: value in pixels; width: value in pixels"></iframe></pre> <ul> <li>값 지정만 변경한 것 외에는 모두 위와 동일합니다.</li> </ul> <p><strong>예:</strong></p> <pre class="brush:php;toolbar:false"><iframe src ="www.educba.com" style="height:300px; width:300px;"></iframe></pre> <ul> <li>iframe에 추가되는 또 하나의 기능은 border none 속성을 사용하여 프레임에 이미 정의된 테두리를 제거할 수 있다는 것입니다. 이에 대한 구문은 다음과 같습니다.</li> </ul> <pre class="brush:php;toolbar:false"><iframe src ="URL" style="border : none;"></iframe></pre> <ul> <li>CSS를 사용하면 테두리 크기 변경, 테두리에 색상 적용 등 테두리와 관련된 다양한 작업을 수행할 수도 있습니다.</li> </ul> <p>다음 구문을 사용하여 iframe을 링크의 대상으로 사용할 수 있습니다.</p> <pre class="brush:php;toolbar:false"><iframe src ="URL" name="iframe_a"></iframe></pre> <ul> <li>위 구문에서 src는 일반 URL입니다. 여기서 링크의 target 속성은 iframe 태그의 name 속성을 참조합니다.</li> </ul> <p><strong>예:</strong></p> <pre class="brush:php;toolbar:false"><iframe src ="www.educba.com" name="iframe_a"></iframe></pre> <h3>Iframes 태그 속성</h3> <p>Iframe에는 다양한 속성 태그가 사용됩니다. 그 내용은 다음과 같습니다.</p> <ul> <li> <strong>Src:</strong> 이 속성은 프레임에 포함되어야 하는 파일을 삽입하는 데 사용됩니다. URL은 iframe 내에 로드될 대상 웹페이지를 지정합니다.</li> <li> <strong>이름:</strong> 이름은 프레임에 식별 이름을 부여하는 데 사용되는 속성입니다. 다른 웹페이지를 열기 위해 하나의 링크를 만들 때 가장 유용합니다.</li> <li> <strong>allowfullscreen:</strong> 이 속성을 사용하면 프레임을 전체 너비 형식으로 표시할 수 있습니다. 따라서 이 함수가 발생하려면 값을 true로 설정해야 합니다.</li> <li> <strong>Frameborder:</strong> 프레임에 테두리를 표시하거나 표시하지 않을 수 있는 유용한 속성입니다. 값 1은 테두리를 표시하고 0은 프레임에 테두리를 표시하지 않습니다.</li> <li> <strong>여백 너비:</strong> 프레임의 왼쪽과 오른쪽 사이의 공간을 정의할 수 있습니다.</li> <li> <strong>여백 높이:</strong> 프레임 상단과 하단 사이의 공간을 정의할 수 있습니다.</li> <li> <strong>스크롤:</strong> 이 속성은 스크롤 막대가 프레임에 표시되는지 여부를 제어합니다. 포함되는 값은 '예', '아니요' 또는 '자동'입니다.</li> <li> <strong>높이:</strong> 프레임의 높이를 정의하는 데 사용됩니다. % 또는 픽셀 단위</li> <li> <strong>너비:</strong> 프레임의 너비를 정의하는 데 사용됩니다. % 또는 픽셀 단위</li> <li> <strong>Longdesc:</strong> 이 속성을 사용하면 프레임 내용에 대한 긴 설명이 포함된 다른 페이지를 연결할 수 있습니다.</li> </ul> <h3>HTML의 Iframe 예</h3> <p>다음은 HTML의 Iframe에 대한 몇 가지 예입니다. 이에 대한 설명은 다음과 같습니다.</p> <h4>예시 #1</h4> <p>특정 높이와 너비를 가진 iframe을 만드는 방법을 보여주는 한 가지 예를 살펴보겠습니다.</p> <p><strong>코드:</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here, we are showing an example of Iframe which containing specific Height and width in pixels format</p> <iframe src="C:\Users\Sonali\Desktop\HTML block elements.html" height="300" width="300"></iframe> </body> </html></pre> <p><strong>출력:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543929564512.png" alt="HTML의 iframe" ></p> <h4>예시 #2</h4> <p>특정 높이와 너비를 가진 iframe을 만드는 방법을 보여주는 또 다른 예를 살펴보겠습니다. 하지만 이 예에서는 CSS를 통해 높이와 너비를 지정합니다. 여기서 스크롤 막대가 콘텐츠 크기에 따라 조정되는 것을 볼 수 있습니다.</p> <p><strong>코드:</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here, we are showing an example of Iframe which containing specific Height and width in pixels format</p> <iframe src="C:\Users\Sonali\Desktop\HTML block elements.html" style="height:100px;width:300px;"></iframe> </body> </html></pre> <p><strong>출력:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543929679257.png" alt="HTML의 iframe" ></p> <h4>Example #3</h4> <p>Here we are considering one example in which we will add a border to the iframe by adding some extra CSS properties to show a change in the border’s size, change in the border color, etc. So we can add as much style to our iframe.</p> <p><strong>Code:</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here we are showing an example of Iframe which containing a border with some additional CSS proprties</p> <iframe src="C:\Users\Sonali\Desktop\iframe.html" style="border:3px solid Blue; height: 200px;"></iframe> </body> </html></pre> <p><strong>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543929856656.png" alt="HTML의 iframe" ></p> <h4>Example #4</h4> <p>Let’s consider another example where we will show how the target attribute opens a webpage link using an iframe.</p> <p><strong>Code:</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <body> <h2>Iframe Demo- Target for a Link</h2> <iframe height="200px" width="100%" src="C:\Users\Sonali\Desktop\iframe1.html" name="iframe1_a"></iframe> <p><a href="https://www.educba.com/courses/">EDUCBA</a></p> <p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p> </body> </html></pre> <p><strong>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543930011003.png" alt="HTML의 iframe" ></p> <p><strong>Target Output:</strong></p> <p>As shown above, for example, we can click on the target link EDUCBA so that it will open the following web page shown below.</p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543930273563.png" alt="HTML의 iframe" ></p> <h3>Conclusion</h3> <p>An iframe is an inline frame that includes another HTML document in itself. It is the most powerful HTML element for web designing. You can add content from another source. It uses different HTML attributes like Global Attributes, Event Attributes, etc.</p><p>위 내용은 HTML의 iframe의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">css</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">define</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">format</a> <a href="javascript:void(0);">include</a> <a href="javascript:void(0);">auto</a> <a href="javascript:void(0);">using</a> <a href="javascript:void(0);">Attribute</a> <a href="javascript:void(0);">Property</a> <a href="javascript:void(0);">Event</a> <a href="javascript:void(0);">function</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">border</a> <a href="javascript:void(0);">iframe</a><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="HTML 텍스트 장식" href="http://m.php.cn/ko/faq/1796600197.html">HTML 텍스트 장식</a></span><span>다음 기사：<a class="dBlack" title="HTML 텍스트 장식" href="http://m.php.cn/ko/faq/1796600200.html">HTML 텍스트 장식</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/348757.html" title="HTML 지식 요약" class="aBlack">HTML 지식 요약</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348804.html" title="HTML을 빨리 배우는 방법" class="aBlack">HTML을 빨리 배우는 방법</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348873.html" title="html xhtml xml의 차이점" class="aBlack">html xhtml xml의 차이점</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348884.html" title="src와 href 속성의 차이점" class="aBlack">src와 href 속성의 차이점</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348902.html" title="HTML5 및 CSS 대체 사용 정보" class="aBlack">HTML5 및 CSS 대체 사용 정보</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><p>집</p></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><p>강의</p></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/ko/login"><b class="icon5"></b><p>나의</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ko/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><span>집</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><span>강의</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/article.html"><b class="icon3"></b><span>기사</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/dic.html"><b class="icon6"></b><span>사전</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course/type/99.html"><b class="icon7"></b><span>수동</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/xiazai/"><b class="icon8"></b><span>다운로드</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/faq/zt" title="주제"><b class="icon12"></b><span>주제</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ko/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai" >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/dic.html" >사전</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>