구글 드라이브 시트 사용법: 웹페이지나 블로그에 삽입 (임베드) 하는 방법

구글 드라이브 스프레드 시트를 웹페이지나 블로그에 연동하여 삽입하는 방법은 아래 그림과 같이 간단합니다. 연동은, 스프레드에서 내용을 갱신하면, 삽입된 블로그나 웹페이지도 자동으로 갱신됨을 뜻합니다.

구글 스프레드 시트 삽입(임베드, Embed)은 스프레드 시트 자체에 하나의 기능으로 내장되어 있으므로, 몇 번의 클릭만으로 삽입 코드를 얻을 수 있습니다.


1. 스프레드 시트 발행 설정 및 삽입용 코드 얻기


항목 선택:
1) 스프레드 시트에는 여러개의 시트가 있을 수 있습니다. 스프레드시트를 삽입할 때, 스프레드 시트 자체를 통째로 삽일할지, 특정한 시트만 삽입할지 선택할 수 있습니다.

2) 스프레드 시트에서 데이타가 변경되면, 삽입된 블로그나 웹페이지에도 연동하여 자동으로 갱신할지 여부를 선택할 수 있습니다.

삽입 코드 얻기:
>> 스프레드 시트의 왼쪽 상단 메뉴에서 > 파일(File) > 웹에 게시 (Publish to the web)
>> 게시 형태에서 삽입(Embed) 선택

>> 삽입할 시트 선택 (통째로 또는 특정 시트만)
>> 스프레드 시트 데이타가 갱신되면, 삽입된 내용도 연동하여 갱신되도록 할 지 여부 선택 ( Automatically republish when changes are made 옆의 체크 박스)

>> 발행(Publish) 버튼 누름 > 삽입 코드가 생성되어 표시됨
>> 코드를 복사 (컨트롤 + C키) 함 

구글 드라이브 시트 사용법: 웹페이지나 블로그에 삽입 (임베드) 하는 방법


2. 스프레드 삽입용 코드 다루기

위에서와 같이 하여, 얻은 삽입용 코드는 아래와 같이 생겼습니다. 아래에서 보듯이, 아이프레임(iFrame)으로 되어 있습니다.

[구글 드라이브 시트 삽입 코드 모양]
<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvrETeM5Ney8GBPQUa81Kya5hTRMioXrQ79viXlDVhdNwRTtisJlZJXwLjsd8jDABTFTKKJFwC0CAYjDCxPJ/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false"></iframe>

얻은 코드를 그대로 웹페이지나 블로그에 삽입하면, 아주 조그맣게 표시되고, 좌우 상하 스크롤바가 나타납니다.

삽입코드는 아이프레임(iframe)으로 되어 있으므로, 삽입하고자 하는 블로그나 웹페이지에 어울리게 가로, 세로 길이와 테두리선을 설정하는 방법은 아이프레임 속성 설정에 따르면 됩니다.

아래는 너비(width), 높이(height), 그리고 테두리(frameborder)를 설정한 예 입니다.

<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvrETeM5Ney8GBPQUa81Kya5hTRMioXrQ79viXlDVhdNwRTtisJlZJXwLjsd8jDABTFTKKJFwC0CAYjDCxPJ/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false" width="700" height="350" frameborder="0"></iframe>


>> 구글 드라이브 시트 사용법: 특정 시트 특정 영역만 아이프레임 iFrame으로 블로그 웹페이지에 삽입 (임베드 Embed) 하는 방법
>> 구글 드라이브 시트 사용법: 블로그나 웹사이트에 시트 삽입 (임베드)과 브라우저 특성 차이
>> 위와 같은 방법으로 구글 스프레드 시트를 삽입한 실제 예