구글 드라이브 Html | Google 드라이브에서 Html 코드를 무료로 호스팅하는 방법은 무엇입니까? 231 개의 베스트 답변

당신은 주제를 찾고 있습니까 “구글 드라이브 html – Google 드라이브에서 HTML 코드를 무료로 호스팅하는 방법은 무엇입니까?“? 다음 카테고리의 웹사이트 https://hu.taphoamini.com 에서 귀하의 모든 질문에 답변해 드립니다: https://hu.taphoamini.com/photos/. 바로 아래에서 답을 찾을 수 있습니다. 작성자 PerfectCod 이(가) 작성한 기사에는 조회수 7,678회 및 좋아요 121개 개의 좋아요가 있습니다.

구글 드라이브 html 주제에 대한 동영상 보기

여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!

d여기에서 Google 드라이브에서 HTML 코드를 무료로 호스팅하는 방법은 무엇입니까? – 구글 드라이브 html 주제에 대한 세부정보를 참조하세요

If this video useful to you, Don’t forget to subscribe, like and comment.
How to submit HTML form data to google spreadsheet?
https://youtu.be/EB2g6-LlObQ
Learn HTML,CSS,JS
https://play.google.com/store/apps/details?id=com.drkatlearningwebdesign.webappjai

구글 드라이브 html 주제에 대한 자세한 내용은 여기를 참조하세요.

[구글드라이브]구글드라이브에 html올리기, 호스트사용

구글 드라이브에서 자바 스크립트는 활용 가능합니다. … 저는 이 앱을 쓰고 있어서 파일 올리기고 html문서를 올리지 않고 HTML Editey앱으로 직접 …

+ 여기에 표시

Source: m.blog.naver.com

Date Published: 12/5/2022

View: 664

Google Drive

Tải các ứng dụng dành cho Andro và iOS trên điện thoại di động và máy tính bảng của bạn, rồi truy cập mọi thứ mà bạn lưu giữ trong Drive ở bất kỳ nơi đâu. Tải …

+ 더 읽기

Source: www.google.com.vn

Date Published: 12/21/2022

View: 6752

Google 드라이브를 사용하여 무료로 간단한 정적 웹사이트 호스팅

Google 드라이브 계정에 새 폴더를 만들고 가시성을 다음으로 변경하기만 하면 됩니다. Public, HTML, CSS, 이미지 및 기타 웹 자산을 업로드하면 웹사이트를 볼 수 …

+ 여기에 표시

Source: correcty.net

Date Published: 3/20/2021

View: 4198

구글-드라이브 사진, 웹사이트에 올리기

티스토리 사이드바에 이미지를 넣는 방법은 <이미지 배너출력>이나 두 가지 방법이 있습니다. 이 두 가지 방법 모두 서버에 사진(이미지) …

+ 여기에 자세히 보기

Source: www.ymca.pe.kr

Date Published: 2/27/2021

View: 8274

opening html from google drive – Stack Overflow

8 Answers 8 · Create a new folder in Drive and share it as “Public on the web.” · Upload your HTML, JS & CSS files to this folder. · Open the HTML file & you will …

+ 여기를 클릭

Source: stackoverflow.com

Date Published: 11/9/2021

View: 9970

구글 드라이브를 외부 이미지 링크 저장소로 사용하기

이 주소로는 구글이 제공하는 뷰어에서만 볼 수 있다. 누구나 접근할 수 있고 다운받을 수 있다는 뜻이지 호스팅 서비스에서 처럼 html 소스에서 링크로 …

+ 더 읽기

Source: www.somanet.xyz

Date Published: 5/17/2021

View: 5152

구글 드라이브, 이제 저장된 HTML, JS, CSS 파일을 웹사이트 …

구글은 목요일 구글 드라이브를 통해 웹 개발자들이 웹사이트를 만들어서 공유할 수 있도록 했다. HTML, JS, CSS 파일들을 저장하고 공유 링크를 …

