FRAMESET | FRAME Element

Home > Document > HTML > 고급 과정 > Frameset , Frame element

페이지 목차

Frameset

Frameset 이란 하나의 브라우저 창을 여러개로 분할하여 각각의 분할된 곳(Frame)에 문서를 하나씩 집어넣어 구성한 문서를 말합니다. 그러기 위해서는 그 분할된 곳 마다 들어갈 문서가 있어야 될 것이고 브라우저 창을 어떻게 분할 했는지에 대한 정보를 담고 있는 문서(Frameset page)가 있어야 되겠군요. 이렇게 문서를 분할하는 이유는 한 페이지로 구성했을 경우처럼 다른 문서를 볼 때 마다 화면 전체가 바뀌지 않고 분할된 특정 부분만 바뀌므로서 문서를 보는 사람이 안정감을 가지게 하자는 거죠. 이 사이트도 역시 그런 뜻에서 Frameset으로 문서를 구성했습니다. 하긴 요새 다시 한 페이지로 구성한 사이트가 유행이라고 하긴 하던데... 그래도 역시 Frameset으로 구성한 페이지가 좋다는 생각은 변함이 없습니다. 최소한 저는 그렇습니다.

그런데 이 Frameset Element라는게 전문적으로 자주 쓰는 사람... 머 그러니까 웹 페이지 맹기는걸 직업으로 하는 사람(그것도 그 사람이 Frameset으로 페이지를 짠다는 가정하에서)이 아니면 아주 가끔 쓰는 Element 라서 솔직히 저도 하나 짤라면 그 때 마다 찾아보곤 합니다. 맨 첨에 한 번 짯으면 됐지 누가 맨날 이거 만들고 있겠습니까. 처음하거나 가끔하면 아주 헷갈리는 넘입니다. 하나 씩 정리해 보기로 하져. 우선 DTD 표와 Element들이 가지고 있는 Attribute들을 살펴 봅시다.

**Legend** : Optional, Forbidden, Empty, Deprecated, Loose DTD, Frameset DTD [표 보는 방법]
Element	Start tag	End tag	Empty	Deprecated	DTD
FRAMESET		F	E		F
FRAME					F

FRAMESET Element

cols

화면을 수직으로 분할하는 갯수나 크기, 사용값 pixel, *(나머지 또는 등분), %
예)	<frameset cols="125,675"> <frameset cols="125,"> <frameset cols=",800,*"> <frameset cols="20%,80%>

rows

화면을 수평으로 분할하는 갯수나 크기, 사용값 pixel, *(나머지 또는 등분), %
예)	<frameset rows="50,"> <frameset rows="100,,30">

frameborder

각 프레임간의 경계선 (table border와 같음)
예)	<frameset cols="125,675" frameborder="0">

framespacing

각 프레임 경계선 간의 거리 (각 Frame을 table cell 이라고 치면 cellspacing과 같음)
예)	<frameset cols="125,675" frameborder="0" framespacing="0">

FRAME Element

src

해당 프레임에 들어갈 문서의 uri
예)	<frame src="../html/tomato.html">

name

해당 프레임의 이름, 링크 걸때 Target으로 지정하거나, Scripting에서 사용
예)	<frame src="../html/tomato.html" name="menu">

scrolling

각 프레임의 문서를 scroll 시킬건지의 여부, 값은 yes, auto(기본값) 또는 no
예)	<frame src="../html/tomato.html" name="menu" scrolling="no">

noresize

각 프레임의 경계선을 움직여 면적 조정을 할건지의 여부, 기본값 resize(움직임)
예)	<frame src="../html/tomato.html" name="menu" noresize>

프레임 나누기 기초 예제

앞에서도 말했지만 Frameset 란 "하나의 브라우저 창을 여러개로 분할하여 각각의 분할된 곳(Frame)에 문서를 하나씩 집어넣어 구성한 문서" 이기 때문에 이 예제를 하기 위해서 몇개의 파일이 필요합니다. 일단 아래와 같이 4개의 파일을 만들어 봅니다. 만들어진 파일은 Myfolder/html 폴더에 저장합니다.

파일 1 - top.html

<HTML>
    <HEAD>
        <TITLE>top</TITLE>
    </HEAD>
    <BODY bgcolor="tomato">
    top
    </BODY>
</HTML>

파일 2 - left.html

<HTML>
    <HEAD>
        <TITLE>left</TITLE>
    </HEAD>
    <BODY bgcolor="darkolivegreen">
    left
    </BODY>
</HTML>

파일 3 - main.html

