구글 블로그에 표 테이블 (table) 태그 간단하게 입력하는 방법

티스토리와는 다르게 구글 블로그(Blogger)는 본문에 표를 넣는 툴이 따로 없습니다. 티스토리도 초반에는 엄청 불편했던 플랫폼이었는데 눈부신 발전을 이루었죠. 지금은 영업을 이상하게 하고 있어서 많은 이들이 떠나고 있지만 오히려 저는 괜찮습니다. 비록 애드센스 수익은 반토막이 났지만요. 그래서 구글 블로그도 열심히 관리하려고 하는 이유이기도 하고요. 전화위복이며 위기는 곧 기회이니까요.

 

하늘이 무너져도 정신만 바짝차리면 살 방법이... 있을 것 같습니까? 이런 말도 안 되는 비유 말고, 그냥 노력하면 반드시 돌파구는 생기기 마련! 이게 훨씬 낫군요. 구글 블로그가 아무리 불편하다 하더라도 어쨌든 오픈 소스 기반이니 표를 만드는 방법도 얼마든지 있습니다. table 태그를 써서 만들 수 있으나 이것보다 더 쉬운 방법을 알려드리려고 합니다. 구글 스프레드시트를 활용하는 방법입니다.

 

블로거 본문에 표 넣기

구글 스프레드시트

Google Sheets: 로그인

스프레드시트는 마이크로소프트 엑셀같은 플랫폼이라고 생각하시면 됩니다. 엑셀 환경이 익숙하시다면 이건 뭐 식은 죽 먹기보다 쉬우실거에요. 본 글은 엑셀도 잘 모르시는 분들을 기준으로 설명을 드리고 있습니다.

 

스프레드시트에 들어갑니다. 로그인은 굳이 할 필요 없습니다. 어차피 표를 저장할게 아니라 우리들은 엑셀에서 작업한 표의 소스만을 사용할 것이기 때문이죠.

 

혹시 가로가 행이고 세로가 열이라는걸 쉽게 기억하는 방법이 있다는거 아십니까? 저만의 방법이 있습니다. 이것만 외우세요. "조심히 들어가세열~" 만 암기하시면 됩니다. 이 문장에서 핵심은 가세열 부분입니다. 가는 가로, 세는 세로를 뜻하며 열은 말그대로 열입니다. "세열"이 서로 붙어있으니 세로가 열이라는 뜻입니다. 그러면 문장에 포함되지 않은 하나가 남았죠? 그렇습니다. 행이 남았습니다. 따라서 가로는 자동으로 행이 됩니다. 그렇게 가로는 행, 세로는 열이라고 이해하시면 됩니다.

 

테스트삼아서 6행 2열의 표를 만들어 보았습니다. 보통 첫번째 행에는 해당 열의 설명을 적어두죠. 그래서 A1과 B1 항목에는 각각 해당 열의 속성을 적었습니다. A열에는 먹거리를, B열에는 개수를 적어보았습니다. 이 표의 내용을 그대로 구글 블로그 본문에 옮겨보겠습니다.

 

방법은 정~말 쉽습니다. 스프레드시트에서 작업한 영역을 모두 블럭 지정합니다. 그리고 Ctrl+C를 눌러 복사합니다. 이윽고 그대로 구글 블로그 본문에 붙여넣기를 합니다. 그러면 본문에 방금 만든 엑셀 표가 그대로 붙여넣기가 되었음을 확인하실 수 있으실 겁니다.

 

팰월드 팰 패시브 스킬 능력 설명

스프레드시트에서 작업한 표를 그대로 구글 블로그 본문에 붙여넣기해서 작업한게 위의 글입니다. 매우 편리하고 요긴합니다. 그렇다면 편집을 하려면 어떻게 하면 될까요?

 

블로거 본문 표 수정 방법