+ 여기에 더 보기

Source: www.clien.net

Date Published: 9/9/2021

View: 9168

구글 드라이브에서 HTML 파일 열기

다른 방법으로, 크롬 브라우저 사용시 이메일에 첨부된 HTML 파일을 구글 드라이브로 저장하고,Drive 에서 파일 클릭하여 열기 위해서는 일종의 보조 …

+ 여기를 클릭

Source: livinglikehuman.blogspot.com

Date Published: 8/9/2021

View: 8536

구글 드라이브로 이미지 호스팅하고, 웹사이트에 배너로 띄워보기

HTML파일은 메모장으로도 작성 가능하니 메모장을 열자. 일단 아래와 같이 입력하자. 파일을 저장할건데, 기본적으로 *.txt로 …

+ 여기에 보기

Source: lotuus.tistory.com

Date Published: 4/8/2021

View: 9464

구글 드라이브를 블로그 이미지 서버로 활용하기

HTML의 태그를 이용해서 인터넷의 이미지를 티스토리에 삽입하는 방법이다. 외부이미지를 링크하는 방식이므로 크기나 용량의 제한이 없다 …

+ 여기에 자세히 보기

Source: puleunhaneulkr.tistory.com

Date Published: 3/14/2021

View: 5121

주제와 관련된 이미지 구글 드라이브 html

주제와 관련된 더 많은 사진을 참조하십시오 Google 드라이브에서 HTML 코드를 무료로 호스팅하는 방법은 무엇입니까?. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.

---

주제에 대한 기사 평가 구글 드라이브 html

• Author: PerfectCod
• Views: 조회수 7,678회
• Likes: 좋아요 121개
• Date Published: 2021. 5. 31.
• Video Url link: https://www.youtube.com/watch?v=m3TXRxqiGvw

[구글드라이브]구글드라이브에 html올리기, 호스트사용

구글드라이브는 활용이 무궁무진하네요. 한국에서야 당근 네이버 활용이 편하고 모두들 아이디 하나씩 가지고 있으니 범용성도 있지만 막고 있는 기능들도 있어 제한적이긴 해요. 자바스크립트만 해도 그렇죠.

구글 드라이브에서 자바 스크립트는 활용 가능합니다. 자바스크립트가 올라갈 수 있다는 이야기는 구글 드라이브 자체가 호스트 역할을 할 수 있다는 이야기기도 하죠.

일단 구글 계정 하나씩 만드셔야겠죠. ^^ 여기서 계정 만드는 일은 패스합니다~~

먼저 드라이브에서 폴더를 생성합니다. 저는 폴더를 publichost로 이름을 정했습니다.

​

폴더 공유를 설정해줍니다.​

공유에서 변경을 원하면 하단의 고급 버튼을 클릭해주세요.

웹에 공개입니다. 모든 사용자가 로그인 필요 없이 액세스 할 수 있도록 합니다.

여기까지 설정했다면 뭐 거의 다한 거나 다름없어요.

​

생성한 폴더에서 js 스크립트 파일이나 HTML 파일을 올립니다. 저같은 경우는 구글 크롬 앱으로 HTML Editey를 쓰고 있어요. 웹에서 바로 사용할 수 있어서 편하네요.

​

저는 이 앱을 쓰고 있어서 파일 올리기고 html문서를 올리지 않고 HTML Editey앱으로 직접 편집하려고 합니다.

​

​

파일생성하려고 할 때 파일의 공유설정을 합니다. 폴더를 전체공유로 했기 때문에 폴더와 동일하게 공유설정 합니다.

간단한 파일 만들어보았습니다.

이제 이 파일을 어떻게 웹에서 확인하는지 살펴보기로 합니다~~

​

생성한 html 파일에서 오른쪽 버튼을 눌러 미리보기를 확인합니다.

미리보기 상단에 있는 URL이 바로 이 파일의 아이디가 됩니다.

​

https://googledrive.com/host/해당 파일의 아이디 이렇게 적어주시면 됩니다.