<HTML>
    <HEAD>
        <TITLE>main</TITLE>
    </HEAD>
    <BODY bgcolor="royalblue">
    main
    <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    </BODY>
</HTML>

파일 4 - bottom.html

<HTML>
    <HEAD>
        <TITLE>bottom</TITLE>
    </HEAD>
    <BODY bgcolor="gold>
    bottom
    </BODY>
</HTML>

이제 필요한 4개의 파일이 저장 되었으면 Frameset 에 대한 정보를 담아 둘 파일을 만들어 보져. 우선 간단하게 좌우로 나뉜 형태로 Frameset 을 구성해 봅시다.

좌우로 나뉜 형태의 Frameset - left_right.html

<HTML>
    <HEAD>
        <TITLE>left_right.html</TITLE>
        <FRAMESET cols="*,*">
            <FRAME src="left.html" name="left">
            <FRAME src="main.html" name="main">
        </FRAMESET>
    </HEAD>
</HTML>

출력결과

위와 같이 left.html 과 main.html 이 좌우로 뉘어진 형태로 Frameset 이 구성 되었습니다. 여기서 우리가 짚고 넘어가야 될게 몇 가지 있는데 다음과 같습니다.

Frameset Tag 이 들어가는 위치는 <HEAD> 와 </HEAD> 사이가 되겠습니다. Source code 를 보면 Body Tag 이 없는데, 이 Frameset page 의 경우 Frameset 에 대한 정보 만을 기록해 놓은 페이지이기 때문에 그렇습니다.
<FRAMESET>과 </FRAMESET> 사이에 <FRAME> 이 2개 들어 갔는데 왼쪽이 left.html, 오른쪽이 main.html 이져? 그건 left.html 이 main.html 보다 먼저 나오기 때문입니다. 어떤 경우도 예외 없이 왼쪽에서 오른쪽, 위에서 아래 순으로 배치됩니다. 비단 Frameset 뿐만 아니고 모든 것에 예외없이 적용되져...
브라우저 창이 좌우로 균등분할된 것은 <FRAMESET cols="*,*"> 에서 cols="*,*" 때문입니다. 속성표에서 설명 했듯이 * 는 나머지 또는 등분할 입니다.
마우스로 가운데 경계선을 Drag 해 보면 Resizing이 되어서 크기가 달라지는데 Source code 를 보면 알 수 있지만 src 와 name 속성만 사용하고 다른 속성은 사용하지 않았기 때문에 기본 값인 Resize가 되었기 때문이고
다른 속성은 써도 좋고 안써도 좋지만 name 속성은 사용해야 합니다. 반드시는 아니지만... 그리고 name 을 줄 때는 filename과 같은 이름을 주는게 좋습니다. 그래야 헷갈리지 않져...
가운데 경계선이 있는 이유는 Table border 와는 달리 Frameset 의 경우는 frameborder 의 기본값이 1 이고, framespacing은 Table 의 cellspacing과 같이 2 입니다.
Scroll bar 가 보이는 이유는 의도적으로 <BR> 을 많이 주었기 때문입니다. 그렇지 않으면 scroll bar 는 보이지 않습니다. 위의 표에서 scrolling 의 기본값이 auto 이고 이 경우 한 페이지 분량이 넘지 않으면 보이지 않다가 한 페이지 분량이 넘는 순간 scroll bar가 생기게 됩니다.

이제 아래 2 가지의 예제로 나머지 부분을 설명하고, 몇 가지의 Frameset 예제를 더 보도록 하겠습니다.

상하로 나뉜 형태의 Frameset - top_bottom.html

<HTML>
    <HEAD>
        <TITLE>top_bottom.html</TITLE>
        <FRAMESET rows="*,*" frameborder="0">
            <FRAME src="top.html" name="top">
            <FRAME src="bottom.html" name="bottom">
        </FRAMESET>
    </HEAD>
</HTML>

출력결과

여기서 또 몇 가지 짚고 지나가죠...

Frameset Tag 에 rows="*,*" 로 top.html 과 bottom.html 이 상하로 등분할 되었습니다. 앞에서 말한 순서에 따라 첫 번째인 top.html 이 위, bottom.html 이 아래가 되겠군요.
frameborder="0" 으로 했는데 아직 경계선에 흰색이 남아 있습니다. 그 부분이 framespacing 입니다. Table 의 cellspacing 과 같습니다. framespacing="0" 으로 하면 사라지게 되져...

다음은 준비한 4개의 파일을 가로 세로 4등분한 형태의 Frameset 예제가 되겠습니다.

가로 세로 등분할 - hor_vert.html

