HTML 정리/5주차 [HTML 기초] 5_9(iframe) 아인지우개 2023. 5. 18. 결과 iframe 인라인 프레임 만들기 - iframe 인라인 프레임 만들기 브라우저가 iframe 태그를 지원하지 않습니다. <!-- iframe 태그를 지원하지 않는 브라우저에서 보이는 문구 --> <div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-20b653258cd62a1a68bce85d28f39435a12fe781/static/script/common.js"></script> <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"6340225-45","customProps":{"userId":"0","blogId":"6340225","entryId":"45","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"45","entryTitle":"[HTML 기초] 5_9(iframe)","entryType":"POST","categoryName":"HTML 정리/5주차","categoryId":"1185615","serviceCategoryName":null,"serviceCategoryId":null,"author":"4078822","authorNickname":"아인지우개","blogNmae":"머리가 하얘지는 끄적끄적 노트","image":"kage@bzhPa8/btsgkJJOeHo/XD5jtGlRWpWY9WWIZPv571","plink":"/45","tags":["HTML","iframe"]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null","thirdProvideAgree":null}</script> <script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.7/index.js"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.7/polyfills-legacy.js" nomodule="true" defer="true"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.7/index-legacy.js" nomodule="true" defer="true"></script> </body> </html></div> <!-- System - START --> <!-- System - END --> <div class="container_postbtn #post_button_group"> <div class="postbtn_like"><script>window.ReactionButtonType = 'reaction'; window.ReactionApiUrl = '//ain-jiugae.tistory.com/reaction'; window.ReactionReqBody = { entryId: 45 }</script> <div class="wrap_btn" id="reaction-45" data-tistory-react-app="Reaction"></div><div class="wrap_btn wrap_btn_share"><button type="button" class="btn_post sns_btn btn_share" aria-expanded="false" data-entry-id="45" data-thumbnail-url="https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbzhPa8%2FbtsgkJJOeHo%2FAAAAAAAAAAAAAAAAAAAAAFJbB6UVraFrjDhuRxpj1lzajwAtjyIr6qOARRQW2I71%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1782831599%26allow_ip%3D%26allow_referer%3D%26signature%3D48Ef6eZkzSrOby8bQxq3BchXAjU%253D" data-title="[HTML 기초] 5_9(iframe)" data-description="인라인 프레임 만들기 - iframe인라인 프레임 만들기 브라우저가 iframe 태그를 지원하지 않습니다." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스" data-profile-image="https://tistory1.daumcdn.net/tistory/6340225/attach/8f007d5757c649cea23dd96ca164224b" data-profile-name="아인지우개" data-pc-url="https://ain-jiugae.tistory.com/45" data-relative-pc-url="/45" data-blog-title="머리가 하얘지는 끄적끄적 노트"><span class="ico_postbtn ico_share">공유하기</span></button> <div class="layer_post" id="tistorySnsLayer"></div> </div><div class="wrap_btn wrap_btn_etc" data-entry-id="45" data-entry-visibility="public" data-category-visibility="public"><button type="button" class="btn_post btn_etc2" aria-expanded="false"><span class="ico_postbtn ico_etc">게시글 관리</span></button> <div class="layer_post" id="tistoryEtcLayer"></div> </div></div> <button type="button" class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="6340225" data-url="https://ain-jiugae.tistory.com/45" data-device="web_pc" data-tiara-action-name="구독 버튼_클릭"><em class="txt_state"></em><strong class="txt_tool_id">머리가 하얘지는 끄적끄적 노트</strong><span class="img_common_tistory ico_check_type1"></span></button><div class="postbtn_ccl" data-ccl-type="2" data-ccl-derive="1"> <a href="https://creativecommons.org/licenses/by/4.0/deed.ko" target="_blank" class="link_ccl" rel="license"> <span class="bundle_ccl"> <span class="ico_postbtn ico_ccl1">저작자표시</span> </span> <span class="screen_out">(새창열림)</span> </a> </div> <!-- <rdf:RDF xmlns="https://web.resource.org/cc/" xmlns:dc="https://purl.org/dc/elements/1.1/" xmlns:rdf="https://www.w3.org/1999/02/22-rdf-syntax-ns#"> <Work rdf:about=""> <license rdf:resource="https://creativecommons.org/licenses/by/4.0/deed.ko" /> </Work> <License rdf:about="https://creativecommons.org/licenses/by/4.0/deed.ko"> <permits rdf:resource="https://web.resource.org/cc/Reproduction"/> <permits rdf:resource="https://web.resource.org/cc/Distribution"/> <requires rdf:resource="https://web.resource.org/cc/Notice"/> <requires rdf:resource="https://web.resource.org/cc/Attribution"/> <permits rdf:resource="https://web.resource.org/cc/DerivativeWorks"/> </License> </rdf:RDF> --> <div data-tistory-react-app="SupportButton"></div> </div> <!-- PostListinCategory - START --> <div class="another_category another_category_color_gray"> <h4>'<a href="/category/HTML%20%EC%A0%95%EB%A6%AC">HTML 정리</a> > <a href="/category/HTML%20%EC%A0%95%EB%A6%AC/5%EC%A3%BC%EC%B0%A8">5주차</a>' 카테고리의 다른 글</h4> <table> <tr> <th><a href="/43">[HTML 기초] 5_8(테이블 중첩)</a> <span>(0)</span></th> <td>2023.05.18</td> </tr> <tr> <th><a href="/42">[HTML 기초] 5_7(colgroup)</a> <span>(0)</span></th> <td>2023.05.18</td> </tr> <tr> <th><a href="/41">[HTML 기초] 5_6(colgroup & col)</a> <span>(0)</span></th> <td>2023.05.18</td> </tr> <tr> <th><a href="/40">[HTML 기초] 5_5(행 그룹으로 묶기)</a> <span>(0)</span></th> <td>2023.05.18</td> </tr> <tr> <th><a href="/39">[HTML 기초] 5_4(캡션 달기)</a> <span>(0)</span></th> <td>2023.05.18</td> </tr> </table> </div> <!-- PostListinCategory - END --> </div> <div class="related-articles"> <h2>'HTML 정리/5주차' 관련글</h2> <ul> <li> <a href="/43?category=1185615"> <span class="thum"> <img src="//i1.daumcdn.net/thumb/C264x200/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FGy1C9%2FbtsgmEAJkhB%2FAAAAAAAAAAAAAAAAAAAAAHjiFWxru3empJvdoORGGJ_AA6MPF6Bc1IW8L-e1sHet%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1782831599%26allow_ip%3D%26allow_referer%3D%26signature%3DPc0B9IgpDkACd80U1328EFMEsIE%253D" alt=""> </span> <span class="title">[HTML 기초] 5_8(테이블 중첩)</span> </a> </li> <li> <a href="/42?category=1185615"> <span class="thum"> <img src="//i1.daumcdn.net/thumb/C264x200/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbrEEh4%2FbtsgkJC3UwE%2FAAAAAAAAAAAAAAAAAAAAAC5b7kXldJmoY47J3SyMEhi-S85UXq7wzmjGBUoeZIlj%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1782831599%26allow_ip%3D%26allow_referer%3D%26signature%3DkwzPJDSNXxxwgPreI00cwbbjEPo%253D" alt=""> </span> <span class="title">[HTML 기초] 5_7(colgroup)</span> </a> </li> <li> <a href="/41?category=1185615"> <span class="thum"> <img src="//i1.daumcdn.net/thumb/C264x200/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fbhy2dU%2FbtsglOQ86NM%2FAAAAAAAAAAAAAAAAAAAAAABk46EAxphmX7GeRUDMPoI5IvAJze12cekNGUwLQUsN%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1782831599%26allow_ip%3D%26allow_referer%3D%26signature%3DRA7w8nj0a8XrRvqDNn%252B%252BSFA8aOk%253D" alt=""> </span> <span class="title">[HTML 기초] 5_6(colgroup & col)</span> </a> </li> <li> <a href="/40?category=1185615"> <span class="thum"> <img src="//i1.daumcdn.net/thumb/C264x200/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbxoqJ4%2FbtsglODyMhF%2FAAAAAAAAAAAAAAAAAAAAACNjKOXnvJ5Wszqe1zuRVVvhDF6FzoQhiNw8vVh-y_7o%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1782831599%26allow_ip%3D%26allow_referer%3D%26signature%3Dz1jGy2THtwXqvVFtYtjHSG0EMHQ%253D" alt=""> </span> <span class="title">[HTML 기초] 5_5(행 그룹으로 묶기)</span> </a> </li> </ul> </div> <div data-tistory-react-app="Namecard"></div> </div> <div></div> </article> </div><!-- "section .inner" --> </section> <div id="wrap_sidebar2" class="inline-sidebar"> <div class="inner"> <!-- 최근에 올라온 글 --> <div class="box_aside"> <div class="tit_aside">Recent Posts</div> <ul class="list_board recent-posts"> </ul> </div> <!-- 인기 글 --> <div class="box_aside"> <div class="tit_aside">Popular Posts</div> <ul class="list_board recent-posts"> </ul> </div> <!-- 태그 클라우드 --> <div class="box_aside box_tag"> <div class="tit_aside">Tags</div> <a href="https://ain-jiugae.tistory.com/tag" class="link_more">더보기</a> <ul class="list_tag"> <li><a href="/tag/%EC%9C%88%EB%8F%84%EC%9A%B01.0" class="link_tag cloud5">윈도우1.0</a></li> <li><a href="/tag/img%EB%86%92%EC%9D%B4" class="link_tag cloud5">img높이</a></li> <li><a href="/tag/img%EB%84%88%EB%B9%84" class="link_tag cloud5">img너비</a></li> <li><a href="/tag/a%ED%83%9C%EA%B7%B8" class="link_tag cloud4">a태그</a></li> <li><a href="/tag/%ED%98%BC%ED%95%A9%EC%A4%91%EC%B2%A9" class="link_tag cloud5">혼합중첩</a></li> <li><a href="/tag/%EC%9C%88%EB%8F%84%EC%9A%B0" class="link_tag cloud4">윈도우</a></li> <li><a href="/tag/select%ED%83%9C%EA%B7%B8" class="link_tag cloud5">select태그</a></li> <li><a href="/tag/div%ED%83%9C%EA%B7%B8" class="link_tag cloud5">div태그</a></li> <li><a href="/tag/%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%AA%A9%EB%A1%9D" class="link_tag cloud5">데이터목록</a></li> <li><a href="/tag/th%ED%83%9C%EA%B7%B8" class="link_tag cloud5">th태그</a></li> <li><a href="/tag/hn%ED%83%9C%EA%B7%B8" class="link_tag cloud5">hn태그</a></li> <li><a href="/tag/HTML" class="link_tag cloud1">HTML</a></li> <li><a href="/tag/pre%ED%83%9C%EA%B7%B8" class="link_tag cloud5">pre태그</a></li> <li><a href="/tag/%EB%AC%B8%EB%8B%A8%EA%B5%AC%EC%84%B1%ED%83%9C%EA%B7%B8" class="link_tag cloud5">문단구성태그</a></li> <li><a href="/tag/%EC%9A%B4%EC%98%81%EC%B2%B4%EC%A0%9C" class="link_tag cloud4">운영체제</a></li> <li><a href="/tag/%ED%85%8C%EC%9D%B4%EB%B8%94%EC%A4%91%EC%B2%A9" class="link_tag cloud5">테이블중첩</a></li> <li><a href="/tag/colgroup" class="link_tag cloud4">colgroup</a></li> <li><a href="/tag/%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%EC%97%B0%EA%B2%B0" class="link_tag cloud5">웹사이트연결</a></li> <li><a href="/tag/buttom" class="link_tag cloud5">buttom</a></li> <li><a href="/tag/optgroup" class="link_tag cloud5">optgroup</a></li> <li><a href="/tag/img_alt" class="link_tag cloud5">img_alt</a></li> <li><a href="/tag/IMG%ED%83%9C%EA%B7%B8" class="link_tag cloud5">IMG태그</a></li> <li><a href="/tag/hr%ED%83%9C%EA%B7%B8" class="link_tag cloud5">hr태그</a></li> <li><a href="/tag/datalist" class="link_tag cloud5">datalist</a></li> <li><a href="/tag/ul%EC%A4%91%EC%B2%A9" class="link_tag cloud5">ul중첩</a></li> <li><a href="/tag/colspawn" class="link_tag cloud5">colspawn</a></li> <li><a href="/tag/%EC%82%AC%EC%9D%B4%EB%B2%84%EA%B0%80%EB%94%94%EC%96%B8%EC%A6%88" class="link_tag cloud4">사이버가디언즈</a></li> <li><a href="/tag/%ED%85%8D%EC%8A%A4%ED%8A%B8%EA%BE%B8%EB%AF%B8%EA%B8%B0" class="link_tag cloud5">텍스트꾸미기</a></li> <li><a href="/tag/%EB%AF%B8%EB%94%94%EC%96%B4%EC%82%BD%EC%9E%85" class="link_tag cloud5">미디어삽입</a></li> <li><a href="/tag/ol%EB%A7%88%EC%BB%A4%EB%B3%80%EA%B2%BD" class="link_tag cloud5">ol마커변경</a></li> </ul> </div> <!-- 최근에 달린 댓글 --> <div class="box_aside"> <div class="tit_aside">Recent Comments</div> <ul class="list_board"> </ul> </div> <hr class="clear"/> </div> </div><!-- ".inline-sidebar" --> </main> <hr/> <footer id="footer"> <div class="inner"> <div class="copyright"> <div class="admin"> <a href="https://ain-jiugae.tistory.com/manage">관리자</a> <a href="https://ain-jiugae.tistory.com/manage/newpost">글쓰기</a> </div> <div class="darkmode"> <div class="inner"> <input type="radio" name="toggle" id="toggle-radio-light" checked><label for="toggle-radio-light" class="tolight"><i class="fas fa-sun tolight"></i></label> <input type="radio" name="toggle" id="toggle-radio-dark"><label for="toggle-radio-dark" class="todark"><i class="fas fa-moon todark"></i></label> <div class="darkmode-bg"></div> </div> </div> <div class="author"> <a href="https://blogpack.tistory.com">Designed by 어포스트</a> </div> </div> </div> </footer> <a href="#top" class="btn-top hideanim"></a> <div id="progressbar" class="progressbar"><div class="progress"></div></div> </div><!-- ".inner" --> </div><!-- "#wrap" --> <div class="#menubar menu_toolbar "> <h2 class="screen_out">티스토리툴바</h2> </div> <div class="#menubar menu_toolbar "></div> <div class="layer_tooltip"> <div class="inner_layer_tooltip"> <p class="desc_g"></p> </div> </div> <div id="editEntry" style="position:absolute;width:1px;height:1px;left:-100px;top:-100px"></div> <!-- CallBack - START --> <script> (function () { var blogTitle = '머리가 하얘지는 끄적끄적 노트'; (function () { function isShortContents () { return window.getSelection().toString().length < 30; } function isCommentLink (elementID) { return elementID === 'commentLinkClipboardInput' } function copyWithSource (event) { if (isShortContents() || isCommentLink(event.target.id)) { return; } var range = window.getSelection().getRangeAt(0); var contents = range.cloneContents(); var temp = document.createElement('div'); temp.appendChild(contents); var url = document.location.href; var decodedUrl = decodeURI(url); var postfix = ' [' + blogTitle + ':티스토리]'; event.clipboardData.setData('text/plain', temp.innerText + '\n출처: ' + decodedUrl + postfix); event.clipboardData.setData('text/html', '<pre data-ke-type="codeblock">' + temp.innerHTML + '</pre>' + '출처: <a href="' + url + '">' + decodedUrl + '</a>' + postfix); event.preventDefault(); } document.addEventListener('copy', copyWithSource); })() })()</script> <!-- CallBack - END --> <!-- DragSearchHandler - START --> <script src="//search1.daumcdn.net/search/statics/common/js/fe/search-library-workspace/drag-search/1.0.2/main.js"></script> <!-- DragSearchHandler - END --> <!-- PreventCopyContents - START --> <script type="text/javascript">document.oncontextmenu = new Function ('return false'); document.ondragstart = new Function ('return false'); document.onselectstart = new Function ('return false'); document.body.style.MozUserSelect = 'none';</script> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-20b653258cd62a1a68bce85d28f39435a12fe781/static/plugin/PreventCopyContents/script.js"></script> <!-- PreventCopyContents - END --> <!-- SyntaxHighlight - START --> <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/styles/vs.min.css" rel="stylesheet"/><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/highlight.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/delphi.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/php.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/python.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/r.min.js" defer></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/ruby.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/scala.min.js" defer></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/shell.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/sql.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/swift.min.js" defer></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/typescript.min.js" defer></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/vbnet.min.js" defer></script> <script>hljs.initHighlightingOnLoad();</script> <!-- SyntaxHighlight - END --> </body> </html>
결과