​

짜잔~~ 간단했던 자바 스크립트 내용 나오네요~~

Google Drive

An toàn, bảo mật, có thể chia sẻ

Cho dù có vấn đề gì xảy ra với thiết bị của bạn, tệp của bạn vẫn được lưu trữ an toàn trong Google Drive. Và mọi thứ bạn tải lên hay tạo ra trong Drive đều thuộc về bạn và được tự động thiết lập chế độ riêng tư, trừ phi bạn quyết định chia sẻ.

Google 드라이브를 사용하여 무료로 간단한 정적 웹사이트 호스팅

웹사이트를 호스팅하는 것과 만드는 것은 매우 다릅니다. 다음과 같은 온라인 서비스가 넘쳐나므로 웹사이트나 블로그를 쉽게 만들 수 있습니다. 위블리, 윅스, 워드프레스닷컴, 텀블러, 구글 사이트, 블로거 기타 등등. 처음부터 자신의 웹사이트를 코딩하고 개발할 필요는 없지만 이러한 플랫폼의 유일한 문제는 디자인과 기능을 완전히 제어할 수 없다는 것입니다.

이제 다른 부분이 나옵니다. 웹 호스팅 제공업체와 함께 서버 공간을 구입하고 real 웹사이트. 이 같은. 그러나 서버 공간을 구입하고 실제 웹 사이트를 호스팅하는 유일한 단점은 서버를 유지 관리하고 웹 호스팅 공급자에게 월 사용료를 지불해야 한다는 것입니다. 무료 웹사이트 구축 플랫폼과 웹 호스팅 회사에서 호스팅 공간을 구입하는 것과는 대조적으로 Google 계정을 사용하여 간단한 HTML 웹사이트를 호스팅하는 것은 어떻습니까?

방법은 다음과 같습니다.

Google 드라이브를 사용하여 무료로 웹사이트 호스팅

구글 드라이브 Google 계정에 파일을 업로드하고 저장할 수 있습니다. 이 기능을 사용하여 무료로 웹사이트를 호스팅할 수 있습니다. Google 드라이브 계정에 새 폴더를 만들고 가시성을 다음으로 변경하기만 하면 됩니다. Public, HTML, CSS, 이미지 및 기타 웹 자산을 업로드하면 웹사이트를 볼 수 있습니다. 이전에 Dropbox 계정으로 정적 웹사이트를 호스팅하는 유사한 방법을 공유했습니다.

Google 드라이브의 좋은 점은 JavaScirpt와 같은 클라이언트 측 스크립팅 언어를 지원하므로 간단한 JavaScript 앱을 빌드하고 Google 드라이브에서 호스팅할 수 있다는 것입니다.

Requirements – What You Should Know Before Publishing Websites in Google Drive

Google 드라이브에 간단한 웹사이트 또는 앱을 게시하려면 다음 두 가지 요구사항만 있으면 됩니다.

웹사이트의 모든 자산을 업로드할 폴더는 Public . 이미지, CSS, html 및 기타 파일과 같은 모든 웹 자산은 누구나 공개적으로 액세스할 수 있어야 합니다.

. 이미지, CSS, html 및 기타 파일과 같은 모든 웹 자산은 누구나 공개적으로 액세스할 수 있어야 합니다. 웹사이트의 모든 내부 하이퍼링크는 webViewLink 폴더 ID와 파일 경로를 사용해야 합니다.

이 모든 것이 너무 괴상하게 들리더라도 걱정하지 마십시오. 다음의 간단한 단계에 따라 웹사이트를 시작하고 Google 드라이브에 게시하세요.

1. 귀하의 로그인 구글 드라이브 계정 Gmail 사용자 이름과 비밀번호로

2. Create 그리고 선택 Folder. 웹사이트의 일반 이름을 입력하십시오. 예: My website. 나중에 언제든지 이름을 변경할 수 있으므로 걱정하지 마십시오.

