iframe이란?
페이지안에 페이지를 삽입하는 방법이다. 예를들어 생활코딩 홈페이지인 opentutorials.org에는 유튜브가 삽입되어 있는데, 유튜브를 삽입하는 방법이 바로 iframe을 이용한 것이다.
문법
1 2 3 | <iframe src= "불러올 웹페이지의 URL" scrolling= "스크롤링 허용여부(yes|no|auto)" > iframe를 지원하지 않는 브라우저인 경우 대체정보를 제공 </iframe> |
- src : 불러올 페이지의 URL
-
scrolling : 아이프레임 안에서 스크롤링을 허용할 것인지를 지정
- auto : 스크롤이 필요한 경우만 스크롤 바를 노출 (기본 값)
- yes : 스크롤링 허용, 스크롤이 필요 없는 경우도 스크롤 바를 노출
- no : 스크롤 하지 않음
참고. width, height, frameborder(프레임의 테두리 사용여부) 등의 속성이 더 있지만, 디자인에 대한 부분은 CSS를 통해서 제어하는 것이 권장된다.
예제
example1.html (jsfiddle, github)
1 2 3 4 5 6 | <!DOCTYPE html> < html > < body > < iframe src = "http://opentutorials.org" width = "90%" height = "300" frameborder = "1" scrolling = "yes" ></ iframe > </ body > </ html > |
frame
하나의 화면에서 여러개의 페이지를 분할해서 보여줌
문법
1 2 3 | < frameset (cols | rows)="열 혹은 행의 크기(콤마로 구분)"> < frame src = "frame_a.htm" name = "프레임의 이름" /> </ frameset > |
예제
example2.html (github)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" < frameset cols = "40%, 60%" > < frameset rows = "25%, 75%" > < frame src = "contents_of_frame1.html" /> < frame src = "contents_of_frame2.html" /> </ frameset > < frame name = "content" src = "contents_of_frame3.html" /> < noframes > < body > < p >This frameset document contains:</ p > < ul > < li >< a href = "contents_of_frame1.html" >contents_of_frame1.html</ a ></ li > < li >< a href = "contents_of_frame2.html" >contents_of_frame1.html</ a ></ li > < li >< a href = "contents_of_frame3.html" >contents_of_frame1.html</ a ></ li > </ ul > </ body > </ noframes > </ frameset > </ html > |
contents_of_frame1.html (github)
1 2 3 4 5 6 7 8 9 10 11 12 13 | < html > < head > < style type = "text/css" > body{ background-color: red; } </ style > </ head > < body > contents_of_frame1.html< br /> </ body > </ html > |
contents_of_frame2.html (github)
1 2 3 4 5 6 7 8 9 10 11 12 13 | < html > < head > < style type = "text/css" > body{ background-color: green; } </ style > </ head > < body > contents_of_frame2.html< br /> </ body > </ html > |
contents_of_frame3.html (github)
1 2 3 4 5 6 7 8 9 10 11 12 | < html > < head > < style type = "text/css" > body{ background-color: blue; } </ style > </ head > < body > contents_of_frame3.html </ body > </ html > |