한 페이지가 좌우로 나뉘거나, 상하로 나뉜 페이지를 만들어 보도록 하겠습니다. 프레임의 개념은 이렇습니다. index.html문서를 웹브라우즈에서 불러오면 a.html은 왼쪽의 메뉴로 사용되는 문서이고, b.html은 각메뉴에 해당하는 상세정보를 보여주는 문서 입니다. a.html이나, b.html은 보통의 웹문서 입니다. 단지 프레임으로 나뉜 문서를 불러오기 위해서는 index.html에서 프레임으로 나뉜 다는 것을 지정해 주기만하면 됩니다. 프레임으로 나뉜 웹문서(index.html)를 보통 MasterPage라고도 합니다.
다음은 간단한 프레임으로 된 index.html입니다.
예1) 좌,우로 나누기 위한 index.html
예2) 상,하로 나누기 위한 index.html
마스터페이지에는 일반 HTML문서와는 달리 <BODY> ~ </BODY>태그가 없습니다. 대신 <FRAMESET> ~ </FRAMESET>태그가 있습니다. 이 태그안에서 웹브라우즈창을 어떻게 나눌것이지와 나누고 난 후에 어떤문서를 불러올 것인지를 지정해 줍니다. 위의예1)과 예2)처럼 웹브라우즈를 좌우로 나누려면 COLS라는 옵션을 쓰고, 상하로 나누려면 ROWS라는 옵션을 사용합니다. COLS와 ROWS에 각각 몇 개로 나눌것인지를 지정해주는 것입니다. 위의 예1)에서는 30%와 70%로 창을 좌우로 나눈것이며, 예2)에서는 상하로 30%와 70%로 나눈 것입니다. 두 개의 프레임문서로 불러온 후에는 <FRAME SRC=”불러올문서”>로 나뉘어진곳에 불러올 문서를 지정해 주면 됩니다. 간단하죠….
이것이 프레임의 가장 기본이며, 전부다라고 할 수 있습니다. 여기서 프레임에 대한 구현방법만 조금 더 배우면 됩니다. 또한 이프레임들을 좀 더 다양하고 이쁘게 그리고 방문자들을 위한 해상도를 고려해주는 프레임을 만들수가 있습니다.
위에서는 창을 %로 나누는 것만 배웠습니다. %는 전체브라우즈의 창을 100으로 보았을 때 각각의 프레임문서를 몇%로 나눌것인가를 지정하는 것입니다. 그러나 %로 해두면 만들기는 편리하나 프레임을 만들 컴퓨터의 해상도와 방문자의 해상도가 다를 경우에는 다르게 보일 수 있습니다. 이 문제를 해결하기 위해서는 %대신에 고정된 크기로 지정 할 수 있는 Pixel로 지정해 주면 됩니다.
예3) 픽셀로 프레임나누기
위의 프레임은 픽셀로 지정된 것입니다. "a는 50픽셀의 크기로 나누고, 나머지 공간을 2개로 분할하여 c가 b의 2배로 되게 나누어라"하는 것입니다.
이번에는 좌우로(COLS) 나뉜 프레임을 다시 상하(ROWS)로 나누어 보겠습니다.
예4) 복잡한 프레임
위의 마스터페이지는 좌우로 먼저 3개의 프레임으로 나눈 뒤에 마지막 3번째 프레임문서를 다시 상하 2개의 문서로 나뉜 것입니다. 한가지 주의할 것은 문서는 프레임을 나눈 순서대로 들어가게 된다는 것만 주의해 주시면 별 어려움없이 프레임으로 된 웹페이지를 만드실 수 있을 것입니다. |
출처 : http://superuser.co.kr/homepage/htmlguide/5-01.htm
+
html> |
|
|
frame1 | |
|
|
출처 : http://jmf.or.kr/jmf/technote/read.cgi?board=mary_know&y_number=39