프레임셋 [틀, Frameset, Frame, iframe] 태그

작성자 관리자
아이피 122.♡.189.33
작성일 2008.01.31 23:19

조회 3,262
목록

▷ Frameset [틀] 태그

　⊙ 태그요소

　① <frameset> ... </frameset>

Frameset은 내부에 frame과 또 다른 frameset을 포함할 수 있다.
먼저 가로로 나누어 놓고 다음 세로로 나뉘어져 있으면 다시 frameset으로 나누어 각각을 frame으로 한다.

따라서, Frameset 태그는 Table과 유사한 계층 구조를 형성하게 된다.

<html>
<head>
  <title>프레임셋</title>
</head>
  <frame> 
  <frameset>
    <frame>
    <frame>
  </frameset>
</html>


<frame> 태그는 종료태그를 사용하지 않는다.
<frame>의 갯수만큼 Html문서가 연결된다.

　⊙ 속성(Atributes)

속성	용도	사용법
src="HTML문서 URL"	프레임에 연결된 Html 문서 지정	<frameset src="abc.html">
rows="픽셀 / % / *"	프레임 셋 내부 가로 프레임 간격 설정	<frameset rows="20%,80%">
cols="픽셀 / % / *"	프레임 셋 내부 세로 프레임 간격 설정	<frameset cols="30%, 70%">
frameborder="1/0"	프레임셋 경계선 표시 유무	<frameset frameborder="0">
framespacing="픽셀 / %"	프레임셋 내부 프레임의 간격 설정	<frameset framespacing="10">
border="픽셀값"	프레임 경계선 두께 설정	<frame border="0">
bordercolor="색상값"	프레임 경계선 색상 설정	<frame bodercolor="red">
marginheight="픽셀값"	프레임 상하 여백 설정	<frame marginheight="10">
marginwidth="픽셀값"	프레임 좌우 여백 설정	<frame marginwidth="10">
noresize	프레임 크기 고정	<frame noresize>
scrolling="값"	스크롤바 유무 설정	<frame scrolling="yes / auto / no">
noframes	프레임 지원 안될 때 실행	<noframes>프레임 지원 안됩니다.</noframes>

　⊙ 프레임셋의 행과 열 설정

가.

① 폭 고정 : 300 픽셀
name="menu"

② 폭 변동 : 1*
name="main"

가로로 하나에 세로 두 부분으로 나뉘어 있다. --------------------------------------------------------------------------------------ⓐ

<frameset rows="1*", cols="300, 1*">
<frame src="a.html" name="menu" scrolling="auto" marginwidth="0" marginheight="0" noresize>
<frame src="b.html" name="main" scrolling="auto" marginwidth="0" marginheight="0">
</frameset>

※ 1* : 브라우저 크기에 따라 상대적으로 크기 변화, noresize : 브라우저 크기가 변해도 프레임폭 변화없음.

나.

① 높이 고정 : 200 픽셀
name="head"

② 높이 변동 : 1*
name="main"

가로로 두 개, 첫 번째 가로는 세로 하나, 두 번 째 가로는 세로 두개--------------------------------------------------------------------ⓑ

<frameset rows="200, 1*", cols="1*">
<frame src="c.html" name="head" scrolling="auto" marginwidth="0" marginheight="0" noresize>
<frame src="d.html" name="main" scrolling="auto" marginwidth="0" marginheight="0">
</frameset>

다.

① 높이 고정 : 200 픽셀, name="head"
② 폭 고정 : 300 픽셀 name="menu"	③ 폭, 높이 변동 : 1* name="main"

가로로 두 개, 첫 번째 가로는 세로 프레임 하나, 두 번째는 가로 하나 세로 두 개인 프레임셋
ⓑ의 가로 두 개 기본 구조의 두 번째 가로 프레임은 ⓐ의 구조를 하고 있는 프레임셋이다.
<frameset rows="200, 1*", cols="1*">
<frame src="c.html" name="head" scrolling="auto" marginwidth="0" marginheight="0" noresize>
<frameset rows="1*", cols="300, 1*"> ------------------------------------------------------------------------------------------ⓐ
<frame src="a.html" name="menu" scrolling="auto" marginwidth="0" marginheight="0" noresize>
<frame src="b.html" name="main" scrolling="auto" marginwidth="0" marginheight="0">
</frameset>
</frameset>

라.

① 폭 고정 : 300 픽셀 name="menu"	② 폭, 높이 변동 : 1* name="main"
③ 높이 고정 : 200 픽셀, name="bottom"

가로로 두 개, 첫 번째 가로는 세로 프레임 두 개인 프레임셋, 두 번째는 가로 하나 세로 프레임 한 개
ⓑ의 가로 두 개 기본 구조의 첫 번째 가로 프레임은 ⓐ의 구조를 하고 있는 프레임셋이다.
<frameset rows="1*, 200", cols="1*">
<frameset rows="1*", cols="300, 1*"> ------------------------------------------------------------------------------------------ⓐ
<frame src="a.html" name="menu" scrolling="auto" marginwidth="0" marginheight="0" noresize>
<frame src="b.html" name="main" scrolling="auto" marginwidth="0" marginheight="0">
</frameset>
<frame src="d.html" name="bottom" scrolling="auto" marginwidth="0" marginheight="0" noresize>
</frameset>

