11. 내부 프레임 <iframe>





설명


iframe은 내부 프레임(inline frame)이라는 의미로, HTML문서의 특정 위치에 다른 HTML문서를 불러올 수 있는 태그입니다.

현재 웹 문서에 또 다른 웹 문서를 삽입할 수 있습니다.

만약 <iframe>을 지원하지 않는 브라우저에서 처리하려면, <iframe>과 </iframe>사이에 텍스트를 추가해야 합니다. 


속성


 속성

 값 

 설명 

HTML5 지원 

 name

 text 

 iframe의 이름 지정

 sandbox

 allow-forms/allow-pointer-lock/

 allow-popups/allow-same-origin/

 allow-scripts/allow-top-navigation

 iframe의 콘텐츠에 제한 설정

 src

 URL 

 iframe에서 표시할 문서 URL 지정

 srcdoc

 HTML_code  

 iframe에서 표시할 HTML콘텐츠 지정

 width 

 pixels

 iframe의 너비 지정

 height

 pixels 

 iframe의 높이 지정

 HTML5 미지원

 align

 left/right/top/middle/bottom 

 페이지에서 iframe의 정렬 지정

 frameborder 

 1/0

 iframe의 테두리 지정

 (1:테두리 있음/0:테두리 없음)

 longdesc 

 URL 

 iframe의 설명을 갖는 URL 지정

 marginheight 

 pixels 

 iframe의 위아래 여백 지정

 marginwidth 

 pixels 

 iframe의 좌우 여백 지정

 scrolling 

 yes/no/auto 

 iframe에서 스크롤바를 표시할지 지정

 (yes:표시/no:표시안함/auto:자동)



예제


1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <title>iframe</title>
        <meta charset="utf-8">
    </head>
    <body>
        <p>현재 페이지에 Daum 사이트를 iframe으로 삽입</p>
        <iframe src="http://www.daum.net/" width="500" height="300"></iframe>
    </body>
</html>
 
cs

* width와 height 속성의 값은 기본적으로 픽셀 단위로 지정하고, 백분율(%)로 지정할 수도 있습니다.


실행 결과





'프로그래밍 > 웹표준' 카테고리의 다른 글

13. 양식 만들기 <form>  (0) 2017.02.27
12. <table>태그로 표 만들기  (0) 2017.02.03
10. 멀티미디어 삽입하기  (0) 2017.01.20
9. 이미지맵 설정하기 <map>, <area>  (0) 2017.01.17
8. 문서 연결 태그 <a>태그  (0) 2017.01.15
더보기

댓글,

violet quartz