구글 드라이브 시트 사용법: 특정 시트 특정 영역만 아이프레임 iFrame으로 블로그 웹페이지에 삽입 (임베드 Embed) 하는 방법
구글 드라이브 스프레드 시트를 블로그나 웹페이지에 삽입할 때, 특정 시트의 특정 영역만 삽입하는 방법입니다.
굳이 스프레드 시트를 모두 삽입하기 보다는, 필요한 부분만 삽입하면, 좀 더 깔금하고, 잘 어울리게 꾸밀 수 있는 장점이 있습니다. 방법은 아래와 같이 간단합니다.
1. 삽입할 영역 주소 (URL) 만들기
1) 스프레드 시트의 특정 영역만 삽입하는 주소(URL)의 기본 모양은 아래와 같습니다.
해당 스프레드 시트를 지칭하는 스프레드 시트 주소, 해당 스프레드 시트에서 특정 시트를 지칭하는 시트 키, 그리고 해당 시트의 특정 영역 셀 범위로 구성됩니다.
[구글 드라이브 스프레드 시트의 특정 시트의 특정 영역만 삽입하는 코드 모양]
2-1) 스프레드 시트의 키는 스프레드 시트의 주소(URL)에 들어 있습니다.
구글 계정에 로그인 하여, 스프레드 시트를 열면, 아래 그림과 같이, 브라우저 맨 위의 주소(URL) 창에 해당 스프레드 시트의 주소가 표시됩니다.
>> 주소를 복사 (컨트롤 + C키) 합니다.
[구글 스프레드 시트 주소 (URL)]
2-2) 복사하여 가져온 스프레드 시트 주소는 아래와 같은 모양으로 되어 있고, 키 값은 빨강색으로 표시한 부분입니다.
[구글 스프레드 시트 주소(URL) 모양]
ㅇ 스프레드 시트 자체를 지칭하는 주소: 처음 부터 (https:// ~부터) /edit ~ 앞의 암호 같이 생긴 부분 까지
ㅇ 특정시트 (현재 열려 있는 시트)를 지칭하는 키: 맨 끝의 gid= 다음에 있는 수자. gid 다음의 시트 키는 위에서와 같이, 한 자리 수 (0 또는 1, ....)일 수도 있고, 123456789 따위와 같이 여러 자리 수 일 수도 있습니다.
2-3) 특정 영역만을 지칭하는 주소 만들기
위의 특정 영역 삽입 기본 코드 모양에 대입하여, 주소를 만들면 아래와 같은 모양이 됩니다.
맨 끝의 A1:D13은 삽입하고자 하는 셀 영역이므로, 원하는 영역을 적어 주면 됩니다.
[특정 시트의 특정 셀 영역만 삽입하는 주소의 실제 모양]
2. 아이프레임 (iframe)으로 삽입하기
위에서와 같이 만든 주소를 웹페이지나 블로그에 삽입하려면, 아이프레임(iframe)을 이용하게 됩니다. 코드 모양은 아래와 같습니다.
너비, 높이, 테두리, 배경색... 등은 아이프레임 속성 주기에 따르면 됩니다. 아래에서는 간단히 너비(width), 높이(height), 테두리(frameborder) 속성만 설정하였습니다.
[특정 시트의 특정 셀 영역만 삽입하는 주소의 실제 모양]
위의 코드를 실제로 적용하면, 아래와 같이 됩니다.
[실제 적용한 모양 : 특정 시트의 특정 영역만 삽입한 실졔 예]
아래는 위의 예제에서 사용한 스프레드 시트 자체를 통째로 삽입한 실제 모습입니다. 특정 시트의 특정 영역만을 삽입한 위 쪽과 통째로 삽입한 아래쪽을 비교해 보면, 차이점과 장단점을 쉽게 알 수 있을 것입니다. (참조: 구글 스프레드 시트를 통째로 삽입하는 방법)
[구글 스프레드 시트를 통째로 삽입한 실제 모양]
>> 구글 드라이브 시트 사용법: 웹페이지나 블로그에 삽입 (임베드) 하는 방법
>> 구글 드라이브 시트 사용법: 블로그나 웹사이트에 시트 삽입 (임베드)과 브라우저 특성 차이
>> 구글 드라이브 (Google Drive) 사용법 : 글 목록
굳이 스프레드 시트를 모두 삽입하기 보다는, 필요한 부분만 삽입하면, 좀 더 깔금하고, 잘 어울리게 꾸밀 수 있는 장점이 있습니다. 방법은 아래와 같이 간단합니다.
1. 삽입할 영역 주소 (URL) 만들기
1) 스프레드 시트의 특정 영역만 삽입하는 주소(URL)의 기본 모양은 아래와 같습니다.
해당 스프레드 시트를 지칭하는 스프레드 시트 주소, 해당 스프레드 시트에서 특정 시트를 지칭하는 시트 키, 그리고 해당 시트의 특정 영역 셀 범위로 구성됩니다.
[구글 드라이브 스프레드 시트의 특정 시트의 특정 영역만 삽입하는 코드 모양]
스프레드 시트 주소/pubhtml/sheet?headers=false&gid=시트 키&range=삽입할 셀 범위
2-1) 스프레드 시트의 키는 스프레드 시트의 주소(URL)에 들어 있습니다.
구글 계정에 로그인 하여, 스프레드 시트를 열면, 아래 그림과 같이, 브라우저 맨 위의 주소(URL) 창에 해당 스프레드 시트의 주소가 표시됩니다.
>> 주소를 복사 (컨트롤 + C키) 합니다.
[구글 스프레드 시트 주소 (URL)]
2-2) 복사하여 가져온 스프레드 시트 주소는 아래와 같은 모양으로 되어 있고, 키 값은 빨강색으로 표시한 부분입니다.
[구글 스프레드 시트 주소(URL) 모양]
https://docs.google.com/spreadsheets/d/1bjZBLTu-OINGzlNN8Y2EjTtSREroJ9jzpyspEIc/edit#gid=0
ㅇ 스프레드 시트 자체를 지칭하는 주소: 처음 부터 (https:// ~부터) /edit ~ 앞의 암호 같이 생긴 부분 까지
ㅇ 특정시트 (현재 열려 있는 시트)를 지칭하는 키: 맨 끝의 gid= 다음에 있는 수자. gid 다음의 시트 키는 위에서와 같이, 한 자리 수 (0 또는 1, ....)일 수도 있고, 123456789 따위와 같이 여러 자리 수 일 수도 있습니다.
2-3) 특정 영역만을 지칭하는 주소 만들기
위의 특정 영역 삽입 기본 코드 모양에 대입하여, 주소를 만들면 아래와 같은 모양이 됩니다.
맨 끝의 A1:D13은 삽입하고자 하는 셀 영역이므로, 원하는 영역을 적어 주면 됩니다.
[특정 시트의 특정 셀 영역만 삽입하는 주소의 실제 모양]
https://docs.google.com/spreadsheets/d/1bjZBLTu-OINGzlNN8Y2EjTtSREroJ9jzpyspEIc/pubhtml/sheet?headers=false&gid=0&range=A1:D13
2. 아이프레임 (iframe)으로 삽입하기
위에서와 같이 만든 주소를 웹페이지나 블로그에 삽입하려면, 아이프레임(iframe)을 이용하게 됩니다. 코드 모양은 아래와 같습니다.
너비, 높이, 테두리, 배경색... 등은 아이프레임 속성 주기에 따르면 됩니다. 아래에서는 간단히 너비(width), 높이(height), 테두리(frameborder) 속성만 설정하였습니다.
[특정 시트의 특정 셀 영역만 삽입하는 주소의 실제 모양]
<iframe src="
https://docs.google.com/spreadsheets/d/1bjZBLTu-OINGzlNN8Y2EjTtSREroJ9jzpyspEIc/pubhtml/sheet?headers=false&gid=0&range=A1:D13
"
width="700"
height="350"
frameborder="0">
</iframe>
https://docs.google.com/spreadsheets/d/1bjZBLTu-OINGzlNN8Y2EjTtSREroJ9jzpyspEIc/pubhtml/sheet?headers=false&gid=0&range=A1:D13
"
width="700"
height="350"
frameborder="0">
</iframe>
위의 코드를 실제로 적용하면, 아래와 같이 됩니다.
[실제 적용한 모양 : 특정 시트의 특정 영역만 삽입한 실졔 예]
아래는 위의 예제에서 사용한 스프레드 시트 자체를 통째로 삽입한 실제 모습입니다. 특정 시트의 특정 영역만을 삽입한 위 쪽과 통째로 삽입한 아래쪽을 비교해 보면, 차이점과 장단점을 쉽게 알 수 있을 것입니다. (참조: 구글 스프레드 시트를 통째로 삽입하는 방법)
[구글 스프레드 시트를 통째로 삽입한 실제 모양]
>> 구글 드라이브 시트 사용법: 웹페이지나 블로그에 삽입 (임베드) 하는 방법
>> 구글 드라이브 시트 사용법: 블로그나 웹사이트에 시트 삽입 (임베드)과 브라우저 특성 차이
>> 구글 드라이브 (Google Drive) 사용법 : 글 목록