HTML - frame & iframe
iframe(inline frame)
이름에서도 알 수 있듯이 페이지안에 페이지를 삽입하는 방식이다.
문법
<iframe src="불러올 웹페이지의 URL" scrolling="스크롤링 허용여부(yes|no|auto)">
// iframe를 지원하지 않는 브라우저인 경우 대체정보를 제공
</iframe>
- src : 불러올 페이지의 URL
- scrolling : 아이프레임 안에서 스크롤링을 허용할 것인지를 지정
auto : 스크롤이 필요한 경우만 스크롤 바를 노출 (기본 값)
yes : 스크롤링 허용, 스크롤이 필요 없는 경우도 스크롤 바를 노출
no : 스크롤 하지 않음
예
<!DOCTYPE html>
<html>
<body>
<iframe src="http://opentutorials.org" width="90%" height="300" frameborder="1" scrolling="yes"></iframe>
</body>
</html>
frame
frameset 구조하에 기술되어 페이지를 구성한다.
<frame> 태그는 <frameset> 요소에 포함되는 하나의 프레임(frame)을 정의할 때 사용한다.
<frameset> 요소에 포함된 각각의 <frame> 요소는 테두리(border)나 스크롤, 크기 재조정 가능 여부 등 서로 다른 속성값을 가질 수 있음.
문법
<frameset (cols | rows)="열 혹은 행의 크기(콤마로 구분)">
<frame src="frame_a.htm" name="프레임의 이름" />
</frameset>
예
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<frameset cols="40%, 60%">//frameset: frame을 묶어주는 단위 / cols(열): 좌우로 배치
<frameset rows="25%, 75%">//row(행): 상하로 배치
<frame src="contents_of_frame1.html" />//25%
<frame src="contents_of_frame2.html" />//75%
</frameset>
<frame name="content" src="contents_of_frame3.html" /> //name 속성에 content로 타깃을 지정할 수 있다.
<noframes>// 브라우저가 프레임을 지원하지 않는다면 noframes에 지정한 태그 출력된다.
<body>// body 위에 지정하는 frameset
<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>
<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>
에 맞는 html 기술한다.
차이점
둘의 큰 차이점은 noresize 속성이다. frame으로 구성시 생긴 창들에 경계선을 이동시켜 창 조절이 가능한 반면 iframe은 주어진 값으로 창 크기가 고정이된다.
HTML5에서는 현재 frame 과 iframe태그를 지원하지 않는다.
'HTML & CSS' 카테고리의 다른 글
| HTML - 특수문자 코드표 사이트 (0) | 2021.07.23 |
|---|---|
| CSS - position : absolute 를 이용한 div 위치 지정 (0) | 2021.07.12 |
| HTML&CSS - overflow 속성 알아보기 (0) | 2021.06.15 |
| CSS - div 요소 화면 정중앙 정렬 (0) | 2021.05.11 |
| HTML & CSS 기본 개념 (0) | 2021.03.31 |
댓글