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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== HTML <Iframe> The inline Frame element======
<WRAP left notice 80%>
  * description : HTML <Iframe> The inline Frame element
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-06-16 Wed
</WRAP>
<WRAP clear></WRAP>
\\
=====The source of the article===== 
[[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe|<iframe>: The Inline Frame element]]\\
\\
%%<iframe> HTML%% 요소는 **중첩된 접속 환경 (브라우징 컨텍스트, a nested browsing context)**을 나타내며,\\ 
다른 %%HTML%% 페이지를 현재 페이지에 포함 시킵니다(끼어 넣습니다)\\

=====Ref=====
[[https://developer.mozilla.org/en-US/docs/Glossary/Browsing_context|Browsing context]]\\
브라우징 컨텍스트는 브라우저가 문서를 표시하는 환경입니다. 최신 브라우저에서 브라우징 컨텍스트는 일반적으로 탭(a tab)이지만,\\
윈도우(window) 또는 프레임 즉, //iframe//과 같이 페이지의 일부분일 수도 있습니다.\\
\\
각 브라우징 컨텍스트에는 특정 출처, 활성 문서의 출처 및 표시된 모든 문서를 기억하는 이력(history)이 순서대로 있습니다.\\
\\
브라우징 컨텍스트 간의 통신은 심각하게 제한됩니다. 동일한 출처의 브라우징 컨텍스트 사이에서 BroadcastChannel을 열고 사용할 수 있습니다.\\

====Example====
<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>
    <style>
        iframe {
            border-right: 1px solid crimson;
            width: 100%;
        }
        .output {
            background: lightblue;
        }
    </style>
</head>
<body>
    
    <!-- fullscreen -->
    <!--
    <iframe id="inlineFrameExample" 
            title="Inline Frame Example" 
            width = '1300' 
            height = "1300" 
            src="https://www.openstreetmap.org/export/embed.html?
            bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&
            layer=mapnik" allowfullscreen>
    </iframe> -->

    <iframe id="inlineFrameExample" 
            title="Inline Frame Example" 
            width = '300' 
            height = "200" 
            src="https://www.openstreetmap.org/export/embed.html 
            bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
    </iframe>
</body>
</html>
</code>

\\
포함된 각 브라우징 컨텍스트에는 고유한 세션 기록과 문서가 있습니다. 다른 브라우징 컨텍스트들을 포함하는 브라우징 컨텍스트를\\ 
상위(부모) 브라우징 컨텍스트 이라고 합니다. 부모가 없는 컨텍스트인 최상위 브라우징 컨텍스트는 일반적으로 Window 객체로 표시되는 브라우저 윈도우 입니다.\\
\\
각 브라우징 컨텍스트는 완전한 문서 환경이므로 페이지의 모든 <iframe>에는 증가된 메모리 및 기타 컴퓨팅 리소스가 필요합니다.\\ 
이론적으로는 원하는 만큼 <iframe>을 사용할 수 있지만 성능 문제를 확인하십시오.\\


=====아이프레임(iframe)과 활용=====
[[https://www.youtube.com/watch?v=uIemFWzxk0w|아이프레임(iframe)과 활용 by 리베햐얀]]
<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>
    <style>
        iframe {
            width: 100%;
            height: 800px;
        }
    </style>
</head>
<body>
    <a href="https://www.youtube.com/" target="site">11번가 바로가기</a>
    <br><br><br>
    <iframe src="http://dbcut.com" name="site" frameborder="0"></iframe>
    <!-- a 링크와 iframe의 name값을 동일하게 하여  11번가 바로가기를 클릭하면 iframe 안에 11번가 사이트가 나타난다. 
        하지만 iframe을 금지하는 사이트가 많아 작동하지 않음 -->
    <!-- Refused to display 'https://11st.co.kr/' in a frame because it set 'X-Frame-Options' to 'deny'. -->

</body>
</html>
</code>


======iframe 유튜브 비디오 반응형 구현======
[[https://www.youtube.com/watch?v=nsYwSbohQwQ|iframe 유튜브 비디오 반응형 구현하는 2가지 방법 by Rock's Easyweb]]\\
<iframe>을 %%CSS%%와 %%script%%로 제어하는 방법\\

<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>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
        }

        .container iframe {
            width: 100%;
        }
        .responsive-box {
            padding:56.25% 0 0 0;
            position:relative;
        }
        .target {
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            border: 0;
        }
    </style>
</head>
<body>
    <h1>iframe responsive</h1>
    <hr>
    <main class="container">
        <h2>responsive youtube</h2>

        <hr>
        <h2>youtube</h2>

        <div class="responsive-box">
            <iframe class="target" src="https://www.youtube.com/embed/3LiztfE1X7E?controls=0" 
            title="YouTube video player" 
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <hr> 

        <h2>vimeo</h2>
        <div class="responsive-box">
            <iframe class="target" src="https://player.vimeo.com/video/319221461?title=0&byline=0&portrait=0" 
            allow="autoplay; fullscreen; picture-in-picture" 
            allowfullscreen></iframe>
        </div>

        <hr>
        <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>
        </div>
        
    </main>
    <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>
        $(".fitvids-wrap").fitVids();  
    </script>
</body>
</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=====
[[https://code.jquery.com/jQuery CDN - Latest Stable Versions]]\\
\\
[[http://fitvidsjs.com/FitVids.js]]\\
[[https://github.com/davatron5000/FitVids.js|FitVids.js]] - 사용법 숙지 필요\\
\\
[[https://vimeo.com/ko/|vimeo]\\
Hint : 선택한 동영상 화면에서 종이비행기 아이콘(공유) 클릭 > 팝업 - 옵션 표시 - 반응형(Responsive) 또는 고정형(Fixed Size) 선택 - 임베드에서 코드 복사 및 사용 >\\ 












{{tag>오션 HTML iframe }}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
