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

HTML 태그에서 표시할 페이지의 HTML 콘텐츠를 지정하는 방법</h1> <div class="ad4"> <script language='javascript' src='/ad/w.js'></script> </div> <article class="article"> <p><iframe> 요소 안에 표시할 페이지의 HTML 콘텐츠를 직접 지정하려면 <strong>srcdoc</strong> 속성을 사용하면 됩니다. 이 속성에 작성한 HTML 코드가 외부 파일 없이도 프레임 내부에 바로 렌더링되기 때문에, 간단한 콘텐츠나 동적으로 생성한 마크업을 삽입할 때 특히 유용합니다.</p> <h2>사용 예제</h2> <p>아래 코드는 srcdoc 속성을 활용해 iframe 내부에 제목을 표시하는 기본적인 예제입니다.</p> <pre class="prettyprint notranslate"><!DOCTYPE html> <html> <body> <iframe srcdoc = "<h2>Tutorialspoint</h2>" src = "new.html"> <p>브라우저가 iframe을 지원하지 않습니다.</p> </iframe> </body> </html></pre> <h2>참고 사항</h2> <p>위 예제에서처럼 <strong>srcdoc</strong> 속성과 <strong>src</strong> 속성을 함께 사용할 수 있습니다. 이 경우 srcdoc 속성이 우선 적용되며, srcdoc을 지원하지 않는 구형 브라우저에서는 src 속성에 지정된 new.html이 대신 로드됩니다. 또한 iframe 태그 사이에 작성한 문구는 iframe 자체를 지원하지 않는 아주 오래된 브라우저에서만 표시되는 대체(fallback) 콘텐츠입니다.</p> </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/hf251z/1002064156.html' >HTML 순서 있는 목록(ol)의 시작 값 설정 방법 – start 속성 완벽 가이드</a> <a class='LinkNextArticle' href='https://kr.wsxdn.com/bz024t/hf251z/1002064158.html' >HTML에서 사용자가 텍스트를 붙여넣을 때 스크립트 실행하기 – onpaste 이벤트 활용법</a> </div> </section> <aside class="box-r box4-r"> <h3>HTML</h3> <ul> <li> <a href="https://kr.wsxdn.com/bz024t/ig252a/1002039058.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="jQuery html() 메서드 사용법 완벽 가이드: 문법부터 실전 예제까지 ">jQuery html() 메서드 사용법 완벽 가이드: 문법부터 실전 예제까지</p> </a> </li><li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002054542.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML meta 태그 완벽 가이드: 기본 개념부터 SEO 활용법까지 ">HTML meta 태그 완벽 가이드: 기본 개념부터 SEO 활용법까지</p> </a> </li><li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002063931.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML5에서 문서의 주요 콘텐츠를 표시하는 방법 ">HTML5에서 문서의 주요 콘텐츠를 표시하는 방법</p> </a> </li><li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002063976.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML 페이지 로드 시 요소에 자동으로 포커스 지정하기 – autofocus 속성 완벽 가이드 ">HTML 페이지 로드 시 요소에 자동으로 포커스 지정하기 – autofocus 속성 완벽 가이드</p> </a> </li><li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002063991.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML 페이지 로드 시 input 요소를 미리 선택 상태로 만드는 방법 (checked 속성) ">HTML 페이지 로드 시 input 요소를 미리 선택 상태로 만드는 방법 (checked 속성)</p> </a> </li> </ul> <h3 class="h3-2">컴퓨터</h3> <ul> <li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002064008.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML lang 속성으로 다국어 콘텐츠 추가하는 방법 ">HTML lang 속성으로 다국어 콘텐츠 추가하는 방법</p> </a> </li> <li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002064105.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML에서 객체가 사용할 리소스의 URL을 지정하는 방법 ">HTML에서 객체가 사용할 리소스의 URL을 지정하는 방법</p> </a> </li> <li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002064107.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML에서 텍스트 트랙 종류 지정하기 – kind 속성 사용법과 예제 ">HTML에서 텍스트 트랙 종류 지정하기 – kind 속성 사용법과 예제</p> </a> </li> <li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002064124.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/1002064140.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML에서 요소를 읽기 전용(readonly)으로 지정하는 방법 ">HTML에서 요소를 읽기 전용(readonly)으로 지정하는 방법</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>