FRAMESET, FRAME elements

▲ ▶

Window가 창이라면 frame은 창틀이다.

FRAMESET element은 하나의 창을 여러 개의 창틀로 나누는 역할을 하며, 시작과 끝내는 태그가 있다.

각각의 프레임에 어떤 문서가 나올 것인가를 결정하는 것은 FRAME element로, 시작 태그만 있다.

일반적인 HTML 문서는 하나의 HEAD와 하나의 BODY로 이루어지는데 비해, 프레임으로 구성된 문서는 HEAD와

FRAMESET으로 이루어진다. FRAMESET은 이제부터 하나의 창을 두 개 이상의 프레임으로 나누겠다는 것을 브라우저에게 알려주며,

각각의 프레임의 폭을 결정한다. 프레임의 수만큼 FRAMESET 안에 FRAME element를 넣는다.

화면을 좌우, 두 개로 나누어 왼쪽 프레임에는 메뉴가 나타나고, 오른쪽 프레임에는 본문이 나타나도록 만들어보자.

먼저 FRAMESET element를 써서 프레임으로 나눌 준비를 한다.

<HTML>
<HEAD>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>

다음에는 좌우 프레임을 얼마만큼의 폭으로 나눌 것인지를 정한다. 왼쪽 메뉴는 보통 그림이 들어가고

그림의 크기가 정해져 있으므로, 200픽셀로 하고, 오른쪽 프레임은 브라우저 크기나 창 크기에 관계없이 200픽셀을 제외한

나머지로 하기로 하자. 창을 새로로 나눌 것이므로, cols(columns: 열) 속성을 쓴다.

<HTML>
<HEAD>
</HEAD>
<FRAMESET cols = "200,*">
</FRAMESET>
</HTML>

이번에는 좌우 프레임에 들어갈 문서를 지정해 보자. 화면을 좌우 둘로 나누었으므로 두 개의 FRAME element가 들어간다.

각 프레임에 들어갈 문서는 src 속성을 이용해 경로를 써 준다.

<HTML>
<HEAD>
</HEAD>
<FRAMESET cols = "200,*">
<FRAME src = "../menu.htm">
<FRAME src = "../HTML.htm">
</FRAMESET>
</HTML>

FRAMESET

속성

rows, cols

id, class, TITLE, style

onload, onunload

rows = "숫자(%),숫자(%),..."

화면을 상하로 나눌 때 사용한다. 상하로 구분하면 행(rows)이 여러 개 생기기 때문에 rows라는 이름이 붙었다.

Rows의 값으로는 나눌 프레임의 수만큼 정해진 픽셀값이나 화면 크기를 기준으로 한 퍼센트값을 써 준다.

만약 위(20%), 중간(나머지), 아래(20%)의 폭으로 화면을 나눈다면 rows = "20%, *, 20%"가 된다.

짐작했겠지만, *는 나머지라는 뜻이다. 보통 가장 큰 폭을 갖는 프레임에 *를 붙이면 된다.

cols = "숫자(%),숫자(%),..."

화면을 좌우로 나눌 때 사용한다. 좌우로 구분하면 열(columns)이 여러 개 생기기 때문에 cols라는 이름이 붙었다.

Rows와 마찬가지로, 나눌 프레임의 수만큼 정해진 픽셀값이나 화면 크기를 기준으로 한 퍼센트값을 써 준다.

만약 왼쪽(200픽셀), 가운데(나머지), 오른쪽(100픽셀)의 폭으로 화면을 나눈다면 cols = "200, *, 100"이 된다.

FRAME

속성

name, longdesc, src, noresize, scrolling

frameborder, marginwidth, marginheight, target

id, class, TITLE, style

name = 문자열

각각의 프레임에 주어지는 이름이다.

Name을 반드시 주어야만, target 속성의 값으로 프레임의 이름을 쓰면 링크를 클릭했을 때

그 내용이 해당 프레임에 나타나게 된다.

프레임의 이름은 기억하기 쉽도록 left, right라거나, top, middle, bottom과 같이 붙이는 것이 좋다.