마.

① 폭 고정 : 300 픽셀 name="menu"	② 높이 고정 : 200 픽셀 name="head"
	③ 폭, 높이 변동 : 1* name="main"

가로로 한 개, 세로로 2 부분, 두 번째 세로부분은 가로로 둘로 나뉘어 있다.
ⓐ의 세로 두 개 기본 구조의 두 번째 세로 프레임은 ⓑ의 구조를 하고 있는 프레임셋이다.
<frameset rows="1*", cols="300, 1*">
<frame src="a.html" name="menu" scrolling="auto" marginwidth="0" marginheight="0" noresize>
<frameset rows="200, 1*", cols="1*"> ------------------------------------------------------------------------------------------ⓑ
<frame src="c.html" name="head" scrolling="auto" marginwidth="0" marginheight="0" noresize>
<frame src="d.html" name="main" scrolling="auto" marginwidth="0" marginheight="0">
</frameset>
</frameset>

사.

① 높이 고정 : 200 픽셀 name="head"	③ 폭 고정 : 300 픽셀 name="menu"
② 폭, 크기 변동 : 1* name="main"

가로로 한 개, 세로로 2 부분, 첫 번째 세로부분은 가로로 둘로 나뉘어 있다.
ⓐ의 세로 두 개 기본 구조의 첫 번째 세로 프레임은 ⓑ의 구조를 하고 있는 프레임셋이다.
<frameset rows="1*", cols="1*, 300">
<frameset rows="200, 1*", cols="1*"> ------------------------------------------------------------------------------------------ⓑ
<frame src="c.html" name="head" scrolling="auto" marginwidth="0" marginheight="0" noresize>
<frame src="d.html" name="main" scrolling="auto" marginwidth="0" marginheight="0">
</frameset>
<frame src="b.html" name="menu" scrolling="auto" marginwidth="0" marginheight="0" noresize>
</frameset>

아. = 다. + 아래 가로 프레임 추가

① 높이 고정 : 200 픽셀, name="head"
② 폭 고정 : 300 픽셀 name="menu"	③ 폭, 높이 변동 : 1* name="main"
④ 높이 고정 : 100 픽셀, name="bottom"

자. = 마 + 내부 프레임 셋에 가로 프레임 추가

① 폭 고정 : 300 픽셀 name="menu"	② 높이 고정 : 200 픽셀 name="head"
	③ 폭, 높이 변동 : 1* name="main"
	④ 높이 고정 : 100 픽셀, name="bottom"

차 = 아. + 가운데 프레임 셋에 가로 프레임 하나 추가

① 높이 고정 : 200 픽셀, name="head"
② 폭 고정 : 300 픽셀 name="menu"	③ 폭, 높이 변동 : 1* name="main"	⑤ 폭 고정 : 100 픽셀, name="right
④ 높이 고정 : 100 픽셀, name="bottom"

카 = 자. + 우측 프레임 하나 추가

① 폭 고정 : 300 픽셀 name="menu"	② 높이 고정 : 200 픽셀 name="head"	⑤ 폭 고정 : 100 픽셀, name="right
	③ 폭, 높이 변동 : 1* name="main"
	④ 높이 고정 : 100 픽셀, name="bottom"

　② <iframe> ... </iframe>

Frame 문서가 아닌 일반적인 Html 문서 내부에 다른 Html 문서를 불어오기 위한 내부(Inner) 프레임(Frame)이다.
일반적인 Frame의 속성을 모두 갖는다.

　⊙ 속성(Atributes)

일반적인 Frame의 속성을 모두 갖는다.

　⊙ iframe을 이용한 예

여기는 표로 만들었습니다. Head 부분으로 사용하기 위하여 height="100", width="100%"로 설정
여기도 표입니다. Menu부분으로 사용하기 위하여 width="75"로 설정 메뉴설계 1. 야후 ☜ <a href="http://kr.yahoo.com" target="iframe_name"> 2. 다음 3. 파란	width 생략, height : 필요한 높이로 설정 내부 html 코드 삽입 <iframe name="iframe_name" height="필요한 높이" frameborder="0" scrolling="auto" src="http://kr.yahoo.com">
여기도 표입니다. 아래쪽 부분입니다. height="10"으로 설정

&nbsp

Head 내용구성
메뉴설계 1. 메뉴1 2. 메뉴2 3. 메뉴3
Designed by Kong Namul

HTML 연습장으로 확인해보자

댓글 0개

등록된 댓글이 없습니다.

로그인한 회원만 댓글 등록이 가능합니다.

작성자 정보

컨텐츠 정보

본문

관련자료