티스토리 뷰
목차
블로그에서 표(table)는 내용을 한눈에 보고 효과적으로 전달할 수 있는 유용한 기능입니다.
하지만 표 테마가 제한되어 있어 늘 똑같은 색상에 식상하고 지루함을 느끼게 됩니다.
이 글에서 표에 원하는 색상을 마음대로 넣고 바꿀 수 있는 초보자를 위한 쉬운 방법을 알려드리고자 합니다.
다양한 색상으로 보기 좋은 표를 만들면 글의 가독성을 높이고 효과적인 정보 전달과 독자의 참여를 유도할 수 있으니 차근차근 따라 해 보시기 바랍니다.
색상코드는 아래 버튼에서 확인하실 수 있습니다.
티스토리 표에 색깔 넣기
티스토리 블로그에서 표에 색을 넣는데 주로 이용되는 방법은 두 가지가 있습니다.
하나는 HTML을 사용하여 편집하는 것이고 또 하나는 스킨편집에서 CSS를 추가하는 방식입니다.
하지만 CSS를 추가하면 블로그 전체에 적용되므로 글 하나하나의 표에 그때그때 적용하려면 HTML을 이용합니다.
일단 표를 3×2로 만들어보겠습니다.
다음과 같은 표가 완성됩니다.
| 가 | 나 | 다 |
| 라 | 마 | 바 |
※ 편의상 표에 가 ~ 바를 입력하였습니다.
위와 같은 표가 만들어졌다면 상단 기본모드를 HTML로 변경합니다.
HTML로 보면 다음과 같습니다.
<tr>은 행을 의미합니다.
'가', '나', '다'를 입력한 첫 행 전체에 분홍색을 넣는 방법입니다.
노란색 화살표가 있는 <tr> 부분이 첫 행이고 그다음 <tr> 부분은 두 번째 행입니다.
첫 번째 행 전체에 분홍색을 넣어보겠습니다.
<tr 다음 부분에 한 칸 띄고 style="background-color: #f772d1;"를 입력합니다.
입력한 모습 : <tr style="background-color: #f772d1;">
f772d1은 색상코드로 분홍색을 나타내며 이 부분을 수정하여 색깔을 바꿀 수 있습니다.
첫 번째 행 전체가 아래와 같이 분홍색으로 바뀌었습니다.
| 가 | 나 | 다 |
| 라 | 마 | 바 |
두 번째 행도 마찬가지로 행 전체를 바꾸고 싶으면 위 두 번째 행 <tr 다음 부분에 원하는 색상코드를 정하여 아래와 같이 똑같이 입력하시면 됩니다.
행 전체 색 넣기: <tr style="background-color: #색상코드;">
이번엔 두 번째 행은 '라'에 노란색, '마'에 연두색, '바'에 하늘색 이렇게 모두 다른 색을 넣어보겠습니다.
하나하나의 셀에 색을 넣으려면 해당 <td> 끝부분 ; 뒤, " 앞에 background-color: #eeee22;를 넣어줍니다.
<td>는 데이터를 포함한 표의 셀을 나타내는 것으로 <td 뒷부분의 내용은 사진과 다를 수 있으나, 항상 제일 뒷부분의 ; 다음에 한 칸 띄고 background-color: #색상코드;">를 넣어주면 됩니다.
예를 들어
<td style="width: 33.3333%; text-align: center; height: 20px;">가</td> 라고 되어있다면,
<td style="width: 33.3333%; text-align: center; height: 20px; background-color: #색상코드; ">가</td>
이렇게 바꿔주시면 됩니다.
eeee22는 노란색을 의미하는 코드입니다.
입력한 모습은 다음과 같습니다.
'라' 셀이 노란색으로 바뀌었습니다.
| 가 | 나 | 다 |
| 라 | 마 | 바 |
'마'와 '바'에도 연두색, 하늘색 색상코드를 넣어 각각 아래와 같이 입력합니다.
연두색 색상코드: #93fb93;
하늘색 색상코드: #96ffff;
라, 마, 바 셀의 색상이 모두 바뀐 것을 확인할 수 있습니다.
| 가 | 나 | 다 |
| 라 | 마 | 바 |
위 표에서 첫 번째 가, 나, 다 부분도 각각의 색상을 넣고 싶다면, <tr> 부분에 넣었던 코드를 빼고 각 <td> 끝부분에 위와 같이 코드를 넣어주시면 됩니다.
| ✅ 요약정리 ➡️ 행 전체에 한가지 색을 넣을때: <tr style="background-color: #색상코드;"> ➡️ 표 셀 하나하나에 색을 넣을때: <td style="width: 33.3333%; text-align: center; background-color: #색상코드; "> Tip) 빨간색 부분만 메모장에 저장해 놓았다가 그때그때 복사 붙여넣기 하시면 편리합니다. |
HTML 색상표 코드 보기
자, 그럼 표 색상 바꾸는 방법을 알았다면 색깔을 골라야겠지요.
HTML 색상표 코드에서 원하는 색상의 코드를 선택합니다.
색상코드는 # 기호와 6자리의 16진수로 구성됩니다.
아래에서 다양한 색상 코드를 확인하시고 마음에 드는 색상을 선택하여 위 코드 중 '색상코드' 부분에 입력하여 주시면 됩니다.
| Tip) 매번 색상코드 찾기 번거로우면 자주 사용하고 선호하는 색상코드들을 모아 메모장에 저장해놓고 그때그때 복사하여 붙여넣기 하시면 편리합니다. |
background-color와 bgcolor의 차이점
표 배경색을 넣는 코드로 지금까지 background-color를 사용하는 방법을 알아보았는데 bgcolor를 사용하는 방법도 있습니다.
background-color는 현대적인 CSS 속성이며, HTML5에서 권장됩니다.
bgcolor는 이전 버전의 HTML 4에서 사용되었던 속성으로, 현재는 더 이상 권장되지 않습니다.
또한 bgcolor는 background-color 만큼 다양한 기능을 제공하지 못하므로 이 글에서는 background-color 코드를 사용한 방법만을 다루었습니다.
이상으로 티스토리 블로그 표에 색상을 넣는 방법에 대해 알아보았습니다.
이미 아시는 분들은 쉽게 넣을 수 있겠지만 처음 하시는 초보자분들은 어렵게 느껴질 수 있어 좀 자세히 설명드렸습니다.
이제 보기 좋고 예쁜 표를 만들어 넣어 한층 업그레이드된 블로그로 좋은 정보 많이 많이 올려주시기 바랍니다.
감사합니다.