구글 블로거(블로그)에 표 (테이블) 편하게 넣는 방법
티스토리에는 표를 편리하게 넣을 수 있는 기능이 있지만 애석하게도 구글 블로거(Blogger)에는 없습니다. 따라서 표를 굳이 본문에 넣고 싶다면 수동으로 <table> 태그를 사용해서 만들 수 밖에 없습니다. 그러나! HTML의 버전이 올라가고 점점 브라우저가 크로스 기능이 많아지면서 굳이 태그를 사용해서 수동으로 표를 만들 필요가 없어졌습니다. 이거 한 방이면 여러분들도 매우 편리하게 블로거에 표를 넣을 수 있습니다. 그것도 반응형으로 말이죠.
구글 스프레드시트 활용하기
제일 쉽게 넣을 수 있는 방법은 구글 스프레드시트 플랫폼을 활용하는 것입니다. 스프레드시트는 엑셀같은 웹 프로그램입니다.
위의 페이지를 방문해보시면 구글 스프레드시트 기본 화면을 살펴보실 수 있습니다. 엑셀을 많이 다루시는 분들이라면 매우 친숙한 UI를 만나보시게 될 것입니다. 엑셀 고수시면 사용법은 굳이 설명 안 드려도 다 아실 것이겠지만 저는 늘 처음 사용자를 기준으로 하기에 하나 하나 설명을 하겠습니다.
일단 2열 6행의 간단한 표를 구글 스프레드시트에서 만들었습니다. 혹시 행과 열이 햇갈리시면 이렇게 기억하시면 좀 쉽습니다. "그냥 가시던 길 가세열~" 또는 "조심히 들어가세열~" 이라고 암기해 보세요. 즉 세로가 열이니 나머지 가로는 행이라고 말이죠.
이제 만든 표를 모두 블럭 지정하여 복사합니다. Ctrl + C를 누르면 복사가 됩니다. 그리고 구글 블로그에 그대로 붙여넣기 하시면 됩니다.
이렇게 말입니다. 하지만 이렇게 해놓으면 반응형이 아닌 고정형 크기로 적용됩니다. 따라서 우리들은 수동으로 이 표를 반응형으로 업그레이드할 것입니다.
스프레드시트 표 반응형으로 만들기
위의 표를 HTML 상태로 살펴보면 다음과 같습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<p>
<google-sheets-html-origin></google-sheets-html-origin>
</p>
<table border="1" cellpadding="0" cellspacing="0" data-sheets-root="1" dir="ltr" style="border-collapse: collapse; border: none; font-family: Arial; font-size: 10pt; table-layout: fixed; width: 0px;" xmlns="http://www.w3.org/1999/xhtml">
<colgroup>
<col width="100">
</col>
<col width="100">
</col>
</colgroup>
<tbody>
<tr style="height: 38px;">
<td data-sheets-value="{"1":2,"2":"메뉴"}" style="background-color: #fff2cc; border: 1px solid rgb(204, 204, 204); overflow: hidden; padding: 2px 3px; text-align: center; vertical-align: middle;">메뉴</td>
<td data-sheets-value="{"1":2,"2":"내용"}" style="background-color: #fff2cc; border: 1px solid rgb(204, 204, 204); overflow: hidden; padding: 2px 3px; text-align: center; vertical-align: middle;">내용</td>
</tr>
<tr style="height: 21px;">
<td data-sheets-value="{"1":2,"2":"마라탕"}" style="border: 1px solid rgb(204, 204, 204); overflow: hidden; padding: 2px 3px; text-align: center; vertical-align: middle;">마라탕</td>
<td data-sheets-value="{"1":2,"2":"1개"}" style="border: 1px solid rgb(204, 204, 204); overflow: hidden; padding: 2px 3px; text-align: center; vertical-align: middle;">1개</td>
</tr>
<tr style="height: 21px;">
<td data-sheets-value="{"1":2,"2":"치킨"}" style="border: 1px solid rgb(204, 204, 204); overflow: hidden; padding: 2px 3px; text-align: center; vertical-align: middle;">치킨</td>
<td data-sheets-value="{"1":2,"2":"2개"}" style="border: 1px solid rgb(204, 204, 204); overflow: hidden; padding: 2px 3px; text-align: center; vertical-align: middle;">2개</td>
</tr>
<tr style="height: 21px;">
<td data-sheets-value="{"1":2,"2":"햄버거"}" style="border: 1px solid rgb(204, 204, 204); overflow: hidden; padding: 2px 3px; text-align: center; vertical-align: middle;">햄버거</td>
<td data-sheets-value="{"1":2,"2":"3개"}" style="border: 1px solid rgb(204, 204, 204); overflow: hidden; padding: 2px 3px; text-align: center; vertical-align: middle;">3개</td>
</tr>
<tr style="height: 21px;">
<td data-sheets-value="{"1":2,"2":"파스타"}" style="border: 1px solid rgb(204, 204, 204); overflow: hidden; padding: 2px 3px; text-align: center; vertical-align: middle;">파스타</td>
<td data-sheets-value="{"1":2,"2":"4개"}" style="border: 1px solid rgb(204, 204, 204); overflow: hidden; padding: 2px 3px; text-align: center; vertical-align: middle;">4개</td>
</tr>
<tr style="height: 21px;">
<td data-sheets-value="{"1":2,"2":"국밥"}" style="border: 1px solid rgb(204, 204, 204); overflow: hidden; padding: 2px 3px; text-align: center; vertical-align: middle;">국밥</td>
<td data-sheets-value="{"1":2,"2":"5개"}" style="border: 1px solid rgb(204, 204, 204); overflow: hidden; padding: 2px 3px; text-align: center; vertical-align: middle;">5개</td>
</tr>
</tbody>
</table>
|
cs |
여기에서 수정해야 할 부분은 바로 col width="100" 부분입니다. 2행짜리 표이기에 col 그룹이 두 개가 생성된 것입니다. 만약 4개의 행이라면? col 태그도 4개가 생성될 거구요. 이해 되시죠? width는 가로라는 의미이며 큰따옴표 안의 100은 100px 이라는 뜻입니다. 즉 각 행의 가로 크기가 100px 짜리인 표라는 의미인거죠.
이제 반응형으로 변경하는 방법은 다 알았습니다. 100px 대신에 %를 넣으면 됩니다. 행이 두 개니까 두 행의 가로 크기를 똑같이 하고 싶다면 100 대신 50%를 col 태그의 width 값에 모두 넣으면 될 것입니다. 만약 메뉴행 크기를 좀 더 키우고 싶다면 첫번째 col 태그의 width 값에는 70%를, 나머지 col 태그에는 30%를 입력하면 될 겁니다. 한번 해볼까요? 7:3 가로 크기 비율로요.
|
1
2
3
4
|
<colgroup>
<col width="70%" />
<col width="30%" />
</colgroup>
|
cs |
이렇게 됩니다. 근데 지금 보시면 코드가 뭔가 좀 기존 태그와 차이가 있죠? <col> 태그의 닫히는 태그가 없습니다. col 태그의 경우에는 img 태그와 마찬가지로 닫히는 태그가 없는 요소입니다. 따라서 col 태그안에 그냥 /를 넣거나 아예 그냥 비워둬도 상관 없습니다. 오히려 닫히는 태그를 넣으면 오류를 띄우죠. 참고하시기 바랍니다.
|
1
|
<table border="1" cellpadding="0" cellspacing="0" data-sheets-root="1" dir="ltr" style="border-collapse: collapse; border: none; font-family: Arial; font-size: 10pt; table-layout: fixed; width: 100%;" xmlns="http://www.w3.org/1999/xhtml">
|
cs |
또한 바로 위에 있는 table 태그 안에 있는 style 속성 중 가로 크기를 정의하는 width 값이 기본적으로 0으로 되어있을텐데 이것을 100%로 변경해 줍니다. 그러면 최종적으로 아래의 표처럼 반응형으로 적용될 것입니다.
이렇게 말입니다. 이제 브라우저의 가로 크기를 늘리거나 줄여도 표가 알아서 가로 사이즈가 변경될 것입니다. 오늘 내용 끝!
댓글
댓글 쓰기
비밀글은 삭제합니다. 공개글로 남겨주시기 바랍니다.