<HTML>
    <HEAD>
        <TITLE>가로 세로 등분할</TITLE>
        <FRAMESET rows="*,*">				
            <FRAMESET cols="*,*" frameborder="0" framespacing="0">
                <FRAME src="top.html" name="top" noresize>
                <FRAME src="bottom.html" name="bottom">
            </FRAMESET>
            <FRAMESET cols="*,*">
                <FRAME src="left.html" name="left">
                <FRAME src="main.html" name="main">
            </FRAMESET>
        </FRAMESET>
    </HEAD>
</HTML>

출력결과

몇 가지의 설명...

수평 경계선을 자세히 보면 left.html 과 main.html 의 수직 경계선 두께 보다 가늘어진 것을 알 수 있는데, 갈색으로 표시된 상부의 프레임 셋에 frameborder="0" framespacing="0" 으로 해서 수평 경계선 두께의 절반을 가져갔지 때문이고
마우스로 경계선을 Resizing 해 보면 left.html 과 main.html의 수직 경계선 만 움직이는 걸 알 수 있는데, noresize 속성이 사용된 프레임과 면한 프레임은 Resizing 이 되지 않습니다.
top.html 과 bottom.html 의 framespacing을 '0'으로 주어서 2 개의 프레임이 틈 없이 붙었습니다. 이와 같이 Frameset 에 설정된 속성들은 해당 프레임에만 영향을 받게 됩니다. 만약 전체 프레임을 틈 없이 붙이고 싶으면 아래와 같이 가장 상위 프레임에만 속성을 설정합니다.

입력

- <HTML>

- <HEAD>

- <FRAMESET rows="*,*" frameborder="0" framespacing="0">

- <FRAMESET cols="*,*">

</FRAMESET>

- <FRAMESET cols="*,*">

</FRAMESET>

</HEAD>

</HTML>

위와 같이 전체 프레임의 frameborder 와 framespacing 이 사라졌습니다. 이 것은 중급 과정의 Table 의 예에서 보았듯이 상위 Tag 에서 하위 Tag 으로 속성값이 상속되었음을 뜻 합니다.

아래의 4 가지 예제를 해 보겠습니다.

top
left	main

left	main
bottom

top
left	main
bottom

	top
	left	main

예제 1

top
left	main

일반적으로 가장 많이 사용하는 형태의 Frameset 입니다. 상단에는 Logo 라든지 Graphic 등이 들어가고 필요에 따라서는 Sub-menu 를 넣을 수도 있습니다. 왼쪽에는 Main-menu 가 들어가서 Link 를 클릭했을 때 오른쪽 프레임에 문서가 Load 됩니다. 왼쪽 프레임과 오른쪽 프레임의 분할 비율은 일반적으로 15 : 85 ~ 20 : 80 정도가 무난 하다고 합니다. 하지만 어떤 경우든지 오른쪽 Main 프레임은 가급적 수평 Scroll 이 생기지 않게 하는게 좋습니다. 그리고 또 하나 중요한 것은 화면 해상도를 고려해야 한다는 점입니다. 17inch 모니터의 경우 1024 X 768 해상도가 가장 적합하고 14inch 의 경우 800 X 600 해상도가 적합나다고 합니다. 현재 17inch 모니터가 점점 주류를 이루는 추세이지만 아직 14inch 모니터를 사용하는 사용자도 있기 때문에 전체적인 윤곽을 17inch 모니터 기준으로 1024 X 768 로 할 것인지 800 X 600 으로 할 것인지도 고려해 봄직 합니다. 소수에 대한 배려...

예제 1 - top_left_main.html

<HTML>
    <HEAD>
        <TITLE>top_left_main.html</TITLE>
        <FRAMESET rows="100,*" frameborder="0" framespacing="0">
            <FRAME name="top" src="top.html"  scrolling="no" noresize="noresize">
            <FRAMESET cols="120,*">
                <FRAME name="left" src="left.html"  noresize="noresize">
                <FRAME name="main" src="main.html"  scrolling="auto" noresize="noresize">
            </FRAMESET>
        </FRAMESET>
    </HEAD>
</HTML>

Source 중에 갈색 부분만 덩그라니 있어서 전체적인 윤곽이 잘 이해가 가지 않으면 아래와 같이 3 줄이 사라진 것과 비교해 보시져...
입력

<HTML>
    <HEAD>
        <TITLE>가로 세로 등분할</TITLE>
        <FRAMESET rows="100,*" frameborder="0" framespacing="0">
            <FRAMESET cols="*,*">  
                <FRAME src="top.html" name="top" scrolling="no" noresize="noresize">
                <FRAME src="bottom.html" name="bottom">  
            </FRAMESET>  
            <FRAMESET cols="120,*">
                <FRAME src="left.html" name="left">
                <FRAME src="main.html" name="main">
            </FRAMESET>
        </FRAMESET>
    </HEAD>
