Type Here to Get Search Results !

블로그에서 pdf 파일 넣기: 뷰어 넣기: 내장하기: 미리보기 하는 법 - 구글 드라이브 이용

이 글에서는 pdf 파일을 구글 블로그 혹은 다른 블로그에 내장해서 보여주는 방법에 대해서 설명합니다. 

  • 블로그에 pdf 파일 미리 보기 하는 방법 개요
  • 블로그에 미리 보기 할 pdf 파일 구글 드라이브에 넣기
  • pdf 파일을 내 블로그에 바로 보이게 하는 방법
블로그에 pdf 파일 미리보기 하는 법 섬네일


블로그에 pdf 파일 넣는 방법 개요

블로그에 pdf 파일을 넣는 기능을 기본으로 제공하는 블로그는 없습니다. 그래서, 블로그에 pdf 파일을 넣어 바로 보여주는 방법에 대해서 설명합니다. 

먼저 블로그에 pdf 파일을 넣기 위해서 이 글에서는 구글 드라이브를 이용합니다. 

구글 드라이브에 파일을 넣고, 해당 파일을 html의 frame에 감싸서 미리 보여주는 방법을 이용합니다. 

블로그에 미리 보기 할 pdf 파일 구글 드라이브에 넣기 

구글 드라이브에 파일을 넣기 위해서 먼저 구글 드라이브에 접속합니다. 구글 드라이브는 구글에 로그인 된 상태에서 구글 앱 버튼(점 9개 있는 버튼구글 앱 버튼)을 확장하여 바로 접속할 수 있습니다. 

먼저 구글 드라이브에 접속하면 아래와 같은 화면이 나타납니다. 여기에서 저의 경우 blogspot이라는 디렉터리를 새로 만들었습니다. 


구글 드라이브 화면

그 후에 해당 디렉터리에 파일을 삽입합니다.  아래와 같은 화면에서 파일이 삽입되는데, 이 때 우측에 액세스 관리를 누릅니다. 


구글 드라이브 엑세스 관리


액세스 관리 화면에서 "제한됨"이라고 되어있는 버튼을 확장하여 "링크가 있는 모든 사용자"로 변경해 줍니다. 

구글 드라이브 파일 링크가 있는 사용자

링크가 있는 모든 사용자를 선택하면 최종적으로 아래와 같이 나타나는데, 이 화면에서 "링크 복사"를 눌러서 링크를 복사합니다. 

구글 드라이브 첨부 파일 액세스 변경 후 링크 복사

링크를 복사하게 되면 다음과 같은 주소가 복사 됩니다. 저의 경우에는 아래와 같습니다. 

https://drive.google.com/file/d/1h2gxsO6Z_n4VKLwN80Q895N4Hq1SUjUK/view?usp=share_link

pdf 파일을 내 블로그에 바로 보이게 하는 방법 

이제 pdf 파일을 내 블로그에 바로 보이게 하는 방법을 설명해 드리도록 하겠습니다. 

구글 드라이브에서는 첨부된 pdf 파일에 대해서 preview 링크를 제공합니다. 

블로그의 html 페이지를 열어서 원하는 위치에 아래와 같이 iframe을 삽입하면 됩니다.


<iframe src="https://drive.google.com/file/d/1h2gxsO6Z_n4VKLwN80Q895N4Hq1SUjUK/preview" width="100%" height="600px"></iframe>

위의 코드에서, "https://drive.google.com/file/d/1h2gxsO6Z_n4VKLwN80Q895N4Hq1SUjUK/preview" 부분은 해당 PDF 파일이 저장된 구글 드라이브 공유 링크에서 "/view?usp=sharing" 대신 "/preview"로 바꿔준 내용입니다. 

또한, width 및 height 속성을 통해 내장된 PDF 파일의 크기를 조절할 수 있습니다. 이 코드를 HTML 파일에 삽입하면 구글 드라이브에서 공유한 PDF 파일을 HTML 페이지에서 바로 볼 수 있습니다.

예제로 사용한 파일은 아래에 보여지고 있습니다. 참고하시기 바랍니다. 

Tags