3.클릭 My Drive 왼쪽 사이드바에서 문서의 나머지에서 웹사이트의 폴더를 선택하고 More 드롭 다운 메뉴. 다음 선택 Share

4. 기본적으로 Google 드라이브 계정 내 모든 폴더의 공유 설정은 Private. 다음으로 변경 Public.

5. 이제 Google 드라이브 내에서 웹사이트를 호스팅하는 데 사용하는 디렉터리의 고유 ID를 알아야 합니다. 폴더를 선택하고 More 그리고 가다 Sharing settings 다시 한번. 텍스트 필드 아래에 폴더의 ID가 표시되어야 합니다. Link to share. 다음은 예입니다.

https://docs.google.com/folder/d/0B5s3xO7X_W86ZzNXekpvMjd2U0k/편집하다

6. 이제 웹사이트 루트에 index.html 파일을 업로드해야 합니다. 다운로드 샘플 HTML 파일 컴퓨터에서 index.html로 이름을 변경하고 Google 드라이브 웹사이트 폴더에 업로드합니다. 이제 Google 드라이브에 있는 웹사이트의 폴더가 다음과 같이 표시됩니다.

Google 드라이브 계정에 있는 동안 index.html을 클릭하면 Google은 Google 문서 뷰어 내에서 파일을 로드하고 일반 HTML 파일로 렌더링하지 않습니다. 따라서 웹사이트를 미리 보려면 새 브라우저 탭을 열고 다음 링크를 붙여넣어야 합니다.

https://googledrive.com/host/XXXXXXXXX/

참고: XXXXXXXXX를 Google 드라이브 계정의 고유 폴더 ID로 바꾸십시오.

이제 웹사이트가 Google 드라이브에서 호스팅되고 실행되므로 다음과 같이 표시되어야 합니다.

Tip: 다음과 같은 URL 단축 서비스를 사용하여 Google 드라이브 웹사이트의 공개 링크를 단축합니다. 구.글 또는 비트리, 따라서 긴 URL이나 Google 드라이브 폴더의 ID를 기억할 필요가 없습니다. 링크 예시 – http://goo.gl/O5FDz

Google 드라이브에 호스팅된 웹사이트에서 HTML 템플릿 및 CSS 사용

자, 이는 Google 드라이브 또는 Google 문서도구 계정에서 간단한 웹페이지를 호스팅하고 공유 설정을 공개로 변경하고 일반 웹사이트처럼 작동하도록 하는 방법을 보여주는 예시일 뿐입니다. 계속해서 HTML 템플릿과 일부 CSS 스타일을 사용하여 웹사이트의 모양을 사용자 정의하고 더 아름답고 전문적으로 보이게 하는 것이 좋습니다.

완전한 기능을 갖춘 HTML 웹사이트를 호스팅하고 Google 드라이브 계정에서 HTML 템플릿을 사용하려면 웹 디자인의 일반적인 규칙을 따라야 합니다. 예를 들어, 이미지를 위한 별도의 폴더, CSS 및 JS 파일을 위한 별도의 폴더, 모든 HTML 페이지를 포함할 별도의 폴더를 가질 수 있습니다. websie를 로컬에서 디자인하고 Adobe Dreamweaver, Aptana Studio와 같은 HTML 편집 응용 프로그램을 사용하고 디자인이 끝나면 모든 핵심 파일, 이미지, 스타일시트 및 JS 파일을 Google 드라이브 계정의 폴더에 업로드해야 합니다.

다음으로 HTML 템플릿에서 호출되는 모든 파일이 상대 파일이나 로컬 파일이 아닌지 확인해야 합니다. 정확히는 Google 드라이브 계정에 표시되는 파일의 절대 경로로 파일 경로를 변경해야 합니다.

예를 보여주기 위해 다음은 Google 드라이브 내에서 내 간단한 웹사이트의 파일 구조가 어떻게 보이는지 보여줍니다.

