lecture#004

안녕하세요? 오늘로써 벌써 네번째 강좌 시간입니다. 이 강좌를 진행하는 제가 아직 전문적인 실력을 갖추지 못했고 배워가는 과정이기 때문에 강좌의 진행이 깔끔하지 못합니다. 그렇지만 기초를 다지는데 도움이 되고 일반적으로 유용한 내용들을 중심으로 구성해 나가도록 할테니 관심을 가지고 함께 해주시기 바랍니다. 그리고 궁금한 것에 대해서 묻고 답할 수 있는 공간을 열도록 하겠으니 앞으로 많이 이용해 주시기 바랍니다.

이번 시간에는 프레임과 표(테이블)를 이용한 페이지 제작을 실습해 보도록 하겠습니다.
프레임은 간단하게 '틀'이라고 생각하시면 됩니다. 우리가 일상생활에서도 창문틀 같은 것을 프레임이라고 부르는 것처럼 말이죠. 우리가 홈페이지를 만들 때는 브라우저 창에 보이는 화면을 프레임을 이용해 원하는 모양으로 분할하게 됩니다. 예를 통해 알아볼까요?

1.프레임 문서의 구성을 알아보자

위의 예는 전체 페이지를 좌,우의 두 프레임으로 구성한 것입니다. 위와 같은 화면구성을 가진 페이지를 만들려면 다음과 같은 세 개의 html문서가 필요합니다.

[ex1.html]

[ex_left.html]

[ex_main.html]

아직 프레임 문서가 어떻게 구성되는지 모르는 상태에서 소스코드부터 보니 잘 모르시겠죠? 당황하지 말고 차근차근 알아나가면 금방 알게 되실 겁니다.

프레임 문서라는 것은 전체 화면을 여러 개의 (프레임) 문서들로 분할하여 구성한 것을 말합니다. 적게는 두 개에서 부터 여러 개의 문서로 구성될 수 있죠.(물론 너무 많은 프레임으로 구성되면 속도가 느려지는 등 여러가지 문제가 발생하므로 보통은 2~3개의 문서로 구성합니다.) 우리가 예로 본 위의 경우는 좌,우의 2개 문서로 구성된 것입니다. 그런데 왜 3개의 html문서가 필요한 것일까요? 그 이유는 바로 각각의 프레임들을 묶어 하나의 문서로 구성한다는 프레임셋(frameset)을 규정해주는 문서가 필요한 것입니다. 위의 예에선 [ex1.html]이 그에 해당합니다.<FRAMESET cols="*,*">~</FRAMESET> 부분이 몇 개의 프레임들로 구성되는지를 규정해주는 부분입니다. 이 경우에는 그 안에 <FRAME src="주소"> 의 형태로 된 문장이 두 개이므로 2 개의 문서로 구성되었음을 알 수 있습니다. 그리고 좌, 우측에 해당하는 [ex_left.html]과 [ex_main.html]은 그냥 배경색을 빨간색과 파란색으로 지정해준 html문서일 뿐입니다. src="주소" 부분에 실제 존재하는 어떤 문서라도 넣어준다면 좌측, 혹은 우측에 그 문서가 불러지게 되는 것입니다. 그러므로 핵심은 프레임셋을 규정하는 문서가 되는 것이죠. 여기서 매우 중요한 것 한가지가 있는데요 바로 이 프레임셋 태그는 <HEAD></HEAD> 사이에 들어간다는 것입니다. 본문(body)에 들어가는 것이 아닙니다!! 꼭 기억하시기 바랍니다!

2.프레임셋, 프레임 요소의 속성을 알아보자

프레임셋 요소 속성

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">

프레임 요소 속성

src

해당 프레임에 들어갈 문서의 주소
예)	<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>

※ 위 표는 http://www.cadvance.org/ 에서 가져왔습니다. 문제가 되면 삭제하겠습니다.

위 표에서 이해하지 못하는 내용들은 그냥 넘어가셔도 됩니다. 이번 강좌에서 필요한 부분만 보시면 되겠습니다. 아까 중요하다고 말씀드렸던 프레임셋의 설정에서는 cols와 rows를 이해하시면 됩니다. cols는 우리가 예에서 본 것처럼 수직분할 입니다. 예시에서 좌우로 분할된 것처럼 말이죠. 그리고 rows는 수평분할입니다. 상하로 나눌 때 사용하는 것이죠. 그리고 cols(rows)="*,*"은 분할된 각각의 너비를 결정해주는 부분입니다. (*,*)는 전체를 반으로 나눠 동일한 크기를 가지라는 뜻이고 (30%,*)는 처음(수직분할의 경우는 왼쪽, 수평분할의 경우는 위쪽)의 프레임이 전체의 30%를 차지하고 나중 프레임이 나머지를 차지하라는 것입니다. 공간을 할당하는 수치는 픽셀(pixel)이나 %를 사용할 수 있습니다.
이제 대충 감은 잡히실 겁니다. 그럼 실제 오늘 실습 페이지를 만들면서 익혀보도록 하겠습니다.

3.왼쪽에 메뉴 오른쪽에 내용(본문)이 있는 페이지를 만들어보자

일반적으로 프레임으로 구성된 홈페이지는 '왼쪽 메뉴, 오른쪽 본문' 혹은 '위쪽(상단) 메뉴, 아래쪽(하단) 본문'의 형태로 되어 있습니다. 전농 홈페이지는 프레임 없이 한 페이지로 구성되어 있지만 프레임으로 구성되어 있다고 생각해보면 위쪽 메뉴 아래쪽 내용이라고 할 수 있겠죠. 오늘 실습은 간단하게 왼쪽에 메뉴 오른쪽에 본문으로 구성된 페이지를 만들어 보겠습니다.

