|
|
|
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 04편 : 테이블
|
#1. 테이블이란 무엇인가?
HTML에서 하이퍼링크만큼이나, 혹은 더 많이 사용되는 것이 바로 테이블입니다.
테이블을 마스터하면 HTML은 끝난 것과도 같죠.
테이블이란 웹페이지에서 '표'와 같은 형식으로 보여지는 바둑판식 상자라고 보시면 됩니다.
아래 예를 보시죠.
테이블은 사각형의 격자무늬라는 모양의 한계를 갖고 있기는 하지만,
다양한 설정을 해줄 수 있기 때문에 그 활용 범위가 굉장히 높습니다.
#2. 테이블의 용도
1. 표를 만든다.
당연한 이야기이지만 테이블의 첫 번째 용도는 표를 만드는 것입니다.
태그를 이용한 레고쌓기 놀이를 통해 원하는 표를 만들어냅니다.
| 이름 | 성별 | 키 | 체중 | 비고 | | 홍길동 | 남자 | 171Cm | 68Kg | 도적 | | 임꺽정 | 남자 | 180Cm | 85Kg | 도적 | | 박문수 | 남자 | 168Cm | 52Kg | 암행어사 | | | | | | | | | | | | |
2. 내용을 나눈다.
이건 위의 1번과 비슷한 내용입니다만, 문서의 내용을 표를 통해서 나눌 수 있습니다.
여기서 중요한건 표 안에서 쓰는 태그와 표 밖에서 쓰는 태그는 서로 영향을 안 준다는 겁니다.
즉, 표를 사용하면 태그의 영향권에서 표 안의 내용을 (일부) 격리됩니다.
(예) <s></s>안에 테이블을 만들어서 글자를 써보기.
보시는 것 처럼
태그 영향을 안 받습니다.
있죠.
물론 이건 하나의 예시일뿐이고 실재로 이런 용도로 쓴다는 것은 아닙니다.
쓸 수도 있지만 그냥 태그를 닫았다가 다시 여는 게 편하겠죠.
3. 정렬을 시키거나 공간을 맞춘다.
이건 테이블의 아주 중요한 용도입니다.
아래의 예를 보죠.
(예)
사이어인 : 원숭이로 변한다.
나메크성인 : 머리에 촉수가 있다.
인조인간18호 : 크리링, 이 부러운 녀석.
이것을 :(콜론)을 기준으로 정확히 열을 맞춰서 정렬시키고 싶습니다.
하지만 일반적인 스페이스바로는 정렬시키는 게 귀찮을 뿐 아니라 불가능할 때도 많아요.
특히 특수문자나 영문, 숫자, 한글 등이 혼용될 경우는요. 하지만 테이블을 쓰면 간단해집니다.
사이어인
나메크성인
인조인간18호 | : 원숭이로 변한다.
: 머리에 촉수가 있다.
: 크리링, 이 부러운 녀석. |
테이블을 안 보이게 하면 끝.
사이어인
나메크성인
인조인간18호 | : 원숭이로 변한다.
: 머리에 촉수가 있다.
: 크리링, 이 부러운 녀석. |
또한 테이블은 글자 뿐만 아니라 그림 등 표현할 수 있는 여러가지 요소를 배치하는 데에 중요한 역할을 합니다. 예를 들어서 그림으로부터 자기가 원하는 만큼의 거리를 정확히 벌린 후 글씨를 쓰고 싶을 때,
스페이스바, 공백문자, 엔터키 등은 대략의 거리는 나와도 정확하게는 안 나오죠.
하지만 그럴 때 테이블의 길이를 정확히 맞추고 내용을 비우면 거리를 맞출 수 있습니다.
아래와 같이요.
|  |
| 글자 |
마찬가지로 테이블을 안 보이게 할 수도 있죠.
HTML작업을 할 때 어지간한 것은 테이블로 거리를 맞추시는 게 좋습니다.
안 그러면 뒤늦게 세밀한 조정이 필요하다는 것을 알게 되었을 때 복잡해진 태그들 위에 테이블을 새로 만들어야할 수도 있으니까요.
그러면 이제 테이블을 만들어보죠.
#3. 테이블을 만들어보자.
[table 태그] [tr 태그] [td 태그]
테이블은 3개의 태그가 기본적으로 항상 사용됩니다. 바로 <table><tr><td>입니다.
이것의 기본적인 사용형태는 아래와 같습니다
(예)
<table>
<tr>
<td>
내용
</td>
</tr>
</table>
|
<table>은 테이블을 만들어주고 테이블의 속성을 지정해주는 태그입니다.
하나의 테이블에는 하나의 테이블 태그가 쓰이는데 테이블의 내용은 항상 이 안에 들어갑니.
<table>내용이나 다른 하위 태그</table>
<tr>은 테이블의 세로칸을 만들었다는 뜻입니다.
<td>는 테이블의 가로칸을 만들었다는 뜻입니다.
한 번 볼까요?
아래는 <tr>과 <td>가 한 번씩 쓰였습니다.
그러면 가로와 세로가 한 번씩 만들어졌으니 1*1, 즉 한 칸 짜리 표가 나올 것입니다.
(예)
<table>
<tr>
<td>
내용
</td>
</tr>
</table>
| (결과)
|
<tr>과 <td>의 사용은 보통
<tr> 태그의 안에 <td> 태그를 사용합니다.
그리고 <td> 태그의 안에는 표 안의 공간에 들어갈 내용을 넣어줍니다.
<tr><td>내용</td></tr>
이런 식으로요. 세로 칸을 하나 만들었는데 그 안에 가로 칸이 하나 있다는 뜻이죠.
이렇게 표 안에 만들어진 한 칸의 네모상자를 셀(cell)이라고 부릅니다.
<table></table>이 테이블을 만들거라는 태그라면
<tr></tr><td></td>는 그 안에 셀을 만들기 위한 태그인거죠.
그러면 다시 한 번 보세요.
<tr>은 테이블의 세로 칸을 만들었다는 뜻이고
<td>는 테이블의 가로 칸을 만들었다는 뜻입니다.
그러면 가로와 세로 칸을 두 번씩 만든 아래의 태그는 어떻게 보여질까요?
(예)
<table>
<tr>
<td>
내용1
</td>
</tr>
<tr>
<td>
내용1
</td>
</tr>
</table>
|
답은 아래와 같습니다.
왜 이렇게 될까요?
(첫 번째 세로 칸을 만들었다)
(가로 칸을 만들었다)
내용1
(가로 칸이 끝났다)
(첫 번째 세로 칸이 끝났다)
(두 번째 세로 칸을 만들었다)
(가로 칸을 만들었다)
내용2
(가로 칸이 끝났다)
(두 번째 세로 칸이 끝났다)
이렇게 되었기 때문입니다.
태그가 레고라고 한 것이 기억나시나요? 그냥 쌓고 조립하기 때문입니다.
그러면 이번에는 이렇게 해보죠.
세로 칸을 한 번 만들고 그 안에 가로 칸을 두 번 만들었습니다.
(예)
<table>
<tr>
<td>
내용1
</td>
<td>
내용2
</td>
</tr>
</table>
|
결과는 어떨까요?
(세로 칸을 만들었다)
(첫 번째 가로 칸을 만들었다)
내용1
(첫 번째 가로 칸이 끝났다)
(두 번째 가로 칸을 만들었다)
내용2
(두 번째 가로 칸이 끝났다)
(세로 칸이 끝났다)
아시겠나요? 이해만 되면 참 쉽죠? 그냥 블럭쌓기, 레고 놀이이니까요^^
그러면 이번에는 앞에 나왔던 이 모양을 만들어 봅시다.
우선 그 동안 배운 것만으로 한 번 만들어볼까요?
세로를 만들고, 가로를 만들고 끝내고, 가로를 만들고 끝내고, 세로를 끝내고,
세로를 만들고, 가로를 만들고 끝내고, 세로를 끝내고.
이렇게 해보죠.
(예)
<table>
<tr>
<td>
내용1
</td>
<td>
내용2
</td>
</tr>
<tr>
<td>
내용3
</td>
</tr>
</table>
|
만들어 질까요?
안타깝지만 안됩니다.
이렇게 되버리네요. 왜 그럴까요?
( td 속성 : colspan )
이유는 테이블 안에 일단 셀을 만들면, 아랫 줄에 만들어지는 셀의 간격도 위의 줄에 맞춰지기 때문입니다.
위에 두 칸 짜리 가로를 만들었는데 아래에는 하나 밖에 안 만들었으니, 공간이 하나 비는거죠.
이럴 때 지정해주는 td 태그의 속성이 바로 colspan 입니다.
colspan은 해당 셀이 가로 칸 몇 칸 분량을 차지해주는지를 지정해주는 건데,
이것은 윗 줄이나 아랫 줄에 가로로 만들어진 셀이 더 많을 때만 지정해줍니다.
저희는 여기서 위에 2칸이 만들어졌으니 2의 값을 지정해주죠.
colspan="2" 이렇게요.
그럼 다시 해볼까요?
(예)
<table>
<tr>
<td>
내용1
</td>
<td>
내용2
</td>
</tr>
<tr>
<td colspan="2">
내용3
</td>
</tr>
</table>
| (결과)
|
잘 되는군요!
그럼 좀 더 응용해볼까요?
(예)
<table>
<tr>
<td>
내용1
</td>
<td>
내용2
</td>
<td>
내용3
</td>
</tr>
<tr>
<td>
내용4
</td>
<td colspan="2">
내용5
</td>
</tr>
<tr>
<td colspan="3">
내용6
</td>
</table>
| (결과)
|
레고놀이 맞죠?^^
이제 테이블에 대해서 거의 다 배웠습니다. 조금만 더 봐요.
( td 속성 : rowspan )
앞에서 본 colspan과 비슷하죠? 사용법도 같지만 다른 점은 효과입니다.
colspan이 가로로 얼마나 칸을 차지하는지를 설정해주는 것이라면,
rowspan은 세로로 얼마나 칸을 차지하는지를 설정해주는 것입니다.
이건 아래의 예만 보고서 끝내죠.
(예)
<table>
<tr>
<td rowspan="2">
내용1
</td>
<td>
내용2
</td>
</tr>
<tr>
<td>
내용3
</td>
</tr>
</table>
| (결과)
|
colspan과 rowspan을 섞어서 연습해보세요.
#4. 그 외의 테이블 속성.
( table 속성 : align )
align은 테이블의 속성이기도 하지만 앞으로 자주 나옵니다. 그리고 앞으로 나오는 모든 align속성은 아래의 3가지 값을 가집니다.
1) left : 좌측으로 정렬
2) center : 가운데 정렬
3) right : 우측으로 정렬
align은 정렬을 시킨다는 의미인데, 그 중에서도 가로줄 정렬을 이야기합니다.
아래의 예를 보시죠.
(예1)
<table align="center">
<tr>
<td>
내용
</td>
</tr>
</table>
| (결과1)
|
(예2)
<table align="right>
<tr>
<td>
내용
</td>
</tr>
</table>
| (결과2)
|
( td 속성 : align )
테이블의 align이 테이블 자체의 가로 위치를 나타냈다면, td의 align은 셀 내부의 내용이 어떻게 정렬될지를 이야기합니다.
이것은 아래의 속성과 함께 보겠습니다.
( td 속성 : valign )
valign은 v 즉, 버티컬. 세로 정렬을 시키는 속성입니다.
이것은 테이블 내부의 내용을 세로 정렬 시키는데 값은 아래의 세 가지 입니다.
1) top : 위로 정렬
2) middle : 가운데 정렬
3) bottom : 아래로 정렬
이것도 아래에서 다음에 나오는 속성과 함께 보도록 하겠습니다.
( td 속성 : width )
이것은 테이블의 가로 길이를 지정해주는 속성입니다.
물론 여러가지 상황에서 안의 내용이 불어나면 길이가 변할 수도 있지만, 기본적으로는 고정됩니다.
width 뒤에는 숫자를 써서 길이를 지정해줍니다.
다음에 나오는 속성과 함께 보도록 하겠습니다.
( td 속성 : height )
이것은 테이블의 세로 길이를 지정해주는 속성입니다.
width와 마찬가지로 뒤에 숫자를 써서 길이를 지정해줍니다.
그러면 위의 4가지를 합쳐서 예를 보죠.
(예1)
<table>
<tr>
<td width="100" height="300" align="center" valign="middle">
내용
</td>
</tr>
</table>
| (결과1)
|
( table 속성 : width )
테이블 자체의 가로 길이를 지정해주고 싶을 때는 table에 width 속성을 지정해주기도 합니다.
(예1)
<table width="300">
<tr>
<td>
내용
</td>
</tr>
</table>
| (결과1)
|
( table 속성 : cellpadding )
cellpadding은 셀의 바깥 테두리와 셀 안의 내용 사이에 들어가는 여백공간의 길이를 지정해주는 속성입니다.
아래의 예를 보시면 이해가 빠르실 겁니다.
(예1)
<table cellpadding="0">
<tr>
<td>
내용
</td>
</tr>
</table>
| (결과1)
|
(예2)
<table cellpadding="30">
<tr>
<td>
내용
</td>
</tr>
</table>
| (결과2)
|
( table 속성 : cellspacing )
테이블은 얼핏 보면 테두리가 하나처럼 보이지만, 사실은 두 개가 있습니다.
테이블 전체의 외곽 테두리와 셀 하나하나의 외곽 테두리이죠.
cellspacing은 테이블의 테두리와 셀의 테두리 사이의 여백을 지정해주는 속성입니다.
아래의 예를 보시죠.
(예1)
<table cellspacing="0">
<tr>
<td>
내용
</td>
</tr>
</table>
| (결과1)
|
(예2)
<table cellspacing="30">
<tr>
<td>
내용
</td>
</tr>
</table>
| (결과2)
|
여기서 꼭 명심하셔야할 것은,
처음에는 테이블을 만들 때, cellspacing 과 cellpadding의 값을 항상 지정해주는 습관을 가집시다.
그 이유는 이 두 값은 지정을 안 해주면 0이 아닌 기본 값을 갖기 때문입니다.
이것은 외관상의 문제보다 더 중요한 문제를 야기합니다.
테이블로 간격을 맞추거나 정렬을 할 때 여러 개의 테이블을 사용하게 될 때도 많습니다.
이 때 값을 1단위로 조정해서 맞추고 있는데, 어떤 테이블이 cellspacing 이나 cellpadding 값으로 임의의 알 수 없는 값을 가지면 미세한 조정이 불가능하기 때문입니다. 보기에는 테이블 크기가 서로 같아보이는데 여백 때문에 미묘하게 더 큰 크기를 갖는 테이블이 생기거나 하는 것이죠. 그러므로 이 값을 늘 기억하시기 바랍니다.
( table 속성 : border )
테이블의 테두리의 두께를 설정해주는 속성입니다.
0으로 맞추면 테이블이 눈에 보이지 않게 됩니다.
(하지만 눈에 보이지 않을 뿐 여전히 cellspacing 과 cellpadding 의 값은 갖고 있습니다.)
( table 속성 : bordercolor )
드디어 색깔이 나왔군요. 잠시 웹에서 쓰는 색상 코드에 관련된 설명을 하겠습니다.
웹에서는 색을 표시할 때 16진수로 전환된 6자리 색상코드를 사용합니다.
물론 red, blue와 같은 기본 색은 단어로 색을 지정해줘도 브라우져가 알아서 해석을 합니다.
하지만 기본 색 이외의 다양한 색을 사용하거나, 혹은 브라우져 자체의 속도를 위해서도 결국 색상코드를 사용하게 됩니다.
색상코드는 앞에 #(샵) 표시를 붙여줍니다. 붙이지 않아도 알아보긴 하나 붙이는 게 약속입니다. 꼭 붙이세요.
다음은 색상코드의 예입니다.
#FFFFFF : 흰 색
#000000 : 검은 색
이 두 가지가 색상 코드의 양쪽 끝입니다. 16진수는 0에서 시작해서 F로 끝나죠.
이 외에도 다양한 값을 쓸 수 있는데
#FF0000 : 빨간 색
#F6F5FD : 현재 이 글이 쓰여지고 있는 셀의 배경색
여러가지가 있습니다.
이 후 나오는 모든 속성의 색상 값은 이것을 이용해서 지정합니다.
그리고 색상 코드를 외워서 사용하는 것은 흰 색과 검은 색을 제외하고는 거의 불가능 합니다.
색상 코드를 자동으로 보여주는 프로그램이 많이 있으니 구해서 쓰시기 바랍니다.
혹시 구하지 못하시면 저한테 말씀하시면 보내드리겠습니다.
|
bordercolor는 테이블의 테두리의 색을 지정해주는 속성입니다. 값은 위의 색상코드로 지정을 해줍니다.
다음에 나오는 속성과 함께 예를 보겠습니다.
( table 속성 : bgcolor )
테이블의 배경색(BackGround Color)을 지정해주는 속성입니다.
마찬가지로 앞에서 본 색상 코드를 이용해서 지정해줍니다.
( td 속성 : bgcolor )
셀의 배경색을 지정해주는 속성입니다.
이제 예를 보겠습니다.
(예2)
<table border="5" bordercolor="00FF00" bgcolor="#FF0000" width="100">
<tr>
<td bgcolor="#0000FF">
내용
</td>
</tr>
</table>
| (결과2)
|
두께 5로 커진 연두색 테두리와, cellspacing의 여백 사이로 보이는 테이블 배경색 빨강, 그리고 다시 셀 테두리와 제일 안쪽에 파랑색 셀 배경색을 확인하실 수 있을겁니다.
마지막 보너스
( td 속성 : background )
셀에 그림파일을 배경으로 지정하는 속성입니다.
따라오느라 수고하셨습니다.
이번에는 좀 길었죠? 테이블이 끝났습니다.
이제 HTML은 거의 다 끝난거나 마찬가지 입니다.
테이블을 자유롭게 쓸 수 있을 때 홈페이지를 원하는데로 만들 수 있다는 것을 잊지마세요.
|
|
猫愛 - MyoAe - Homepage Mode
Ver. 1.45
by Aierse | |
|