longdesc = "URL"

TITLE 속성으로 프레임에 대한 간단한 설명을 붙일 수 있는데, 더 자세한 설명이 있는 URL을 지정하는 것이다.

src = "URL"

해당 프레임에 어느 문서가 나오게 될지 상대경로나 절대경로를 써 준다.

noresize

Noresize 속성이 있으면 프레임과 프레임 사이의 경계를 마우스로 끌어서 조절할 수 없게 된다.

메뉴나 광고가 들어가는 프레임은 보통 크기를 조절하지 못하도록 noresize 속성을 넣는다.

scrolling = auto | yes | no

프레임에 스크롤바를 생기게 할 것인지 여부를 정한다. 기본값은 auto로 필요할 때 스크롤바가 자동으로 생긴다.

Yes로 하면 언제나 스크롤바가 생기고, no로 하면 스크롤바가 필요한 경우에도 생기지 않는다.

frameborder = 1 | 0

해당 프레임 옆에 구분선이 생기도록 할 것인지 여부를 정한다. 1은 생기게 하는 것이고, 0은 생기지 않게 하는 것이다.

Frameborder의 값을 0으로 주더라도 회색의 구분선이 여전히 남아있는데,

이 때는 FRAMESET element 안에 border = 0 속성을 넣어주면 깨끗하게 된다.

marginwidth = 숫자

프레임의 좌우 경계선과 그 안에 들어있는 내용 사이의 여백이다. 단위는 픽셀이다.

marginheight = 숫자

프레임의 상하 경계선과 그 안에 들어있는 내용 사이의 여백이다. 단위는 픽셀이다.

겹쳐진 프레임 만들기

프레임은 항상 좌우나 상하로만 나누는 것이 아니라 좌우로 나누 후 다시 상하로 나누는 등 여러 번 나눌 수가 있다.

상하 두 개로 나눈 다음, 아랫쪽 프레임을 다시 왼쪽, 가운데, 오른쪽, 세 개로 나누어 보자.

여러 번 나누게 될 때 항상 더 크게 나누는 것을 먼저 한다.

이 경우에는 상하로 두 번 나누는 것은 브라우저의 처음부터 끝까지 나눠지는 것이므로 먼저 나누게 되고,

아랫쪽 프레임을 좌우로 나누는 것은 아랫쪽 프레임 안에서만 나누는 것이므로 나중에 한다.

먼저 FRAMESET을 써서 상하 두 개의 프레임으로 나눈다.

<FRAMESET rows="100,*" border=0>
<FRAMESET>

다음에는 FRAME을 써서 각 프레임에 들어갈 문서를 지정한다.

윗쪽 프레임은 더 나누지 않을 것이므로 FRAME element를 써 준다.

<FRAMESET rows="100,*" border=0>
<FRAME src="../top.htm" frameborder=0 name=top>
<FRAMESET>

아랫쪽 프레임은 다시 새로로 나눌 것이므로 FRAME 대신에 FRAMESET을 한 번 더 써 준다.

<FRAMESET rows="50,*" border=0>
<FRAME src="../top.htm" frameborder=0 name=top>
<FRAMESET cols="120,*,10" border=0>
</FRAMESET>
<FRAMESET>

이제 아랫쪽 프레임에 들어갈 세 개의 프레임을 순서대로 써 준다.

<FRAMESET rows="50,*" border=0>
<FRAME src="../top.htm" frameborder=0 name=top>
<FRAMESET cols="120,*,10" border=0>
<FRAME src="../menu.htm" frameborder=0 name=menu>
<FRAME src="../HTML.htm" frameborder=0 name=content>
<FRAME src="../border.htm" frameborder=0 name=border>
</FRAMESET>
<FRAMESET>

프레임을 여러 번 나눌 때는 미리 그림을 그려서 그림에 있는 프레임의 수와, HTML 코드에 있는 FRAME element의

수가 맞는지를 확인하면 실수가 없다.

▲ ▶