먼저 완성된 페이지의 모양을 보도록 하죠.

간단하죠? 어떻게 구성이 되었을지 예상이 되시나요? 자, 이제 알아보도록 하겠습니다.
중요한 프레임셋 구성 문서(페이지) 코드를 보도록 하죠.

자 일단 아까 매우 중요하다고 이야기했던 프레임셋 태그의 위치입니다. <HEAD></HEAD> 사이에 들어간다고 말씀드렸죠? 그리고 수직(좌우) 분할에서 너비를 지정한다고 했습니다. cols="150,*" 좌측메뉴 부분은 150이고 우측은 나머지란 뜻입니다. 그런데 이 150은 무엇일까요? 아까 픽셀 혹은 %로 결정한다고 했습니다. 150이면 100%를 넘는 수치이므로 %가 될수는 없겠죠? 그러므로 150은 150픽셀을 이야기합니다. 좀 익숙해지면 이렇게 단위 같은 것은 생략해도 됩니다. 하지만 처음 매우는 단계에서는 150px 이렇게 명시하는 버릇을 가지시는게 더 좋습니다.

다음으로 좌측메뉴 문서[left.htm]의 코드를 보겠습니다.

상당히 복잡해 보이죠? 전시간에 말씀드렸듯이 테이블은 조금만 줄과 칸이 많아져도 코드를 작성하기가 헷갈립니다. 하지만 복잡한 표를 몇 번 하고 나면 익숙해지실 겁니다. 물론 이렇게 노력한 것에 비해서 결과는 별로 화려하지 않아 실망하실 겁니다. 이는 html 작성 프로그램 등을 통해 쉽게 해결할 수 있지만 먼저 방법은 익히고 프로그램을 쓰는 것이 좋습니다. 위 문서의 코드는 살펴보면서 이해만 하시면 됩니다. 그리고 여기에서 처음 배우는 링크태그(a;anchor 태그)가 나왔습니다. 이는 코드를 마저 보고 배워보도록 하겠습니다. 그럼 오른쪽 [right.htm] 문서의 코드를 보도록 할까요?

<html>
   <head>
      <title>프레임 홈페이지 제작 실습</title>
   </head>
   <body topmargin="0" leftmargin="0">
      <table width="600" height="580" border="1" bordercolorlight="#FFFFFF" cellspacing="0" cellpadding="0" bordercolordark="#000000">
         <tr>
            <td height="50" align="center">프레임과 테이블을 이용한 홈페이지 제작</td>
         </tr>
         <tr>
               <td height="480"><br><center><img border="0" src="image/main.jpg" width="330" height="440"></center><br>
               홈페이지 제작이 생각만큼 어렵진 않죠?<br>
               처음엔 좀 어렵게 느껴지더라도 조금씩 익혀나가다 보면 직접 할 수 있습니다^^<br>
               </td>
         </tr>
         <tr>
            <td height="50" align="center">전국농민회총연맹 nongsa@chol.com / 02-529-6347 / no copyright! just copyleft!!
            </td>
         </tr>
      </table>
   </body>
</html>

이것도 보고 이해하시면 되겠습니다. 화면상으로 깔끔하게 보이지 않아서 어려운 분들은 밑에 각 문서의 소스코드를 첨부할테니 받아서 열어 보시기 바랍니다.

4.링크를 만드는 태그 anchor 태그

위에서 좌측 메뉴 부분의 문서를 보면 "처음으로", "전농소개" 등의 메뉴 항목에 <a href="주소"></a> 이렇게 태그명령이 되어 있는 것을 보실수 있으실 겁니다. 이 태그가 바로 다른 곳에 있는 주소, 문서와 연결을 시켜주는 링크태그입니다. 사용 방식은 위의 코드에서 보는 것처럼 <a href="http://www.ijunnong.net">전농 홈페이지 가기</a> 이런 방식으로 사용하게 됩니다. 이렇게 작성을 하면 결과는 태그부분은 보이지 않고 링크가 걸린 글자들(전농 홈페이지 가지)만 보이면서 이 글자들을 클릭하면 링크를 만든 주소로 이동하게 됩니다. 볼까요?

전농 홈페이지 가기

그런데 인터넷을 돌아다니다 보면 어떤 링크는 클릭을 하면 보고 있던 브라우저(문서)에서 링크된 주소로 바로 갈때도 있고 어떤 링크는 클릭을 하면 새로운 창이 뜨면서 열리는 경우도 있습니다. 이건 왜 그럴까요? 이건 링크태그의 속성을 이용하는 방식인데 <a href="주소" target="_self"></a> 이렇게 하면 보고 있던 창에서 열리고 <a href="주소" target="_blank"></a> 하면 새로운 창에서 열리게 됩니다. target="조건"을 주는 것이죠. 한 번 볼까요?

보고 있던 창에서 열기

새로운 창에서 열기

이제 아시겠죠? 만약 target="조건" 부분을 생략하게 되면 target="_self"와 같습니다. 그냥 보고 있던 창에서 열리게 됩니다.

오늘 만든 페이지는 http://www.ijunnong.net/webzine/lecture/main.htm에서 확인하시면 됩니다.

오늘 강좌 내용을 다시 보니 좀 어수선하네요. 프레임셋을 정하는 부분과 각 프레임에 문서를 불러올 수 있다는 것만 일단 이해하시면 되겠습니다. 그 외에 배경으로 사진을 넣은 것 그리고 프레임에서 주소를 불러올 때 target으로 지정하는 부분에 대한 것은 다음 시간에 웹 상의 "경로"에 대한 것을 배우면서 함께 설명하겠습니다. 다음주에 뵙도록 하죠^^