차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:html:html_note:iframe [2021/06/16 15:04]
emblim98 만듦
+++ wiki:html:html_note:iframe [2023/01/13 18:44] (현재)
@@ 줄 50: / 줄 50: @@
             width = '1300'
             height = "1300"
-            src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik" allowfullscreen>
+            src="https://www.openstreetmap.org/export/embed.html?
+            bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&
+            layer=mapnik" allowfullscreen>
     </iframe> -->
@@ 줄 57: / 줄 59: @@
             width = '300'
             height = "200"
-            src="https://www.openstreetmap.org/export/embed.html bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
+            src="https://www.openstreetmap.org/export/embed.html
+            bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
     </iframe>
 </body>
@@ 줄 64: / 줄 67: @@
 \\
-포함된 각 브라우징 컨텍스트에는 고유한 세션 기록과 문서가 있습니다. 다른 브라우징 컨텍스트들을 포함하는 브라우징 컨텍스트를 상위(부모) 브라우징 컨텍스트 이라고 합니다. 부모가 없는 컨텍스트인 최상위 브라우징 컨텍스트는 일반적으로 Window 객체로 표시되는 브라우저 윈도우 입니다.\\
+포함된 각 브라우징 컨텍스트에는 고유한 세션 기록과 문서가 있습니다. 다른 브라우징 컨텍스트들을 포함하는 브라우징 컨텍스트를\\
+상위(부모) 브라우징 컨텍스트 이라고 합니다. 부모가 없는 컨텍스트인 최상위 브라우징 컨텍스트는 일반적으로 Window 객체로 표시되는 브라우저 윈도우 입니다.\\
 \\
-각 브라우징 컨텍스트는 완전한 문서 환경이므로 페이지의 모든 <iframe>에는 증가된 메모리 및 기타 컴퓨팅 리소스가 필요합니다. 이론적으로는 원하는 만큼 <iframe>을 사용할 수 있지만 성능 문제를 확인하십시오.\\
+각 브라우징 컨텍스트는 완전한 문서 환경이므로 페이지의 모든 <iframe>에는 증가된 메모리 및 기타 컴퓨팅 리소스가 필요합니다.\\
+이론적으로는 원하는 만큼 <iframe>을 사용할 수 있지만 성능 문제를 확인하십시오.\\
@@ 줄 160: / 줄 165: @@
         <h2>vimeo - fitvids</h2>
         <div class="fitvids-wrap">
-            <iframe src="https://player.vimeo.com/video/319221461?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
+            <iframe src="https://player.vimeo.com/video/319221461?title=0&byline=0&portrait=0" width="640" height="360"
+            frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
         </div>
     </main>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
+    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
     <script src="FitVids.js-master/jquery.fitvids.js"></script>
     <script>
@@ 줄 172: / 줄 179: @@
 </html>
 </code>
+=====Inflearn CodingWorks=====
+<code html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>iframe 만들기</title>
+    <style>
+        /* Google Web Font */
+        @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400, 500&display=swap');
+        body {
+            font-family: 'Montserrat', sans-serif;
+        }
+        iframe {
+            width: 600px;
+            height: 400px;
+            border: none;
+        }
+    </style>
+</head>
+<body>
+    <iframe src="test.html" frameborder="0"></iframe>
+    <iframe width="560" height="315" src="https://www.youtube.com/embed/ANMJYpGZ8z0" title="YouTube video player"
+    frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    allowfullscreen></iframe>
+</body>
+</html>
+</code>
+\\
+<code html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1>Test Iframe HTML</h1>
+    <a href="https://www.inflearn.com/"  target="_parent">인프런 홈페이지 바로가기</a>
+    <!-- target 속성을 _paren로 설정하면 a링크 클릭 시 iframe을 벗어나 해당 브라우저 화면에서 전체 화면으로 표시된다.  -->
+</body>
+</html>
+</code>
 =====Ref=====

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구