|
|
| 최초 작성일 |
2003년 3월 20일 |
| 최근 수정일 |
2003년 3월 24일 |
| 작성자 |
김덕영 (taiji) | |
안녕하세요. 초보자를 위한 HTML 강좌 다섯번째 시간입니다.
지난 강좌에서 우리는 테이블의 개념과, 테이블의 기본 속성에 대해서 알아보았습니다.
하지만 단지 하나의 셀로 이루어진 테이블이었기에 약간을 썰렁한 감이 없지 않았는데요.
오늘은 그 썰렁한 감을 극복하기 위해.. 조금은 복잡한 테이블에 도전을 해 보도록 하겠습니다.
여러개의 셀로 이루어진 테이블을 위해서는 행과 열을 지정해 주어야 하는데요.
HTML 에서 행을 의미하는 태그는 <TR>, 열을 의미하는 태그는 <TD> 태그가 되겠습니다.
(행을 의미하는 <TR> 태그는 Table Row 의 약자이고, 열을 의미하는 <TD> 태그는 Table Data 의 약자라는 것 정도는 상식적으로 알아두시는 것이 좋겠습니다.)
만약 2행 5열의 테이블을 만든다면, 아마도 다음과 같은 모양이 될 것 같네요.
위 테이블의 소스는 다음과 같습니다.
<TABLE ALIGN=CENTER WIDTH=100% BORDER=1>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
</TABLE>
| |
행을 의미하는 <TR> 태그를 연 후에, 그안에 열을 의미하는 <TD> 태그를 추가하게 됩니다.
하나의 <TR> 태그 안에는 여러개의 <TD> 태그가 들어갈 수 있습니다.
(이것은 한 행에 여러 개의 열이 들어갈 수 있는 이치와 마찬가지입니다.)
또한 첫 행에서 하나의 <TR> 태그 안에 5개의 <TD> 태그가 사용되었다면,
그 다음 행에서도 역시 5개의 <TD> 태그가 사용되어야 합니다. (상식적인 이야기입니다.)
또 하나의 상식적인 이야기로.. <TR> 안에는 <TD> 가 들어갈 수 있지만,
<TD> 안에는 <TR> 이 들어갈 수 없습니다. (열 안에 행이 들어갈 수 없다는 의미지요.)
그렇다면 행을 의미하는 <TR> 태그의 속성에 대해서 살펴보도록 할까요?
| TR 태그의 속성 정리 |
| 1. |
ALIGN
<TR> 태그 안에 있는 열의 내용을 어느쪽으로 정렬할지 결정하는 속성입니다.
(지정해주면 그 행에 해당하는 모든 열(<TD>)이 영향을 받게 됩니다.)
LEFT(왼쪽), RIGHT(오른쪽), CENTER(가운데) 값중 하나를 사용할 수 있습니다.
만약 이 속성을 지정해 주지 않는다면 기본값은 LEFT 가 됩니다.
|
| 2. |
HEIGHT
그 행의 높이를 나타냅니다. 단위는 역시 픽셀(Pixel)을 사용합니다.
이제 좀 익숙해진 분들께서는 '어? WIDTH 는 왜 안나오지?' 하실지도 모르겠네요.
WIDTH 태그는 <TR> 태그에서는 사용되지 않습니다. (소용이 없지요.)
그 이유는.. <TR> 태그는 '행' 이 있음을 의미하는 다소 개념적인 태그이기 때문인데요.
그래서 <TR> 태그만 적고 화면을 보면 아무것도 보여지지 않게 됩니다.
|
| 3. |
VALIGN
ALIGN 이 좌우 정렬이었다면, VALIGN 은 상하 정렬이 되겠습니다.
값으로는 TOP(위), MIDDLE(중앙), BOTTOM(아래) 중 하나를 사용할 수 있으며
지정하지 않을 경우에는 기본적으로 중앙(MIDDLE) 정렬을 하게 됩니다.
|
| 4. |
BGCOLOR
그 행의 배경색을 지정합니다. 물론 모든 열이 전부 영향을 받게됩니다.
그렇다면.. <TABLE> 의 BGCOLOR 에서 회색(#CCCCCC) 을 지정한 다음,
<TR> 의 BGCOLOR 에서 흰색(#FFFFFF) 을 지정하면 어떻게 될까요?
정답은.. '전체 테이블 색깔은 검되 해당 <TR> 에서만 흰색' 입니다. 맞추셨나요?
(두번째 <TR> 에서만 TR BGCOLOR=#FFFFFF 을 적용한 경우)
| 1번째 <TR> |
| 2번째 <TR> |
| 3번째 <TR> |
| |
자.. 이렇게 행을 의미하는 <TR> 태그에 대해서 알아보았습니다.
그럼 이 여세를 몰아서.. 열을 의미하는 <TD> 태그의 속성에 대해서도 알아보도록 할까요?
| TD 태그의 속성 정리 |
| 1. |
ALIGN
셀 안의 내용을 어느쪽으로 정렬할지 결정하는 속성입니다.
LEFT(왼쪽), RIGHT(오른쪽), CENTER(가운데) 값중 하나를 사용할 수 있습니다.
<TR> 태그와 마찬가지로 이 속성을 지정해 주지 않는다면 기본값은 LEFT 가 됩니다.
| ALIGN=LEFT |
ALIGN=CENTER |
ALIGN=RIGHT | |
|
| 2. |
WIDTH
셀의 넓이를 나타내는 속성입니다. 픽셀(Pixel) 또는 비율(%)을 사용합니다.
|
| 3. |
HEIGHT
셀의 높이를 나타내는 속성입니다. 픽셀(Pixel)로 표시합니다.
하나의 <TR> 에 여러개의 <TD> 가 있을 때, 하나의 <TD> 에 HEIGHT 속성을
지정하면 그 <TR> 에 해당하는 모든 <TD> 의 HEIGHT 에 적용이 됩니다.
그렇다면 호기심 많은 분들께서는 이런 의문을 가지게 될지도 모르겠네요.
'만약 한 <TR> 안에 있는 여러개의 <TD> 에서 각각의 HEIGHT 를 다르게 준다면?'
이라고 말이지요. (설령 생각 안하셨다 하더라도.. 듣고 나니 궁금해 지지 않나요?)
정답은 '가장 큰 HEIGHT 값으로 통일된다' 가 되겠습니다. 다음처럼 말이지요.
|
| 4. |
BGCOLOR
셀의 배경 색깔을 지정하는 속성입니다. 부연 설명이 필요없겠죠?
| BGCOLOR=#FF0000 |
BGCOLOR=#00FF00 |
BGCOLOR=#0000FF | |
|
| 5. |
BACKGROUND
셀의 배경에 들어가는 그림을 지정합니다. URL 을 값으로 받습니다.
지난 시간에 설명드렸던 테이블의 속성과 사용방법이 일치합니다.
|
| 6. |
VALIGN
상하 정렬을 의미하는 VALIGN 을 <TD> 단위로 지정할 수 있습니다.
TOP, MIDDLE, BOTTOM 의 속성 값을 사용하실 수 있습니다.
| VALIGN=TOP |
VALIGN=CENTER |
VALIGN=BOTTOM | |
|
| 7. |
COLSPAN
이 속성은 열을 합칠때의 사용하는 속성입니다. (몇개의 열을 합칠지를 지정합니다.)
아래의 표를 참고하면서 설명을 드리도록 하겠습니다.
| 1st <TD> |
2nd <TD> |
3rd <TD> |
4th <TD> |
5th <TD> |
| COLSPAN=2 |
3rd <TD> |
4th <TD> |
5th <TD> |
| COLSPAN=3 |
4th <TD> |
5th <TD> |
| COLSPAN=4 |
5th <TD> |
| COLSPAN=5 | |
위에서 보신 대로, COLSPAN 은 열을 합칠 때 사용합니다.
한 행(<TR>)에 5개의 열(<TD>) 로 구성되어 있는 테이블에서,
COLSPAN=3 을 사용했다고 하면 나머지 <TD> 는 두개를 더 사용하셔야 합니다.
(COLSPAN=3 은 3개의 열을 합쳤다는 뜻이기 때문이지요. 3+2 = 5 가 맞지요?)
|
| 8. |
ROWSPAN
이 속성은 여러개의 행의 <TD> 를 세로로 합칠 때에 사용하는 속성입니다.
COLSPAN 이 가로의 개념이었다면, ROWSPAN 은 세로의 개념이 되겠습니다.
이 부분도 아래의 표를 보시면서 설명드리도록 하겠습니다.
| 1st <TD> |
ROWSPAN
=2 |
ROWSPAN
=3 |
ROWSPAN
=4 |
ROWSPAN
=5 |
| 1st <TD> |
| 1st <TD> |
2nd <TD> |
| 1st <TD> |
2nd <TD> |
3rd <TD> |
| 1st <TD> |
2nd <TD> |
3rd <TD> |
4th <TD> | |
COLSPAN 과 ROWSPAN 을 사용할 때 주의하셔야 할 점이 있는데요.
그것은.. <TD> 의 수를 잘 맞추셔야 한다는 것입니다.
COLSPAN 과 ROWSPAN 을 사용하시는 것은 좋지만, 마구잡이로 사용하다 보면
<TD> 의 개수가 맞지 않아서 테이블이 깨지는 현상이 발생하는 것을 볼 수 있거든요.
그러므로 이 속성은 충분한 연습을 하신 후, 사용하실 것을 권장해 드리는 바입니다.
|
| 9. |
NOWRAP
마지막으로 말씀드릴 <TD> 의 속성은 NOWRAP 이 되겠습니다.
이것은 셀 안에서 글이 길어졌을때, 자동으로 줄이 바뀌는 현상을 막는 속성인데요.
게시판 목록에서 제목이 두줄로 되는 것을 꺼리는 분들이 많이 사용하시는 속성입니다.
(NOWRAP 적용안함. TD WIDTH=50%)
| 여러분들께서는 지금 NOWRAP을 적용하지 않은 <TD>를 보고 계십니다. |
| |
지정된 셀의 넓이보다 글이 길어지면 자동적으로 줄바꿈을 하게 되는데요.
NOWRAP 속성을 적용하면 강제로 셀을 넓히며 줄바꿈이 일어나지 않게 됩니다.
(NOWRAP 적용함. TD WIDTH=50%)
| 여러분들께서는 지금 NOWRAP을 적용한 <TD>를 보고 계십니다. |
| |
| |
오늘은 TABLE 을 구성하는 <TR>과 <TD> 에 대해서 살펴보았습니다.
많은 이야기를 한 것 같습니다만, 내용을 잘 들여다보면 비슷한 내용의 반복이 많습니다.
이런 기능을 이용하여 HTML 페이지를 아름답게 꾸미는 것은 전적으로 여러분들의 몫입니다.
이제 도구와, 도구의 사용법을 알았으니.. 남은것은 도구에 익숙해 지는 일 뿐입니다.
'HTML.. 쉽게 봤는데 생각보다 까다로운걸?' 이라고 생각하시는 분들이 계신가요?
저는 가끔.. '어떻게 하면 HTML 을 쉽게 마스터할 수 있을까요?' 라는 질문을 받습니다.
그럴때마다 잔뜩 거만한 포즈를 취하고서는 다음과 같이 이야기를 해드립니다.
'그냥 열심히 하면 됩니다..'
'..........'
흠흠.. 농담이고요. (사이트 바로 닫아버리는 분들이 계시는군요. -_-a)
제가 추천해 드리는 방법은.. 마음에 드는 사이트(그다지 어려워 보이지 않는)를 하나 골라서
'소스보기' 를 선택하셔서 나온 해당 페이지의 소스를 분석해 보는 것입니다.
그리고 본인이 그 페이지와 똑같은 페이지를 도움없이 작성해 보는 것도 좋겠지요.
원시적이기는 하지만 이것이 가장 효과적인 방법이라고 생각합니다.
자, 이것으로서 오늘의 강좌를 마치도록 하겠습니다. 수고 많이 하셨습니다.
'잘 모르겠는걸~' 하는 분들께서는 눈으로만 강좌를 훑어보지 마시고,
반드시 메모장이나 에디터 프로그램을 열어서 직접 소스를 작성해 보시기 바랍니다.
그럼 다음 시간까지 안녕히 계세요~.
| | | |