두 가지가 있습니다. 첫번째는 스프레드시트 자체를 다시 수정해서 기존 표를 지우고 다시 붙여넣기 하는 방법입니다. 즉 재작업 하는거에요. 가장 원시적인 수정 방법입니다. 확실한 방법이죠. 이건 무슨 뜻인지 알 것이니 굳이 디테일한 설명을 드리지 않겠습니다. 두번째는 구글 블로거 본문에 삽입된 표를 HTML 편집 하는 것입니다. 수동으로요. 이건 HTML 지식이 아예 전무하신 분들은 너무 어려운 부분이므로 그냥 첫번째 방법으로 진행하시는것을 추천합니다. 하지만 다음 과정은 HTML을 알던 모르던 꼭 해야 하는 수동 작업입니다.

 

표를 반응형으로 만들기

그렇습니다. 스프레드시트에서 작업하여 복붙한 표는 고정형으로 본문에 적용됩니다. 따라서 수동으로 반응형 표로 만들어야 합니다. 어떻게 변경하는지 알려드리겠습니다.

 

글쓰기 모드에 있는 메뉴 중 맨 왼쪽의 볼펜 아이콘을 누릅니다.

 

HTML 보기로 들어갑니다.

 

<colgroup>
    <col width="100">
    </col>
    <col width="100">
    </col>
</colgroup>

 

그러면 방금 표를 입력한 부분의 태그 중에서 <colgroup> 영역을 찾으실 수 있을 것입니다. 안쪽에는 <col> 태그가 있는데 가로값이 정의되어 있고요. 표의 가로 사이즈를 스프레드시트에서 변경하지 않았다면 기본 크기인 100px로 동일하게 적용되어있을 겁니다. 즉 기본값이 100이에요. 우리가 수정할건 바로 이 100이라는 값 부분입니다. 저는 이렇게 수정해 보았습니다.

 

<colgroup>
   <col width="70%" />
   <col width="30%" />
</colgroup>

 

A열은 B열보다 크게 만들고 싶었습니다. 그래서 첫번째 col 태그는 70%를, 두번째 col 태그는 30%를 입력했습니다. 참고로 처음 보여드렸던 태그 형태랑 구조가 좀 다르죠? 아마 여러분들의 col 태그는 끝나는 태그 부분이 빨간색으로 변해있을거에요. 오류를 띄우고 있죠. 왜냐하면 col 태그는 독립 태그입니다. 즉 닫히는 태그가 없어요. 그래서 </col>을 지운 것입니다. 이해 되시죠? 대신 col 태그 끝 부분에 /를 넣어주고요. 이렇게 하면 태그 오류는 사라집니다.

 

또 하나 핵심이 있습니다. 저는 예시로 표를 2열 형태로 만들었죠? 그래서 col 그룹이 두 개가 생성된 것입니다. 만약 5열의 표라면 어떻게 될까요? 맞습니다. col 태그 그룹이 5개가 됩니다. 지금 예시에서는 col 그룹의 가로 크기 합이 100%죠? 그렇다면 5개의 col그룹도 마찬가지입니다. 합이 무조건 100%가 되어야 합니다. 가로 사이즈가 100% 이상을 넘길수는 없으니까요. 중요한 부분이니 꼭 명심해 주시기 바랍니다. 이제 한 곳을 더 수정해주면 됩니다.

 

<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">

 

<table> 태그도 찾아줍니다. 안쪽에 보시면 style 부분이 있으며 여러 스타일 옵션 중에서는 width: 0; 이라는 옵션이 있을겁니다. 여기에 있는 0을 100%로 변경해 주셔야 합니다. 위의 태그처럼요. 이렇게 해야 완벽한 반응형 표가 됩니다. 저 위에 실제로 적용된 팰월드 글을 브라우저로 열어둔 상태에서 브라우저의 가로 사이즈를 줄여보세요. 표도 실시간으로 가로 사이즈가 브라우저의 크기에 맞춰서 자동으로 변할 것입니다. 그렇게 되어야 반응형으로 정상적으로 수정 완료된 것입니다. 조금 복잡해 보이지만 직접 한번 해보시면 생각만큼 어렵지 않다는걸 피부로 느끼실 수 있을 것입니다. 오늘 내용 끝!