모든 핵심 파일이 내 Google 드라이브 계정의 웹사이트 디렉토리에 업로드되면 CSS, 이미지 및 기타 파일의 절대 경로를 사용하고 HTML 템플릿 소스에서 호출하기만 하면 됩니다. 이것은 정말 기본적인 것입니다. HTML 템플릿과 일반 코딩이 어떻게 작동하는지 안다면 큰 어려움 없이 알아낼 수 있을 것입니다.

이제 Google 사이트, Blogger, WordPress.com과 같은 다른 플랫폼을 사용하지 않고 Google 드라이브에서 웹사이트를 호스팅하는 실제 사용 사례는 무엇입니까? 솔직히, 아주 독점적인 것도 없고 유지 관리가 매우 편리하고 쉬운 것도 아닙니다. 그러나 파일 서버, 웹 서버 또는 웹 호스팅 계정 없이 로컬 웹사이트를 테스트하려는 사람이라면 Google 드라이브가 강력한 테스트 놀이터 역할을 할 수 있다고 생각합니다.

웹 디자이너이거나 이제 막 코딩을 시작하고 HTML 프로젝트를 온라인 저장소에 백업하는 간단한 방법이 필요한 경우 Google 드라이브가 완벽합니다. Google 로그인 뒤에 있는 안전하고 보안이 유지되므로 로컬 컴퓨터에서 HTML 편집기를 사용하지 않고도 언제든지 프로젝트를 미리 보고 온라인으로 편집할 수 있습니다.

에 대한 Google 공식 문서 읽기 Google 드라이브에서 웹사이트 호스팅 및 게시.

구글-드라이브 사진, 웹사이트에 올리기

728×90

티스토리 사이드바에 이미지(광고 배너)를 넣기 위한 방법을 찾다가 알게 되었습니다.

티스토리 사이드바에 이미지를 넣는 방법은 <이미지 배너출력>이나 두 가지 방법이 있습니다.

이 두 가지 방법 모두 서버에 사진(이미지)가 올려져 있지 않으면 티스토리에서 출력이 되지 않습니다. 과거에는 티스토리 포스팅 글에 사진을 첨부하고 url 주소를 복사해서 넣어도 가능했지만, 지금은 이렇게하면 이미지가 블로그 스킨에 출력되지 않습니다.

새로 찾아 낸 방법은 구글 드라이브를 활용하는 방법입니다.

구글링을 하다가 블로그에서 그 방법을 배웠습니다.(배웠다기 보다 퍼 왔습니다.)

구글 드라이브를 외부 이미지(사진) 링크 저장소로 활용하기

우선 가장 먼저 해야 하는 일은 구글 드라이브에 사진을 올리고 링크 주소를 복사해와야 합니다. (구글 드라이브에 사진을 올리는 방법은 생략합니다.)

구글 드라이브에 올려놓은 사진에 마우스를 놓고 오른쪽 버튼을 클릭하면 <링크생성>이 나옵니다. 링크 생성을 누르면 새로운 창이 열리는데… 이 <링크보기>에서 링크를 복사하여 사용하면 됩니다.

이 링크 주소를 티스토리 <이미지 URL>에 복사해서 넣으면 되는 것은 아닙니다. (이게 되면 정말 간단하고 좋겠지요 ㅠ)

구글링을 하다가 블로그를 보니 구글 링크를 HTML 소스용 링크로 바꿔주는 소스 변경 프로그램이 만들어져 있었습니다. [www.somanet.xyz/2017/06/blog-post_21.html] 이 링크를 따라가면 소스코드까지 공개되어 있어서 저도 이 포스팅에 붙여 넣었습니다.

구글 링크주소는 구글이 제공하는 뷰어에서만 볼 수 있다고 합니다. 누구나 접근할 수 있고 다운받을 수 있다는 뜻이지 호스팅 서비스에서 처럼 html 소스에서 링크로 쓸 수는 없다고 합니다. 이걸 호스팅 서비스처럼 MTML 소스에 쓸 수 있는 링크로 바꿔주는 것은 아래 프로그램으로 가능합니다.

