티스토리 표 가로 세로 첫번째 줄 셀 배경색 넣는 방법

제목만보고는 무슨 뜻인지 잘 모르실 수 있습니다. 예를 들자면 이런 경우입니다. 티스토리 글쓰기 메뉴 중에는 표 만들기가 있습니다. 그리고 표를 삽입하면 모든 셀이 동일하게 백그라운드가 텅 비어있는 상태입니다. 근데 보통 표를 만들때는 첫번째 줄에 어떤 메뉴 이름이 들어가곤 합니다. 가령 예를 들어서 시간표를 만든다고 가정한다면 첫번째 셀에는 월,화,수,목,금,토 같은 요일이 들어갈겁니다. 가장 왼쪽의 세로 셀은 1교시부터 5교시까지의 시간이 들어갈 것이구요. 바로 이 특정 셀의 백그라운드 배경색상을 넣는 방법입니다. 안타깝게도 수동으로 진행해야 합니다. 실전을 살펴보기 위해서 아래에 임의로 표를 만들었습니다. 그리고 셀의 모든 텍스트는 중앙정렬이 되게 해두었습니다.

티스토리 표 만들기 태그 구조

	가로셀	가로셀	가로셀
세로셀
세로셀
세로셀

이렇게 간단한 표가 완성되었습니다. 현재 위의 표 태그를 HTML 모드로 살펴보자면 다음과 같습니다.

<table style="border-collapse: collapse; width: 100%; height: 78px;" border="1">
<tbody>
<tr style="height: 20px;">
<td style="width: 10%; height: 20px; text-align: center;">&nbsp;</td>
<td style="width: 30%; height: 20px; text-align: center;">가로셀</td>
<td style="width: 30%; height: 20px; text-align: center;">가로셀</td>
<td style="width: 30%; height: 20px; text-align: center;">가로셀</td>
</tr>
<tr style="height: 20px;">
<td style="width: 10%; height: 20px; text-align: center;">세로셀</td>
<td style="width: 30%; height: 20px; text-align: center;">&nbsp;</td>
<td style="width: 30%; height: 20px; text-align: center;">&nbsp;</td>
<td style="width: 30%; height: 20px; text-align: center;">&nbsp;</td>
</tr>
<tr style="height: 20px;">
<td style="width: 10%; height: 18px; text-align: center;">세로셀</td>
<td style="width: 30%; height: 18px; text-align: center;">&nbsp;</td>
<td style="width: 30%; height: 18px; text-align: center;">&nbsp;</td>
<td style="width: 30%; height: 18px; text-align: center;">&nbsp;</td>
</tr>
<tr style="height: 20px;">
<td style="width: 10%; height: 20px; text-align: center;">세로셀</td>
<td style="width: 30%; height: 20px; text-align: center;">&nbsp;</td>
<td style="width: 30%; height: 20px; text-align: center;">&nbsp;</td>
<td style="width: 30%; height: 20px; text-align: center;">&nbsp;</td>
</tr>
</tbody>
</table>

이 상태입니다. 그러면 가로셀과 세로셀이라는 텍스트가 들어간 부분이 눈에 확 들어올 것입니다. 보시면 첫번째의 <table> 이라는 태그가 가장 먼저 눈에 들어옵니다. HTML에서 표 만들기 시 가장 많이 사용되는 태그가 바로 <table> 태그입니다. 그리고 바로 다음으로 <tbody> 태그가 들어오는군요. 이 둘은 늘 이렇게 콤비네이션으로 작용됩니다. <tbody>태그는 표의 전체를 아우르는 태그라고 보시면 됩니다. 티바디 안으로 들어오게되는 모든 표 태그 요소들이 셀 하나 하나의 구성이라고 생각하시면 됩니다.

<tr> 태그는 셀의 가로 라인이라고 생각하시면 됩니다. 스펠링이 맞지는 않지만 제 개인 기억법으로는 티(t)라인(rine) 이라고 암기해 뒀습니다. 편리하더라구요. <tr>태그 안에는 <td>들이 있는데 이 태그들이 셀을 형성하는 태그입니다. 이것도 나름의 암기법으로 기억해두었습니다. 티(t)데이터(date) 라는 식으로요. 잘 외워지지가 않는다면 저처럼 한번 기억해 보시는것도 괜찮을 것 같습니다. 데이터는 곧 셀입니다.

