프레임(frame)은 하나의 브라우저 화면을 여러 개의 영역으로 나누어 각각 다른 문서를 보여줄 때 사용한다. 프레임을 사용할 때는 두 종류의 문서가 필요한데, 하나는 브라우저 화면에 나타날 프레임을 지정하는 문서이고, 다른 하나는 프레임안에 보여줄 실제 내용이 들어 있는 문서이다.
HTML에서 프레임을 지정할 때 사용하는 태그는 <frameset>, <frame>, <iframe> 태그가 있다.
<frameset>태그
<frameset>태그는 프레임을 어떻게 나눌 것인가를 결정할 때 사용한다. <frameset>태그는 혼자 사용되지 않고 <frame>태그와 함께 사용되는데 <frameset>태그는 문서를 어떻게 나눌것인가를 지정하는 엘레멘트이고, <frame>태그는 나누어진 프레임에 어떤 문서를 나타나게 할 것인지를 지정하는 태그이다. <frameset>태그에서 cols속성와 rows속성을 사용하여 프레임을 구분한다. cols 속성의 값은 기본적으로 픽셀값으로 되어 있지만 퍼센트값도 가능하다. 만약, cols="50%,50%"라고 지정한다면 브라우저는 화면의 열을 둘로 나눈다.
<frameset cols="50%,*">
<frame src="http://www.daum.net/" />
<frame src="http://www.naver.com/" />
</frameset>
</html>
위 HTML의 출력결과는 아래와 같다.
중요한 점은 <frameset>태그는 <body>태그 사이에 사용할 수 없다는 점이다. 그러나 만약, <noframes>태그를 사용하여 프레임을 지원하지 않는 브라우저에서 표시할 내용을 작성한다면 <body>엘레멘트를 <noframes>태그 안에 감싸 작성하면 된다.
<html>
<frameset cols="50%,50%">
<frame src="http://www.daum.net" />
<frame src="http://www.naver.com" />
<noframes>
<body>당신의 브라우저는 프레임을 지원하지 않습니다!</body>
</noframes>
</frameset>
</html>
<iframe>태그
<iframe>은 문서안에 프레임을 포함시킬 때 사용한다. <frame>태그는 문서 전체의 프레임을 지정하지만 <iframe>은 inline 프레임으로 문서 안에서 프레임을 넣을 때 사용하며 다음과 같은 속성을 지정할 수 있다.
- align: 가로 정렬 방법
- height: 높이 지정
- width: 너비 지정
- src: 포함할 문서 지정
<html>
<body>
<p>iframe은 문서 안에서 프레임을 사용할 수 있습니다. </p>
<iframe src="http://www.daum.net" width="200px" height="200px">
<p>당신의 브라우저는 iframe을 지원하지 않습니다.<p>
</iframe>
<p>ifrmae은 문서 안에서 프레임을 사용할 수 있습니다. </p>
</body>
</html>
위 HTML의 출력 결과는 아래와 같다.
'HTML& CSS > HTML' 카테고리의 다른 글
| 입력필드의 드랍다운 리스트를 출력하는 <select>태그 (0) | 2009.07.01 |
|---|---|
| 태그 - 텍스트에어리어(textarea) (0) | 2009.07.01 |
| 태그 - 폼태그와 <input>태그 (0) | 2009.07.01 |
| 태그 - 폼 엘레멘트 (0) | 2009.07.01 |
| 태그 - 리스트 (0) | 2009.07.01 |