23.프레임 응용하기

풍란의 향기 2012. 2. 8. 12:31

① 프래임 한번더 나누기

나눠진 프레임에 다시 프레임을 넣으려면 <frame>태그아래에 다시 <frameset>태그를 쓰면 됩니다.
어떤형식으로 사용하는지 예문을 보겠습니다.

<html>
<head>
  <title> 프레임 나누기 </title>
</head>
<frameset cols="30%,*">
  <frame src="A.htm">
  <frameset rows="100,*">
    <frame src="B.htm">
    <frame src="C.htm>
  </frameset>
</frameset>
</html>

A.htm의 내용 출력	B.htm의 내용 출력
	C.htm의 내용 출력

소스를 보면 처음엔 cols 속성으로 좌우를 30%와 70%로 나누어 왼쪽에 A.htm을 지정하였습니다. 다음에 바로 <frameset>태그를 써서 오른쪽 창을 rows 속성을 사용하여 100 픽셀과 나머지로 상하 2등분 한 것입니다. 이해가 되지요. 이렇게해서 창이 세개가 되었습니다. 소스와 결과에서 보는바와 같이 세개의 창을 가진 창을 실행시키기 위해서는 각창에 들어갈 문서 3개와 프레임을 지정한 문서를 합해 총 4개의 문서가 기본적으로 필요합니다.

이번엔 rows 를 먼저 써보겠습니다.

<html>
<head>
  <title> 프레임 나누기 </title>
</head>
<frameset rows="100,*">
  <frame src="A.htm">
  <frameset cols="30%,*">
    <frame src="B.htm">
    <frame src="C.htm>
  </frameset>
</frameset>
</html>

A.htm의 내용 출력
B.htm의 내용 출력	C.htm의 내용 출력

위에서 보는바와 rows 를 먼저 쓰면 상하 나누기가 먼저된 다음 두번째 <frameset>태그의 cols 에 의해 좌우로 창이 나누어진것을 볼수 있습니다. 홈페이지 만들때 가장 많이 쓰이는 프레임 분할방식입니다. 마음에 드는 걸로 선택해서 사용하세요.

그럼 이제 실제로 프레임과 내용을 만들어 볼까요. 제일 위에 있는 첫번째 프레임분할로 만들어 보겠습니다. frameborder="0" 과 scrolling="no" 를 써서 프레임의 테두리와 스크롤바를 없애겠습니다. 속성이 생각이 안나면 앞장을 보세요. 왼쪽창에는 테이블 응용하기에서 만들어 보았던 메뉴바를 넣고 메뉴를 크릭하면 오른쪽에 내용이 뜨도록 만들겠습니다. 위쪽창에는 왼쪽바탕그림과 연결되는 그림을 넣구요. 프레임의 테두리를 없애고 왼쪽창과 위쪽창에 연결되는 그림 을 넣으면 화면이 훨씬 보기 좋습니다.

★실습예제

<html>
<head><title>홈페이지 만들기</title></head>

<frameset cols="120,*" frameborder="0" framespacing="0">
<frame src="menu.htm" scrolling="no"> <-- menu.htm은 왼쪽창에 들어갈 메뉴문서입니다.
<frameset rows="100,*" frameborder="0" framespacing="0">
<frame src="top.htm" scrolling="no"> <-- top.htm은 위쪽창에 들어갈 이미지를 삽입한 문서입니다.
<frame src="home.htm" name="right"> <-- home.htm은 오른쪽창에 처음 들어갈 문서입니다.
</frameset> name을 정해줌으로써 메뉴문서에서 target 속성으로 창을 지정할수 있습니다.
</frameset> 다시말하면, 오른쪽창이 'right' 라는 이름을 가지게 된겁니다.

</html>

<html>
<head><title>메뉴바 만들기</title></head>

<body background="menu.jpg">
<table border="0" width="120" cellspacing="3" cellpadding="5">
<tr><td> :::: 메뉴 :::: </td></tr>
<tr><td> <a href="home.htm" target="right"> 홈으로 </a> </td></tr>
위줄의 소스를 해석해보면, '홈으로'를 클릭했을때 'home.htm' 파일을 'right' 라는 이름을 가진 오른쪽창에 출력하라는 것입니다. 아래줄도 같은식입니다.
<tr><td> <a href="me.htm" target="right"> 나의 소개 </a> </td></tr>
<tr><td> <a href="link.htm" target="right"> 링크 사이트 </a> </td></tr>
<tr><td> 게시판 </td></tr> 게시판과 방명록은 생략합니다.
<tr><td> 방명록 </td></tr> 게시판과 방명록을 얻어서 주소를 href=" " 에 삽입하면 됩니다.
<tr><td> <a href="mailto:skin011@hanmail.net> E-mail </a> </td></tr>

</table>
</body>
</html>

위 소스에서 링크되어 있는 home.htm, me.htm, link.htm 문서의 소스는 생략합니다. 자기에게 맞는 내용으로 만들면 되겠죠? 이제 결과를 보겠습니다. 프레임을 지정한 intro.htm 파일을 클릭하면 됩니다.