구글 블로그에 표를 넣는 필수 기술
B Blogger
with Wenlipot
표만들기 (HTML)
 |
| blogger |
이 구글 블로그(Blogger)는 사용하면 사용할 수록 기본 레벨을 어디에 잡았는지 알것 같습니다. 프로그래밍은 아니지만 어느 정도 HTML을 요구합니다.
저도 그렇지만 키보드보다는 마우스의 비중이 큰 요즘같은 시대에는 맞지 않는 다는 생각이 들면서도 컴퓨터의 기본적인 구조가 무엇인가를 생각하면 당연하다는 생각이 들기도 합니다. 비주얼(!)베이직 이라는게 엄청 큰 반향을 일으켰었던 것도 생각이 나네요.
서운하기까지 한 구글 블로그(Blogger)의 글쓰기 메뉴를 볼까요? 어디를 찾아보아도 표를 만드는 메뉴가 없습니다. 엑셀이나 한글 워드까지는 아니더라도 기본적인 구획은 칠 수 있었으면 했는데 말이죠.
방법은 한가지 밖에 없습니다. 바로 <HTML>입니다. 이제 "글쓰기" → "HTML" 를 편집하기 위해 전환하는 설명은 안 드려도 될거라 생각합니다. HTML 편집기로 들어가셔서 다음과 같이 적어보세요.
1. 기본형 (<table>부터 </table> 까지입니다.)
<table border="1" >
<tr>
<td> 1번 sample </td>
</tr>
</table>
그럼 아래와 같은 모양이 나옵니다. 이상하죠?
| 1번 sample |
2. 그럼 이제 더 추가해 보겠습니다. (<table>부터 </table> 까지입니다.)
<table border="1" >
<tr>
<td> 2번 sample </td>
<td> 2번 sample </td>
</tr>
</table>
이번엔 칸이 하나 더 생겼네요
| 2번 sample | 2번 sample |
3. 하나만 더 보시면 감이 잡히실 겁니다. (<table>부터 </table> 까지입니다.)
<table border="1" >
<tr>
<td> 3번 sample </td>
<td> 3번 sample </td>
</tr>
<tr>
<td> 3번 sample </td>
<td> 3번 sample </td>
</tr>
</table>
| 3번 sample | 3번 sample |
| 3번 sample | 3번 sample |
약간의 정신적 노동을 하셨을꺼라 생각하면서 위의 태그들을 설명드리겠습니다. 약간 힘드셨을 수도 있지만 다시 찾아보시지 않고 한번에 익숙해지시길 바라는 마음이니 이해해 주세요
표: <table>
줄: <tr>
칸: <td>
아래에 태그와 그에 대응되는 효과를 같은 색으로 표시해 봤습니다.
<table border="1" >
<tr>
<td> 3번 sample </td>
<td> 3번 sample </td>
</tr>
<tr>
<td> 3번 sample </td>
<td> 3번 sample </td>
</tr>
</table>
|
표를 만들어 줍니다. 첫 번째 줄을 만들어 줍니다. 첫 번째 칸을 만들어 주고 닫아 줍니다. 두 번째 칸을 만들어 주고 닫아 줍니다. 첫 번째 줄을 닫아 줍니다.
두 번째 줄을 만들어 줍니다.
첫 번째 칸을 만들어 주고 닫아 줍니다.
두 번째 칸을 만들어 주고 닫아 줍니다.
두 번째 줄을 닫아 줍니다.
표를 닫아 줍니다.
|
표를 만들기 위해서 무조건 <table> </table>를 적어 줍니다. 그 사이에 적어야 할 태그는 다음의 두가지인데 <tr>은 줄, <td>는 칸입니다. 일단 <tr> </tr>사이에 <td> </td>에 적어 넣으면 1줄 줄과 1칸으로 기본적인 표가 하나 생깁니다.
<td> </td>를 늘려 갈수록 가로로 칸이 하나씩 더 생기고, <tr> </tr>을 늘려 갈수로 세로로 줄이 하나씩 더 생기게 됩니다.
주의할 점은 꼭 </> 로 닫아주셔야 합니다. 구현이 안되다면 </>로 잘 닫았는지 확인해주세요
이제 하셔야 할 일은 표를 만드는게 다가 아니라 이뿌게 꾸며야 겠지요. 최소한 가운데 정렬이나 표의 굵기 내부 여백 정도는 정할 수 있어야 합니다.
태그 속성 및 효과
<table 태그속성="값"> <tr 태그속성="값"> <td 태그속성="값">
| 태그속성 | 효과 | 사용 예 |
| cellpadding="" | 셀 안의 여백을 정할 수 있습니다. | <table cellpadding="10"> |
| cellspacing="" | 셀과 셀 사이의 여백을 정할 수 있습니다. | <table cellspacing="0"> |
| align="" | 표의 정렬을 해줍니다. (left, center, right) |
<table align="center">
<tr align="center">
<td align="center">
|
| bgcolor="" | 배경 색상을 정할 수 있습니다. |
<table bgcolor="red">
<tr bgcolor="red">
<td bgcolor="red">
|
| border="" | 표 외곽선 굵기를 정합니다. | <table border="1"> |
| bordercolor="" | 표 외곽선 컬러를 정합니다. | <table bordercolor="red"> |
이제 이 모든 걸 적용하여 최종적으로 표를 만들어 보겠습니다. 다음의 HTML을 보고 어떤 의미인지 파악해보시고 그대로 해보시길 권해드립니다.
< Final Sample (HTML) >
| <table align="center" border="1" cellpadding="15" cellspacing="0"> <tr bgcolor="orange"> <td>잘 이해가 </td> <td>되시나요? </td> <td>화이팅입니다 </td> </tr> <tr> <td bgrcolor="blue"> </td> <td> </td> <td> </td> </tr> </table> |
< 결과물 >
| 잘 이해가 | 되시나요? | 화이팅입니다 |
| ← 여긴 blue |
결과물이 너무 못생긴건 양해바랍니다. ^^;; HTML 태그를 사용하는게 생각보다 복잡하지 않지요? 수학이 아니라 산수정도의 개념이라고 생각하시면 더 편하실거라 생각이 드네요. 구글 블로그(Blogger) 포기하지 말고 끝까지 해보기로 해요
