초보의 [노프레임 무조건 따라하기] -13.알아 두어야 할 테이블 테그 정보
초보의 [노프레임 무조건 따라하기] -13.알아 두어야 할 테이블 테그
본문
이제 마지막 강좌입니다.
이번 강좌는
노프레임 홈페이지를 만들 때 꼭 알아야 할 테이블 테그에 대해서 공부합니다.
표를 짠 뒤 파일을 나눌 때
테이블 테그를 모르면 어디서 잘라야 할지 난감하게 됩니다.
이 시간을 통해서 테이블 테그에 대해서만은 확실하게 알아 두셨으면 합니다.
1. 그림을 보겠습니다.
2. 위의 그림은 아래와 같은 html 언어로 구성되어 있습니다.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>제목 없음</title>
<meta name="generator" content="Namo WebEditor v6.0">
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<table width="510" height="510" cellspacing="0" border="1" bordercolordark="white" bordercolorlight="black">
<tr>
<td width="318" bgcolor="lime"> </td>
<td width="318" bgcolor="#00CC00"> </td>
<td width="318" bgcolor="#009900"> </td>
</tr>
<tr>
<td width="318" bgcolor="#CCFF00" rowspan="2"> </td>
<td width="335" colspan="2" height="85" bgcolor="#CCCC00"> </td>
</tr>
<tr>
<td width="335" height="85" colspan="2" bgcolor="#CC9900"> </td>
</tr>
<tr>
<td width="318" bgcolor="aqua"> </td>
<td width="318" bgcolor="#00CCFF"> </td>
<td width="318" bgcolor="#0099FF"> </td>
</tr>
</table>
<p> </p>
</body>
</html>
3. 이 소스를 그림에 넣어 보면 다음과 같습니다.
그림을 보시니 테이블의 구조가 한눈에 파악이 되시죠?
여기서 유심히 봐야 할 것은
[라]와 [마]는 같은 가로줄 속에 있고 [바]는 단독적인 사각형 속에 있습니다.
[마]의 셀에서 가로줄로 나누어 [바]를 만들었기 때문에
[바]는 [라]와 [마]가 들어 있는 사각형 속에서 독립적으로 존재합니다.
4.
위의 그림을 바탕으로 하여 테이블 테그에 대해서 같이 알아 봅니다.
그누게시판에서 테그언어가 입력되면 게시판이 그 값을 받아 버리기 때문에
편의상 꺽쇠 괄호를 ( )이런 식으로 표현 하겠습니다.
하나하나 바꿔주려니 너무 손이 많이 가서...^^
5.
그림을 보면 table이 [가]에서 부터 [자]까지의 전체 표를 감싸고 있습니다.
그림을 보면서 정리합니다.
(table)......................테이블을 시작합니다.
(/table).....................테이블을 닫습니다.
(tr)..........................가로줄을 엽니다.
(/tr).........................가로줄을 닫습니다.
(td)..........................세로줄을 엽니다.
(/td).........................세로줄을 닫습니다.
여기서 잠시 다시 정리하여 보면
table안에서 tr이 가로 칸을 나누고 가로칸 안에서 td가 세로 칸을 나눕니다.
즉, 영역순으로 나열하면
table>tr>td의 순서가 됩니다.
6. 다음은 테이블의 속성 테그입니다.
table width
표의 너비를 결정합니다.
ex) (table width="652" height="500")
테이블의 너비를 652픽셀, 높이를 500픽셀로 한다는 뜻입니다.
td width
셀의 너비를 결정합니다.
ex) td width="30"
셀의 너비를 30픽셀로 고정한다는 의미입니다.
height
셀이나 테이블의 높이를 결정합니다.
ex) height="170"
셀이나 테이블의 높이를 170픽셀로 한다는 뜻입니다.
align
수평정렬 테그입니다.
왼쪽으로 정렬........align="left"
가운데 정렬...........align="center"
오른쪽으로 정렬.....align="right"
valign
수직정렬 테그입니다.
위쪽으로 정렬........valign="top"
중앙에 정렬...........valign="middle"
아래로 정렬...........valign="bottom"
기준선 정렬...........valign="baseline"
위의 테그들을 참고로 하여
너비 50, 높이 30 픽셀의 셀을
수평으로는 가운데로 수직으로는 중앙에 정렬 하게 하려면
(td width="50" height="50" align="center" valign="middle")처럼 하시면 됩니다.
쉽죠?
여기까지 기본적인 테이블 테그에 대해서 알아 보았습니다.
이 외에도 테그는 셀 수 없이 많습니다.
새로운 테그를 접하실 때마다 틈나는 대로 정리하여 두시면
더 이상 테그라는 말이 낯설지 않게 될 것입니다.
수고 하셨습니다.
이제 제 강좌는 여기서 마무리 합니다.
저 자신도 이제 겨우 그누보드로 홈페이지 하나를 만들어 본,
그누보드에 대해서만은 초보입니다.
초보의 어설픈 길 안내를 따라 오시다가 돌부리에 채인 분이 계시지나 않을까 염려 됩니다.
강좌를 마무리 하면서 노파심에서 말씀드립니다만
제가 해본 방법보다 더 좋은 방법들은 아주 많습니다.
저는 단지 혼자 수풀을 헤치며 산에 올라가 보았고
제가 넘어지고 구르면서 어쨌든 저 나름대로의 길이랍시고를 내 보았습니다.
저처럼 그누보드를 처음 대하는 분들께 어쨌든 제가 먼저 찔리고 나뒹군 길이기게
그길로 함께 가시면 조금더 편하지 않겠나 싶은 마음에서 부끄러움을 무릅쓰고 여기까지 왔습니다.
혹시 저를 따라 오시다가 오히려 오리무중의 안개 속에서 길을 잃은 분이 없으셨으면 합니다.
그누보드에는 제가 올라갔던 험한 길이 아닌,
탄탄하고 잘 닦여진 지름길이 분명 많을 것입니다.
제 어설픈 강좌를 보신 분들이 빨리 그 길을 찾으시길 기원합니다.
그동안 수고 하셨습니다.
이번 강좌는
노프레임 홈페이지를 만들 때 꼭 알아야 할 테이블 테그에 대해서 공부합니다.
표를 짠 뒤 파일을 나눌 때
테이블 테그를 모르면 어디서 잘라야 할지 난감하게 됩니다.
이 시간을 통해서 테이블 테그에 대해서만은 확실하게 알아 두셨으면 합니다.
1. 그림을 보겠습니다.
2. 위의 그림은 아래와 같은 html 언어로 구성되어 있습니다.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>제목 없음</title>
<meta name="generator" content="Namo WebEditor v6.0">
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<table width="510" height="510" cellspacing="0" border="1" bordercolordark="white" bordercolorlight="black">
<tr>
<td width="318" bgcolor="lime"> </td>
<td width="318" bgcolor="#00CC00"> </td>
<td width="318" bgcolor="#009900"> </td>
</tr>
<tr>
<td width="318" bgcolor="#CCFF00" rowspan="2"> </td>
<td width="335" colspan="2" height="85" bgcolor="#CCCC00"> </td>
</tr>
<tr>
<td width="335" height="85" colspan="2" bgcolor="#CC9900"> </td>
</tr>
<tr>
<td width="318" bgcolor="aqua"> </td>
<td width="318" bgcolor="#00CCFF"> </td>
<td width="318" bgcolor="#0099FF"> </td>
</tr>
</table>
<p> </p>
</body>
</html>
3. 이 소스를 그림에 넣어 보면 다음과 같습니다.
그림을 보시니 테이블의 구조가 한눈에 파악이 되시죠?
여기서 유심히 봐야 할 것은
[라]와 [마]는 같은 가로줄 속에 있고 [바]는 단독적인 사각형 속에 있습니다.
[마]의 셀에서 가로줄로 나누어 [바]를 만들었기 때문에
[바]는 [라]와 [마]가 들어 있는 사각형 속에서 독립적으로 존재합니다.
4.
위의 그림을 바탕으로 하여 테이블 테그에 대해서 같이 알아 봅니다.
그누게시판에서 테그언어가 입력되면 게시판이 그 값을 받아 버리기 때문에
편의상 꺽쇠 괄호를 ( )이런 식으로 표현 하겠습니다.
하나하나 바꿔주려니 너무 손이 많이 가서...^^
5.
그림을 보면 table이 [가]에서 부터 [자]까지의 전체 표를 감싸고 있습니다.
그림을 보면서 정리합니다.
(table)......................테이블을 시작합니다.
(/table).....................테이블을 닫습니다.
(tr)..........................가로줄을 엽니다.
(/tr).........................가로줄을 닫습니다.
(td)..........................세로줄을 엽니다.
(/td).........................세로줄을 닫습니다.
여기서 잠시 다시 정리하여 보면
table안에서 tr이 가로 칸을 나누고 가로칸 안에서 td가 세로 칸을 나눕니다.
즉, 영역순으로 나열하면
table>tr>td의 순서가 됩니다.
6. 다음은 테이블의 속성 테그입니다.
table width
표의 너비를 결정합니다.
ex) (table width="652" height="500")
테이블의 너비를 652픽셀, 높이를 500픽셀로 한다는 뜻입니다.
td width
셀의 너비를 결정합니다.
ex) td width="30"
셀의 너비를 30픽셀로 고정한다는 의미입니다.
height
셀이나 테이블의 높이를 결정합니다.
ex) height="170"
셀이나 테이블의 높이를 170픽셀로 한다는 뜻입니다.
align
수평정렬 테그입니다.
왼쪽으로 정렬........align="left"
가운데 정렬...........align="center"
오른쪽으로 정렬.....align="right"
valign
수직정렬 테그입니다.
위쪽으로 정렬........valign="top"
중앙에 정렬...........valign="middle"
아래로 정렬...........valign="bottom"
기준선 정렬...........valign="baseline"
위의 테그들을 참고로 하여
너비 50, 높이 30 픽셀의 셀을
수평으로는 가운데로 수직으로는 중앙에 정렬 하게 하려면
(td width="50" height="50" align="center" valign="middle")처럼 하시면 됩니다.
쉽죠?
여기까지 기본적인 테이블 테그에 대해서 알아 보았습니다.
이 외에도 테그는 셀 수 없이 많습니다.
새로운 테그를 접하실 때마다 틈나는 대로 정리하여 두시면
더 이상 테그라는 말이 낯설지 않게 될 것입니다.
수고 하셨습니다.
이제 제 강좌는 여기서 마무리 합니다.
저 자신도 이제 겨우 그누보드로 홈페이지 하나를 만들어 본,
그누보드에 대해서만은 초보입니다.
초보의 어설픈 길 안내를 따라 오시다가 돌부리에 채인 분이 계시지나 않을까 염려 됩니다.
강좌를 마무리 하면서 노파심에서 말씀드립니다만
제가 해본 방법보다 더 좋은 방법들은 아주 많습니다.
저는 단지 혼자 수풀을 헤치며 산에 올라가 보았고
제가 넘어지고 구르면서 어쨌든 저 나름대로의 길이랍시고를 내 보았습니다.
저처럼 그누보드를 처음 대하는 분들께 어쨌든 제가 먼저 찔리고 나뒹군 길이기게
그길로 함께 가시면 조금더 편하지 않겠나 싶은 마음에서 부끄러움을 무릅쓰고 여기까지 왔습니다.
혹시 저를 따라 오시다가 오히려 오리무중의 안개 속에서 길을 잃은 분이 없으셨으면 합니다.
그누보드에는 제가 올라갔던 험한 길이 아닌,
탄탄하고 잘 닦여진 지름길이 분명 많을 것입니다.
제 어설픈 강좌를 보신 분들이 빨리 그 길을 찾으시길 기원합니다.
그동안 수고 하셨습니다.
추천
6
6
댓글 18개
저도 많은 홈페이지를 만들어보아 습관처럼 그렇게 해오던것들을
자세히도 짚어주시니...많은 저와같은 초보분들은 정말 교과서를 얻은기분일듯합니다.
화이팅입니다.
자세히도 짚어주시니...많은 저와같은 초보분들은 정말 교과서를 얻은기분일듯합니다.
화이팅입니다.
정말 매우매우 너무나 베리고맙습니다.
수고가 많으셨습니다.
여기까지 왔습니다 아주 잘됩니다
이제부턴 팁게시판을 뒤적이며 지금까지 배운거 교과서로 삼고
하나하나 집어가며 홈을 완성을 해볼까 합니다
감사합니다. ^^
여기까지 왔습니다 아주 잘됩니다
이제부턴 팁게시판을 뒤적이며 지금까지 배운거 교과서로 삼고
하나하나 집어가며 홈을 완성을 해볼까 합니다
감사합니다. ^^
수고하셨습니다...
홈 완성되면 꼭 초대하여 주시길..^^
홈 완성되면 꼭 초대하여 주시길..^^
감사합니다. 선생님.
뜨락의 이름님이 기초강좌를 다 만드신 다음에 그누보드를 알게 된 게 저한테는 행운입니다.
고수들에겐 필요없겠지만, 초보들에게 이 강좌는 지속되고 존재하는 한
'깊은 산속 옹달샘'으로 계속 남게 될 것입니다.
뜨락의 이름님이 기초강좌를 다 만드신 다음에 그누보드를 알게 된 게 저한테는 행운입니다.
고수들에겐 필요없겠지만, 초보들에게 이 강좌는 지속되고 존재하는 한
'깊은 산속 옹달샘'으로 계속 남게 될 것입니다.
잘쓰셨네요^^
감사합니다^^
감사합니다^^
테이블에 대한 이해가 가는군요. 좋은 정보 감사합니다. 힘내세요.
수고하셧습니다.
몇일간 이 강좌를 보느라 시간가는줄 몰랐습니다.
지나치기 쉬운부분부터 그누보드를 처음 접하는 모든분들께 기본교과서와 같은 자료가 아니였나 생각합니다.
좀 더 많은 부분을 설명해주시면 고맙겠지만, 나머지는 사용자의 몫이라 생각하고 지금까지의 강좌를 몇번씩 되풀이하면 아마도 다들 고수?가 되어있지 않을까요?
지나치기 쉬운부분부터 그누보드를 처음 접하는 모든분들께 기본교과서와 같은 자료가 아니였나 생각합니다.
좀 더 많은 부분을 설명해주시면 고맙겠지만, 나머지는 사용자의 몫이라 생각하고 지금까지의 강좌를 몇번씩 되풀이하면 아마도 다들 고수?가 되어있지 않을까요?
오호, 정말 한 눈에 보기 좋습니다. 드림위버 아니면 웹페이지 한 장도 제대로 못 만드는 제게 정말 도움이 됩니다.
아직도.. 잘 모르겠지만.. 처음부터 개념을 잘 생각해서...
다시 따라 해볼려고 합니다..
부탁 받아서 만들긴 하지만. 돈 받고 하는 것이라. 쩝.
만들어야 하거든요..
다시 따라 해볼려고 합니다..
부탁 받아서 만들긴 하지만. 돈 받고 하는 것이라. 쩝.
만들어야 하거든요..
그동안 그누보드를 알고 지낸지 일년이 다 되여 가면서도
그누보드 안에 이렇게 값진 강의가 있는줄 왜 지금껏 몰랐을까 합니다..
성심을 다해서 강의를 만드신 '뜨락의이름, 님께 진심으로 감사 드립니다...*^^*
그누보드 안에 이렇게 값진 강의가 있는줄 왜 지금껏 몰랐을까 합니다..
성심을 다해서 강의를 만드신 '뜨락의이름, 님께 진심으로 감사 드립니다...*^^*
정말 큰 도움이 되었습니다.
감사드립니다.
감사드립니다.
정말 저에게는 많은 도움이 되었습니다
이러저리 제로보드 사용하다 그누보드 와 많이 힘들었는데
강좌보면서 개념 정리하고 따라하면서 이해 되었습니다
아무 보수없이 시간내어서 제작하신거 보면 ~
저는 돈을 준다고 해도 힘들다는 생각이 ㅋㅋㅋ
항상 좋은 일만 가득하시길....
이러저리 제로보드 사용하다 그누보드 와 많이 힘들었는데
강좌보면서 개념 정리하고 따라하면서 이해 되었습니다
아무 보수없이 시간내어서 제작하신거 보면 ~
저는 돈을 준다고 해도 힘들다는 생각이 ㅋㅋㅋ
항상 좋은 일만 가득하시길....
감사합니다..감사합니다.
정말 감사합니다.
수고하셨습니다
늦게나마 PHP와 그누보드를 공부하며 웹에 입문하고 있습니다.
PHP강의 자료는 적지않게 찾을 수 있었는데, 그누보드를 어떻게 접근해야 할지 막막했었습니다.
게시판의 팁이나 질답도 아는게 없으니 너무 막막했구요.
뜨락님의 강의 덕분에 첫발은 디딜수 있게 된것 같습니다.
특히 기본적인 구도를 이해하는데 너무 도움이 많이 되었습니다. 이걸 몰랐으니 다른 이야기들이 모두 선문답처럼 들린게 당연하더군요.
벌써 7년이 넘은 강의지만 아직도 저같은 이들에게 도움을 주고 있네요.
정말 감사합니다.
PHP강의 자료는 적지않게 찾을 수 있었는데, 그누보드를 어떻게 접근해야 할지 막막했었습니다.
게시판의 팁이나 질답도 아는게 없으니 너무 막막했구요.
뜨락님의 강의 덕분에 첫발은 디딜수 있게 된것 같습니다.
특히 기본적인 구도를 이해하는데 너무 도움이 많이 되었습니다. 이걸 몰랐으니 다른 이야기들이 모두 선문답처럼 들린게 당연하더군요.
벌써 7년이 넘은 강의지만 아직도 저같은 이들에게 도움을 주고 있네요.
정말 감사합니다.