</HTML>

출력결과

Target frame

Target frame 이란 Frameset 으로 나뉘어진 페이지에서 링크를 클릭 했을 때 링크된 문서를 어떤 Frame 에 Load 시킬 것인가 하는 말입니다. Frame Tag 에서 name 속성을 사용하여 이름을 붙였는데, 그 이름이 Target 이 되는거죠. 예제를 위해서 left.html 을 열고 아래와 같이 수정합니다.

입력

<HTML>
    <HEAD>
        <TITLE>left</TITLE>
    </HEAD>
    <BODY>
        <A href="http://www.yahoo.co.kr" target="main" title="야후코리아">야후코리아</A><BR>
        <A href="http://www.naver.com" target="main" title="네이버">네&nbsp;&nbsp;&nbsp;이
        &nbsp;&nbsp;&nbsp;버</A><BR>
        <A href="http://www.nate.com" target="main" title="네이트닷컴">네이트닷컴</A><BR>
        <A href="http://www.hanafos.com" target="main" title="하나포스">하 나 포 스</A>
    </BODY>
</HTML>

출력결과

위의 Source 중 갈색 글씨로 된 target="main" 은 <FRAME src="main.html" name="main"> 에서 붙여진 이름입니다. 다름은 나머지 예제의 Source 와 출력 결과입니다.

예제 2

예제 2 - left_main_bottom.html

<HTML>
    <HEAD>
        <TITLE>left_main_bottom.html</TITLE>
        <FRAMESET rows="*,100" frameborder="0" framespacing="0">
            <FRAMESET cols="120,*">
                <FRAME name="left" src="left.html"  noresize="noresize">
                <FRAME name="main" src="main.html"  scrolling="auto" noresize="noresize">
            </FRAMESET>
            <FRAME name="bottom" src="bottom.html"  scrolling="no" noresize="noresize">
        </FRAMESET>
    </HEAD>
</HTML>

출력결과

예제 3

예제 3 - top_left_main_bottom.html

<HTML>
    <HEAD>
        <TITLE>top_left_main_bottom.html</TITLE>
        <FRAMESET rows="50,*,50" frameborder="0" framespacing="0">
            <FRAME name="top" src="top.html"  scrolling="no" noresize="noresize">
            <FRAMESET cols="120,*">
                <FRAME name="left" src="left.html"  noresize="noresize">
                <FRAME name="main" src="main.html"  scrolling="auto" noresize="noresize">
            </FRAMESET>
            <FRAME name="bottom" src="bottom.html"  scrolling="no" noresize="noresize">
        </FRAMESET>
    </HEAD>
</HTML>

출력결과

예제 4

예제 4 - many_frame.html

<HTML>
    <HEAD>
        <TITLE>무지 많은 Frameset</TITLE>
        <FRAMESET cols="50,*,50" frameborder="0" framespacing="0">
            <FRAME name="bottom" src="bottom.html"  scrolling="no">
                <FRAMESET rows="100,*">
                    <FRAME name="top" src="top.html"  scrolling="no" noresize>
                    <FRAMESET cols="120,*">
                        <FRAME name="left" src="left.html">
                        <FRAME name="main" src="main.html"  scrolling="auto">
                    </FRAMESET>
                </FRAMESET>
            <FRAME name="bottom" src="bottom.html"  scrolling="no">
        </FRAMESET>
    </HEAD>
</HTML>

출력결과

이런 식으로 프레임을 구성하는 이유는 800 X 600해상도를 사용하는 사람의 경우 이런 식으로 프레임을 짜면 좌우의 여백이 없이 화면에 꽉 차 보이게 됩니다. 단, 위의 가장 상위 Frameset Tag에 cols="50,*,50" 을 cols="*,800,*" 로 하면 됩니다. 즉, 가운데를 800 pixel 로 하고 좌우는 남는 만큼 차지하라는 뜻이죠. 또 여기에 bottom.html 이 두 번 들어갔는데 문서를 bottom 에 띄운다면 문제지만 그렇지 않을 경우에는 상관 없습니다. 홈페이지를 Frameset 로 구성할 때 처음 부터 심사 숙고해야 됩니다. 일단 한 번 만들면 문서에 들어가는 Image 나 Table 등이 정해진 폭에 맞춰지기 때문에 중도에 변경하기 힘든 경우가 많기 때문이죠...

Top

Back

New

검색