본문으로 바로가기

HTML tag iframe

category 개발언어/HTML 2016. 9. 22. 15:32

아이프레임이란 :


내부 프레임(inline frame)이라는 의미로  HTML문서내에서 다른 HTML문서를 보여주고자 할때 사용합니다.
<img> 태그를 사용하듯 문서내의 원하는 위치에 삽입할 수 있습니다.

 

src 속성:
 
src 속성값에는 포함할 HTML 문서의 URL을 넣습니다.

<iframe src=”http://www.naver.com”>

width와 height 속성 예:

<iframe src=”http://www.naver.com” width=”600″ height=”300″>
<iframe src=”http://www.naver.com” width=”60%” height=”300″>

frameborder 속성

inline frame의 경계선의 두께를 지정할 수 있습니다.

<iframe src=”http://www.homejjang.com” frameborder=”0″ width=”600″ height=”300″>

marginwidth와 marginheight

inline frame의 여백을 지정할 수 있습니다.

<iframe src=”http://www.homejjang.com” frameborder=”0″ width=”600″ height=”300″ marginwidth=”0″marginheight=”0″>

scrolling

inline frame내에서 스크롤바 사용여부를 지정할 수 있습니다.

<iframe src=”http://www.homejjang.com” frameborder=”0″ width=”600″ height=”300″ marginwidth=”0″ marginheight=”0″ scrolling=”yes”>

scrolling 값을 no로 지정하면 스크롤바가 생기지 않습니다.

예제)

 

iframe에 사용하는 속성(attribute)은 여러 가지가 있는데, 그 중 자주 쓰이는 것은 width, height입니다. 테두리 등 모양은 CSS로 꾸밉니다.

다음은 width와 height로 크기를 정하고, CSS로 테두리를 꾸미는 간단한 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>HTML Tag | iframe</title>
    <style>
      .if1 {
        width: 500px;
        height: auto;
        border: 1px solid #bcbcbc;
      }
    </style>
  </head>
  <body>
    <h1>iframe - basic</h1>
    <iframe src="iframe-02.html"></iframe>
    <h1>iframe - fixed width, height</h1>
    <iframe src="iframe-02.html" width="500" height="100"></iframe>
    <h1>iframe - auto height</h1>
    <iframe src="iframe-02.html" width="500" height="auto"></iframe>
    <h1>iframe - styling</h1>
    <iframe src="iframe-02.html" class="if1"></iframe>
  </body>
</html>


'개발언어 > HTML' 카테고리의 다른 글

HTML button Tag  (0) 2016.10.21
HTML Tag <details>  (0) 2016.10.17
HTML5 Audio Tag  (0) 2016.09.09
HTML video 태그(HTML5)  (0) 2016.09.09
HTML style Tag 사용법  (0) 2016.07.05