12월 14, 2022 4월 27, 2020

구글 블로그에 엑셀 /구글 시트 삽입과 공유 방법

세계를 주도해 나가는 구글의 진보는 다채롭고 경이롭다. 차트 편집의 대명사인 엑셀의 표를 블로그 웹페이지 상에 보이도록 하는 구글 문서(Google Docs)의 간편하고 쉬운 방법을 소개한다. 개요는 구글 문서(온라인 문서 작성 프로그램)에서 엑셀 파일을 만들거나 불러온 후에, 아이프레임 태그(iframe tag)를 생성해서 원하는 웹페이지에 삽입(임베드)만 하면 깔끔하고 예쁜 엑셀 차트를 노출시킬 수 있다. 뿐만 아니라 일단 삽입(Embed)된 후에는 구글 문서에서 수정하고 저장만 하면 다시 삽입(Embed)할 필요 없이 업데이트 된다. 유튜브 동영상 공유 소스와 같은 원리로 생각하면 된다.구글 문서는 구글 클라우드(Drive)를 기반으로 운영되기 때문에 반드시 구글 계정 확보를 위한 일련의 과정이 선행되어야 이 작업이 가능하다는 점을 명심해야 한다.

구글문서 사용 방법

구글문서(Google Docs)에 접속한 다음 매뉴 아이콘을 클릭한다.
메뉴에서 엑셀 표(Sheets)를 선택하면,
구글 클라우드(Drive)에 저장된 엑셀 파일들이 리스트에 나타나는데, 이것을 수정 하거나 아니면 새로운 파일을 만들면 된다.
로딩된 엑셀 프로그램에서 파일을 작성하고 저장하면 된다. 엑셀 아이콘을 누르면 저장이 완료된다.

iframe 만들기

엑셀 프로그램에서 블로그 페이지에 삽입(imbed)할 파일 작엽이 완료되면 File 메뉴로 이동해서 웹 게시(Publish to web)을 클릭한다.
팝업된 웹 게시(Publish to web) 창에서 Embed(삽입) 선택한 다음,
한번 삽입(Embed) 하면 차후 파일 수정시 자동 업테이트 여부를 설정하고,
iframe tag 부분을 복사해서 엑셀 표(Sheet)를 나타내고자 하는 웹페이지 HTML 편집창에서 붙여넣기를 하면 된다.

엑셀 시트 삽입

엑셀 시트 수정

표의 가로 폭(width)과 세로 길이(height) 조정은 iframe tag에 직접 스타일을 지정하거나 표가 있는 게시글 하단에 html 편집창을 이용해서 다음과 같이 스타일을 지정하면 된다.

2-6은 PC에서 보이는 표, 7-13번은 모바일에서 보이는 표의 크기 등을 각각 조절할 수 있다. 반드시 모바일용 스타일도 지정해야 모바일에서 제대로 보인다. 모바일상의 글자 크기와 모양, 색상 등 전반적 사항을 수정할 수 있다.

방법 1

<style>
iframe{
    width:100%;
    height:700px;
    border:0;
}
@media only screen and (max-width: 780px) {
 iframe{
    width:100%;
    height:700px;
    border:0;
} 
} 
</style>

방법 2

<iframe style="width:100%;height:700px;border:0;">
src=" "</iframe>