이번시간에는 테이블의 실전적인 감각을 키워보도록 하자.
 
'테이블을 마스터해보자'를 통해 테이블을 기본적으로 다루는 법을 학습했으리라 믿는다.
 
테이블을 배웠지만 막상 어디에 어떻게 써야할지(적재적소) 막막한 분도 있을것이다.
테이블이 어디에 쓰이냐고 물으신다면 '홈페이지의 전체'에 쓰인다고 말하겠다. 기본적인 홈페이지의 골격도 테이블로 만들고 글을 써넣는 곳의 골격도 테이블로 만들고... 즉 홈페이지에서 내가 원하는 위치에 무언가(글이던 그림이던) 넣고 싶다! 할때 쓰이는 게 바로 테이블이다.
 
 
 
잘 와닿지 않는가? 그렇다면 GJMagic(http://newpark210.cafe24.com)을 보자
 

 

Title
M
e
n
u		 Main M
e
n
u
(실제로는 이와 아주 조금 다르게 구현되어있다.)
 
 
홈페이지를 보았을 때 대략 큰 틀이 저런 모양이라는게 느껴지는 가? 그렇다. GJMagic도 위와 같이 저러한 모양의 테이블로 구성되어있다. (단 크기가 좀 더 크지만)
 
알아야 할 것은 테이블 안에 테이블이 들어갈 수 있다는 점(예: 1)이다. 그래서 일단 위와같이 큰 틀을 만든 다음 다시 세부적인 조그마한 칸들은 은 칸 안에 새로운 테이블을 생성함으로서 쉽게 만들 수 있다. 즉 골격은 골격대로 만들면 되고 안의 작은 메뉴들은 메뉴대로 만들면되고.. 잘게 나누어 생각하면 된다는 것이다. GJMagic에서 왼쪽 메뉴에서 나누어져 있는 메뉴들이 바로 그러한 방법으로 만들어져 있다. (실제로는 조금 더 많이 나누어져 있다)
 
예1)
<table>
<tr>
<td><table><tr><td></td></tr></table>
</td>
</tr>
</table>
 
 
따라서 홈페이지를 만들자! 라고 결심을 했으면 가장 먼저 생각해야할 것은 홈페이지의 골격을  생각해야 한다.
 
 


Title
M
e
n
u		 Main
(왼쪽 메뉴)
 
 

Title
Main M
e
n
u
(오른쪽 메뉴)
 
 

Title + menu
Main
(심플 탑 메뉴)

 
(많이 쓰이는 다양한 골격들)
 
 
그 다음 속성들을 살펴보자
테이블을 만지면서 건드리는 속성들은 다음과 같다
 
border - 테이블 선 굵기
bgcolor - 배경색 지정
width, height - 넓이, 높이 조절(단위:px)
cellspacing, cellpadding - 셀 간 간격, 셀 안의 여백 크기 조절(단위:px)
align, valign - 가로/세로 정렬 (left, right, center / top, bottom, middle)
colspan, rowspan - 셀 합치기
 
워낙 간단하기 때문에 부연설명을 하지 않겠다.(혹은 마스터해보자에서 배운 것이다.) cellspacing과 padding은 1px테이블만들기를 참고하자(직접 만져보는 것이 가장 좋다)
 
 
이 속성들을 잘 이용하여 기본골격을 만들자.
반드시 몇번의 시행착오를 거치더라도 자신의 힘으로 만들어보도록 하자.
 
기본적인 골격테이블의 크기는 화면해상도를 참고하여 만들면 된다.
아직까지 1024x768이 가장 많이 쓰이는 해상도이므로, 가능하면 이 크기보다 작게 만들어야 한다. 예) width='800' height='600'
 
참고로 테이블은 내용이 없다면(TD안에) TABLE 의 폭과 높이만 조절해서는 화면에 나오지 않는다(실질적으로 화면에 보이는 것은 TD이므로 TD에 내용을 쓰거나, 아니면 TD의 폭과 높이를 조절해주자)
 
기본 골격을 만든다음 각각의 칸에 새로운 테이블을 집어넣음으로서 더 세부적으로 꾸며주자. 즉 타이틀은 타이틀대로, 메뉴는 메뉴대로 메인은 메인대로 따로 테이블을 새로이 생각하는 것이다.
 
 
이렇게 골격과 메뉴에 대한 디자인이 완성되면 테이블 내에 배경색을 집어넣는다던지 하는 방법으로 꾸밀 수 있을 것이다. 다음강의에서 RGB코드를 통해 다양한 색상을 집어넣는 방법을 알아보도록 하자.
이 게시물을..