백그라운드 색 변경 방법

이제 구조를 파악했으므로 어떤 셀에 백그라운드를 삽입해야할지 알 수 있을 것입니다. 먼저 가로셀의 경우는 쉽습니다. <tbody>의 첫 번째 <tr>을 주목해 주세요. 이 안에 있는 <td>들이 모두 가로셀인 것입니다. 그러므로 첫 번째 <tr>태그 안에 스타일을 만들어주면 될겁니다. 수정 완료한 태그는 다음과 같습니다.

<tr style="height: 20px; background-color: #eee;">

첫번째 <tr>태그안에 background-color: #eee;를 추가 입력했습니다. 이렇게 수정 완료한 결과는 다음과 같습니다.

	가로셀	가로셀	가로셀
세로셀
세로셀
세로셀

보시다시피 이렇게 첫번째 셀에만 밝은 회색의 백그라운드 색상이 추가되었습니다. 근데 가로셀 왼쪽의 빈 셀까지도 색이 채워집니다. 만약 빈 셀은 채우지 않고 가로셀 텍스트에만 백그라운드 색상을 넣고 싶다면 어떻게 해야 할까요? 그럴때는 조금 귀찮더라도 해당 셀 하나 하나에 백그라운드 색상을 삽입하면 됩니다. 첫번째 가로셀에 대한 태그 수정한 결과는 다음과 같습니다.

<tr style="height: 20px;">
<td style="width: 10%; height: 20px; text-align: center;">&nbsp;</td>
<td style="width: 30%; height: 20px; text-align: center; background-color: #eee;">가로셀</td>
<td style="width: 30%; height: 20px; text-align: center; background-color: #eee;">가로셀</td>
<td style="width: 30%; height: 20px; text-align: center; background-color: #eee;">가로셀</td>
</tr>

보시는것처럼 <tr>이 아닌, <td>의 가로셀 텍스트가 들어간 태그 안쪽에만 background-color: #eee; 를 삽입했습니다. 그 결과는 다음과 같습니다.

	가로셀	가로셀	가로셀
세로셀
세로셀
세로셀

이렇게 가로셀 텍스트를 가진 셀에만 정상적으로 백그라운드 색상이 적용됩니다. 그렇다면 세로셀도 이 방법을 사용하면 편리할 것입니다. 수정된 표태그는 다음과 같습니다.

<table style="border-collapse: collapse; width: 100%; height: 78px;" border="1">
<tbody>
<tr style="height: 20px;">
<td style="width: 10%; height: 20px; text-align: center;">&nbsp;</td>
<td style="width: 30%; height: 20px; text-align: center; background-color: #eee;">가로셀</td>
<td style="width: 30%; height: 20px; text-align: center; background-color: #eee;">가로셀</td>
<td style="width: 30%; height: 20px; text-align: center; background-color: #eee;">가로셀</td>
</tr>
<tr style="height: 20px;">
<td style="width: 10%; height: 20px; text-align: center; background-color: #c7ffc5;">세로셀</td>
<td style="width: 30%; height: 20px; text-align: center;">&nbsp;</td>
<td style="width: 30%; height: 20px; text-align: center;">&nbsp;</td>
<td style="width: 30%; height: 20px; text-align: center;">&nbsp;</td>
</tr>
<tr style="height: 20px;">
<td style="width: 10%; height: 18px; text-align: center; background-color: #c7ffc5;">세로셀</td>
<td style="width: 30%; height: 18px; text-align: center;">&nbsp;</td>
<td style="width: 30%; height: 18px; text-align: center;">&nbsp;</td>
<td style="width: 30%; height: 18px; text-align: center;">&nbsp;</td>
</tr>
<tr style="height: 20px;">
<td style="width: 10%; height: 20px; text-align: center; background-color: #c7ffc5;">세로셀</td>
<td style="width: 30%; height: 20px; text-align: center;">&nbsp;</td>
<td style="width: 30%; height: 20px; text-align: center;">&nbsp;</td>
<td style="width: 30%; height: 20px; text-align: center;">&nbsp;</td>
</tr>
</tbody>
</table>

보시다시피 두번째 <tr> 태그부터 해당되는 첫 번째 세로셀 텍스트가 입력된 <td> 태그에 backgroud-color: #c7ffc5; 의 밝은 녹색을 배경색으로 적용시켰습니다. 그 결과는 다음과 같습니다.