위 사진처럼 구글 드라이브 링크 주소를 붙여넣고 아래 버튼(Make Google Drive Path Linkable)을 누르면 변경된 주소가 만들어집니다. 이미지 주소와 이미지 테그가 만들어집니다.

성공적으로 변환이 되면 맨 아래쪽에 구글 드라이브에 저장된 사진이 나타납니다. 성공적으로 링크 주소 변환이 된 것을 확인하였으면 <복사하기>를 눌러서 변경된 주소를 복사해서 티스토리로 가져가면 됩니다.

티스토리 <이미지 URL>에 붙여넣기를 하고 <확인>을 눌러서 저장하면 맨 위 첫 번째 사진처럼 티스토리 사이드바에 사진(혹은 광고)를 넣을 수 있습니다.

아래는 블로그에서 복사해온 소스코드를 붙여넣어서 만든 링크 변환기입니다.

Google Drive path Make Google Drive Path Linkable Linkable Image path Save to Clipboard

Image Tag Save to Clipboard

Preview image

티스토리툴바

728×90

opening html from google drive

I don’t think it is necessary to “host” the content using the way from the accepted answer. It is too complicated for a normal user with limited developing skills.

Google actually has provided hosting feature without using Drive SDK/API, what you need is just few clicks. Check this out:

http://support.google.com/drive/bin/answer.py?hl=en&answer=2881970

It is the same to the answer of user1557669. However, in step 4, the URL is not correct, it is like:

https://drive.google.com/#folders/…

To get the correct host URL. Right click on the html file (you have to finish 1-3 steps first and put the html in the public shared folder), and select “Details” from the context menu. You will find the hosting URL right close to the bottom of the details panel. It should look like:

https://googledrive.com/host/…/abc.html

Then you can share the link to anyone. Happy sharing.

구글 드라이브, 이제 저장된 HTML, JS, CSS 파일을 웹사이트처럼 사용 : 클리앙

구글은 목요일 구글 드라이브를 통해 웹 개발자들이 웹사이트를 만들어서 공유할 수 있도록 했다. HTML, JS, CSS 파일들을 저장하고 공유 링크를 누르기만 하면 된다.

차례는 다음과 같다.

1. 드라이브에서 새 폴더를 만들고 “Public on the web”으로 공유를 한다.

2. 이 폴더에 HTML, JS, CSS 파일을 업로드한다.

3. HTML 파일을 열면 툴바의 “Preview” 버튼이 보인다.

4. 미리보기창에서 www.googledrive.com/host/… 처럼 된 URL을 볼 수 있고 이제 누구든 웹페이지에 접근할 수 있다.

* 출처 : http://thenextweb.com/google/2013/02/05/google-drive-now-lets-developers-share-hosted-websites-by-storing-html-javascript-and-css-files/

* 구글 메뉴얼 : https://support.google.com/drive/bin/answer.py?hl=ko&topic=2525251&ctx=topic&answer=2494822

구글 드라이브로 이미지 호스팅하고, 웹사이트에 배너로 띄워보기

728×90

반응형

목차

지인에게 연락이와서 찾아본 방법이다.

이런 방법도 있구나 ㅋㅋㅋ 하고 느낀다 ㅎㅎ

구글 드라이브

1. 구글 드라이브에 파일을 올리고, 우클릭 하여 “공유” 메뉴를 클릭한다.

2. 처음에는 권한이 “제한됨” 으로 설정되어있다. “링크가 있는 모든 사용자로 변경” 클릭

3. 아래 화면이 뜨면 권한이 “모든 사용자에게 공개”로 업데이트 된 것이다. “링크복사” 를 클릭하고 “완료”를 누른다.

(만약 링크를 복사하지 못하고 창을 닫았을 때는, 이미지파일을 우클릭하여 “링크생성”을 클릭해서 팝업창을 연다.)

