Computer >> 컴퓨터 > >> 프로그래밍 >> JavaScript

HTML 태그로 인라인 프레임 만드는 방법</h1> <div class="ad4"> <script language='javascript' src='/ad/w.js'></script> </div> <article class="article"> <h2>HTML <iframe> 태그란?</h2> <p><iframe>(inline frame) 태그는 현재 문서 안에 또 다른 문서를 삽입할 때 사용하는 인라인 프레임을 정의합니다. 이를 활용하면 외부 웹페이지, 지도, 동영상 등 다양한 콘텐츠를 하나의 페이지에 손쉽게 포함시킬 수 있습니다.</p> <p>인라인 프레임은 몇 줄의 코드만으로 만들 수 있어 매우 간단하며, HTML 문서 어디에나 배치할 수 있다는 장점이 있습니다.</p> <h2><iframe> 태그의 주요 속성</h2> <p><iframe> 태그에는 아래와 같은 주요 속성이 있습니다.</p> <table class="table table-bordered"> <thead> <tr><th style="text-align:center;">속성</th><th style="text-align:center;">설명</th></tr> </thead> <tbody> <tr><td style="text-align:center;">height</td><td><iframe>의 높이를 픽셀 단위로 지정합니다.</td></tr> <tr><td style="text-align:center;">name</td><td><iframe>의 이름을 지정합니다. 링크나 스크립트에서 특정 프레임을 참조할 때 유용합니다.</td></tr> <tr><td style="text-align:center;">src</td><td>프레임 안에 삽입할 문서의 URL을 지정합니다.</td></tr> <tr><td style="text-align:center;">width</td><td><iframe>의 너비를 픽셀 단위로 지정합니다.</td></tr> </tbody> </table> <h2>사용 예제</h2> <p>아래 코드를 실행하면 HTML 페이지 안에 인라인 프레임을 만들어 외부 문서를 표시할 수 있습니다.</p> <pre class="prettyprint notranslate"><!DOCTYPE html> <html> <head> <title>HTML iframe Tag</title> </head> <body> <iframe src="https://www.qries.com" width="100%"> </iframe> </body> </html></pre> <h3>참고: 자주 함께 사용되는 추가 속성</h3> <ul> <li><strong>sandbox</strong>: 삽입된 콘텐츠의 권한을 제한하여 보안을 강화합니다.</li> <li><strong>loading="lazy"</strong>: 화면에 보일 때까지 로딩을 지연시켜 페이지 성능을 개선합니다.</li> <li><strong>srcdoc</strong>: 외부 파일 대신 직접 작성한 HTML 코드를 프레임 안에 렌더링합니다.</li> </ul> <br> </article> <div class="ad5"> <script language='javascript' src='/ad/w.js'></script> </div> <div id="turn-page" class="text-over"> <a class='LinkPrevArticle' href='https://kr.wsxdn.com/bz024t/ig252a/1002055380.html' >HTML 문서의 필수 태그 완벽 정리: 웹 개발 입문자를 위한 기초 가이드</a> <a class='LinkNextArticle' href='https://kr.wsxdn.com/bz024t/ig252a/1002055382.html' >HTML <select> 요소의 기본값 설정 방법 완벽 가이드</a> </div> </section> <aside class="box-r box4-r"> <h3>JavaScript</h3> <ul> <li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002054546.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML <br> 태그 사용법: 줄바꿈 요소 제대로 활용하기 ">HTML <br> 태그 사용법: 줄바꿈 요소 제대로 활용하기</p> </a> </li><li> <a href="https://kr.wsxdn.com/bz024t/ig252a/1002054935.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML 페이지에 인라인 JavaScript 코드를 작성하는 방법 ">HTML 페이지에 인라인 JavaScript 코드를 작성하는 방법</p> </a> </li><li> <a href="https://kr.wsxdn.com/bz024t/ig252a/1002056142.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML에서 요소의 탭 순서를 지정하는 방법 완벽 가이드 ">HTML에서 요소의 탭 순서를 지정하는 방법 완벽 가이드</p> </a> </li><li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002063799.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML <samp> 태그로 프로그램 출력 결과를 표시하는 방법 ">HTML <samp> 태그로 프로그램 출력 결과를 표시하는 방법</p> </a> </li><li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002063801.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML base 태그로 웹페이지의 기본 URL을 설정하는 방법 ">HTML base 태그로 웹페이지의 기본 URL을 설정하는 방법</p> </a> </li> </ul> <h3 class="h3-2">컴퓨터</h3> <ul> <li> <a href="https://kr.wsxdn.com/bz024t/ig252a/1002055372.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML 페이지에 외부 JavaScript 파일을 포함하는 방법 ">HTML 페이지에 외부 JavaScript 파일을 포함하는 방법</p> </a> </li> <li> <a href="https://kr.wsxdn.com/bz024t/ig252a/1002055377.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML <style> 태그로 웹페이지 스타일 정의하기: 내부 CSS 완벽 가이드 ">HTML <style> 태그로 웹페이지 스타일 정의하기: 내부 CSS 완벽 가이드</p> </a> </li> <li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002064029.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML에서 인라인 하위 창(iframe)을 포함하는 방법 ">HTML에서 인라인 하위 창(iframe)을 포함하는 방법</p> </a> </li> <li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002064073.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML에서 하위 창 만드는 방법 – frame 태그 속성과 예제 총정리 ">HTML에서 하위 창 만드는 방법 – frame 태그 속성과 예제 총정리</p> </a> </li> <li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002064157.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML <iframe> 태그에서 표시할 페이지의 HTML 콘텐츠를 지정하는 방법 ">HTML <iframe> 태그에서 표시할 페이지의 HTML 콘텐츠를 지정하는 방법</p> </a> </li> </ul> </aside> </section> </div> <ul class="types box4-1 container f-center"> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ol244g/' target="_self">C 프로그래밍</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/fd245y/' target="_self">C++</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/xv246p/' target="_self">Redis</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ig247a/' target="_self">Bash 프로그래밍</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ge248y/' target="_self">Python</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/jh249b/' target="_self">Java</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/yw250q/' target="_self">데이터베이스</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/hf251z/' target="_self">HTML</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ig252a/' target="_self">JavaScript</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/qo253i/' target="_self">프로그래밍</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/vs254n/' target="_self">CSS</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/fd255x/' target="_self">Ruby</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ay256s/' target="_self">SQL</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/yw257q/' target="_self">iOS</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/wu258o/' target="_self">Android</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/nl259f/' target="_self">MongoDB</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/mk260e/' target="_self">MySQL</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ax261s/' target="_self">C#</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/bz265t/' target="_self">PHP</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/zx271r/' target="_self">SQL Server</a></li> </ul> <footer> <section class="container"> <div class="footer-msg"> <span class="container f-center"> <p class=krf>저작권 © <a href="https://kr.wsxdn.com">https://kr.wsxdn.com</a> 모든 권리 보유</p> </span> </div> </section> </footer> </body> </html>