비전공자 개발일기

HTML IFrame 본문

HTML _CSS

HTML IFrame

HiroDaegu 2021. 8. 29. 18:21
728x90
SMALL
<!DOCTYPE html>

<html lang="ko">



<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>

    .iframe_container {

      border: 5px solid rgba(0,0,0,.2);

      margin: 10px 0;

      padding: 10px 20px;

    }

    .iframe_container:hover {

      border-color: rgba(0,0,0,.8)

    }

  </style>



</head>



<body>

  <main>

    <h1 id="hrefSelectorTest">HTML Iframe(Inline frame)</h1>

    <p>iframe은 다른 웹 페이지를 추가할 수 있음</p>

    <div class="iframe_container">

      <p>src: 출력될 url, width: 넓이, height: 높이(모든 요소의 스타일 속성은 동일하게 적용 가능)</p>

      <iframe src="./iframeTest/L01_html_intro.html" width="100%" height="100px">

        출력되지 않을 때....

      </iframe>

    </div>

    <div class="iframe_container">

      <p>iframe은 스타일이 적용되고 border 바꿀 수 있음(border: none -> 테두리 없음)</p>

      <iframe src="./iframeTest/L02_html_basic.html"

        style="width:100%; height: 100px; border: none;"></iframe>

    </div>

    <div class="iframe_container">

      <p>

        iframe name: 은 a 요소의 target으로 지정할 수 있음(_self, _blank, iframeName-iframe으로 이동)

      </p>

      <iframe src="./iframeTest/L03_html_attributes.html" name="targetTest" width="100%" height="100px" style="border: 1px solid blue;"></iframe>

      <p>target="targetTest" : 이동할 페이지는 L04_html_style.html <a href="./iframeTest/L04_html_style.html" target="targetTest">이동</a></p>

      <p>target="_self" : 이동할 페이지는 L04_html_style.html <a href="./iframeTest/L04_html_style.html" target="_self">이동</a></p>

      <p>target="_blank" : 이동할 페이지는 L04_html_style.html <a href="./iframeTest/L04_html_style.html" target="_blank">이동</a></p>

      <p>href="hrefSelcotorTest" : 이동할 요소 #hrefSelectorTest <a href="#hrefSelectorTest">이동</a></p>



    </div>

  </main>

</body>



</html>
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

HTML CANVAS  (0) 2021.08.31
HTML SVG  (0) 2021.08.30
HTML EMMET  (0) 2021.08.24
HTML BLOCK & INLINE  (0) 2021.08.23
HTML IMG  (0) 2021.08.22
'HTML _CSS' Related Articles more