4. 복사한 링크를 수정할 것이다. 메모장을 켜자.

기존 링크에서 [ s: ], [ file/d/ ], [ /view?usp=sharing ] 3가지를 삭제하고

[ uc?export=view&id= ] 를 추가해준다.

참고 : http://www.somanet.xyz/2017/06/blog-post_21.html

이제 변환된 링크만 있으면 어디에든 내 이미지를 보여줄 수 있다.

간단하게 웹사이트 만들어보기

웹사이트는 기본적으로 HTML 이란 마크업 언어로 구성되어있다.

아래처럼 ~ 태그 안에 ~, ~ 라는 2가지 태그를 작성하는게 기본 틀이다.

지금은 정말 간단하게만 HTML파일을 만들어보자.

HTML파일은 메모장으로도 작성 가능하니 메모장을 열자.

일단 아래와 같이 입력하자.

파일을 저장할건데, 기본적으로 *.txt로 되어있는 것을

원하는 파일이름 .html 로 바꾸고 사진처럼 맞춘 후에 저장하자.

저장위치에 가보면 아래처럼 웹페이지가 생성된 것을 볼 수 있다.

(지금은 실행시켰을 때 빈화면만 나오는 것이 맞다.)

웹사이트에 배너 이미지 생성하기

일단 head는 메타정보가 들어가는 곳이니 우리가 손대지말자. 개발자들이 열심히 채워넣을 것이다.

우리는 body 안에서만 태그를 작성할 것이다.

메타정보 화면에 보여줄 태그들로 작성

태그는 이미지를 보여줄 수 있는 태그이다.

src 속성에 구글 드라이브에서 변환했던 이미지 링크를 넣어주면되고

width, height 속성으로 이미지의 크기를 잡아주면된다. (width, height를 잡지 않으면 원본 크기만큼 출력된다.)

속성 값은 ” ” 로 묶어서 작성한다.

위에처럼 작성한 코드를 저장하고 다시 파일을 열어보면, 이미지가 표시되는 것을 확인할 수 있다.

배너 이미지에 링크 걸기

링크를 만들 때는 ~ 태그를 사용한다.

href 속성에 이동할 링크를 작성해주면된다.

지금은 이미지에 링크를 만들 것이니, 위에서 만든 태그를 ~ 로 감싸주면된다.

저장하고 다시 HTML파일을 열어보자

이전과 다르게 이미지 태그위에 마우스를 올려보면 마우스 모양이 바뀌면서 클릭 가능해진 것을 확인할 수 있다.

클릭하면 네이버로 이동하게된다!

간단하게 HTML을 작성해보고, 이미지를 띄우고, 링크를 걸어봤다.

여기서 중요한건 , 태그이니 HTML파일의 구조는 ‘아~ 그렇구나’ 하고 참고만하자.

728×90

반응형

구글 드라이브를 블로그 이미지 서버로 활용하기

차례

개요

티스토리에서 이미지를 삽입하는 것은 사실 그리 어려운 일이 아니다.

그런 의미에서 본 글의 제목처럼 외부 클라우드인 구글 드라이브를 굳이 이미지 서버로 활용해서 외부 이미지를 사용할 필요가 있을까 하는 의문이 들 수도 있을 것이다.

사실 필자도 그동안 외부 이미지 서버에 대한 필요성을 느끼지 못했었다. 그런데 어떤 게시글을 쓰면서 문제에 봉착하게 되었고 그것을 해결하는 과정에서 이 기능이 필요할 경우가 있음을 알게 되었다.

그것은 바로 아래와 같은 이유였다.

“티스토리에서 통계 관련 글을 쓰는데 그 글에 삽입되는 이미지가 매일 변하는 통계 데이터에 따라 달라진다. 따라서 매일 이미지를 새로 만들어서 파일로 만들고 이를 티스토리에 로그인해서 글 수정을 열고 그림을 찾아 대체한 후에 저장해야 하는 많은 귀찮은 과정들이 필요하다

이러한 행위를 3-4회 정도라면 귀찮더라도 해보겠는데 1개월 이상 지속된다면 대단한 끈기가 없으면 할 수 없어서 무언가 자동으로 티스토리 글의 그림을 바꿔주는 일종의 매크로 같은 기능이 필요하다”

이미지 삽입 방법의 종류

티스토리 글에 이미지를 삽입하는 방법에는 아래와 같이 3가지 종류가 있다.

티스토리의 이미지 첨부하기 기능 이용

티스토리의 이미지첨부 메뉴로 이미지 선택 후 삽입하는 방법이다

티스토리 글에 이미지를 삽입하는 가장 쉬운 방법이다.

자동중앙배치나 자동크기조정이 되는 등 티스토리에 유용한 기능이 있다

이미지 크기제한 또는 용량제한 등으로 때에 따라 제약이나 불편함을 감수해야 한다

아래 카카오톡 로고는 이미지 첨부메뉴로 삽입한 것이다

타 웹사이트의 이미지를 링크하여 삽입하는 방법

HTML의 태그를 이용해서 인터넷의 이미지를 티스토리에 삽입하는 방법이다.

외부이미지를 링크하는 방식이므로 크기나 용량의 제한이 없다

움짤같은 움직이는 Animated gif파일도 삽입할 수 있다.

HTML이라는 태그언어를 사용할 줄 알아야 하며, 티스토리 에디터에서 HTML 화면을 열고 태그를 작성해야 하는 등 다소 불편한 점이 있다.

아래는 rc=’ https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Kakao_logo.jpg/100px-Kakao_logo.jpg’ width=25%> 표시 이미지

클라우드 (예: 구글 드라이브) 이미지를 링크하여 삽입하는 방법

구글 드라이브와 같은 클라우드에 이미지를 등록해두고 이미지 하나 또는 여러개의 이미지를 주소를 링크하여 티스토리에 삽입하는 방법이다

해당 클라우드 용량 범위내에서 이미지 크기나 용량, 이미지 수에 관계없이 티스토리에 연결할 수 있다.

클라우드에 수정된 이미지를 등록하면 티스토리 글에 이미지가 자동으로 변경된다

다량의 이미지를 분류별로 폴더를 만들어서 저장한 후에 글에 사용할 수 있다.

구글 드라이브 이미지를 티스토리 에디터에서 링크하는 방법

일단 이 글을 읽는 분들은 최소한 HTML 기본 태그 정도는 알고 있고, 구글 드라이브에 파일을 업로드하고 다운로드하는 등의 방법은 알고 있다고 전제하고 글을 작성하고자 한다. 아주 기초적인 부분까지 설명하기에는 글이 너무 장황해질 수 있기 때문이다.

구글 드라이브에 업로드한 이미지의 링크 주소를 알아보자

구글 드라이브에 이미지 파일을 업로드하고 확인해보자. 아래 이미지는 필자의 구글 드라이브이며, 몇 개의 이미지파일이 올려져 있다. 사실 이 파일들은 Python이라는 프로그램으로 만들어진 이미지들이다.

티스토리에 올리고자하는 이미지 파일에 마우스를 올리고 오른쪽 버튼을 클릭하면 아래와 같은 팝업창이 뜨면서 ‘공유 가능한 링크 가져오기’라는 메뉴를 볼 수 있다. 클릭한다.

오른쪽 마우스를 클릭한 후에 아래와 같은 창이 뜨면서 해당 이미지 파일이 외부에서 볼 수 있는 준비가 완료되었고 또한 이미지의 링크 주소가 버퍼에 저장이 되어있다. 아래 그림의 빨간 줄 그은 부분이 링크 주소이다

정확한 링크 주소는 “https://drive.google.com/open?id=1UBBbumVhuSq8IB4EElpI-UjUVWS-FemE”이며, 이 주소를 티스토리 에디터에 HMTL