본문 바로가기

HTML-사진 | 티스토리 사진넣는 방법 3가지

by Learn, Code, Repeat 2020. 9. 7.
반응형

오늘은 블로그에 사진을 첨부하는 방법들을 알아볼겠습니다.

 

아시는분들은 이미 잘 아시겠지만 블로그에는 사진을 첨부할수있는 기능이 있습니다.

티스토리의 경우

티스토리 사진 넣기

이렇게 티스토리에서 제공하는 툴을 사용해서 사진을 첨부할수 있습니다.

정말 편리한 툴이지만 첨부할 사진이 내 컴퓨터에 이미 저장되있어야만 사용할수있는 단점아닌 단점이 있죠.

 

만약 컴퓨터에 사진을 저장안하고 싶으면?

 

두가지 방법이 있습니다.

1. 윈도우에있는 캡쳐도구 사용하기

2. HTML과 사진 URL을 사용하기

 

 

윈도우에있는 캡쳐도구 사용하기

1. 윈도우에서 캡쳐도구를 찾아서 실행시킨다

캡쳐도구 (Snipping Tool)

2. 모드에서 자유형, 사각형, 창, 또는 전체화면 캡쳐를 선택한다

캡쳐모드 선택하기

3. 새로 만들기로 캡쳐하고싶은 화면을 캡쳐한다

캡쳐된 화면

4. 복사버튼을 눌러 캡쳐화면을 복사한뒤 블로그에서 Ctrl + v 를 눌러 붙여넣으면 끝!

캡쳐화면 복사하기

 

이것도 너무 귀찮다. 사진하나 넣는데 뭐 할게 이렇게 많아?

 

HTML과 사진 URL사용하기

일단 사진의 URL이 필요합니다. 사진의 URL이 있으면

1. 블로그 수정화면위에 기본모드를 눌러 HTML으로 변경한다

HTML모드로 바꾸기

2. HTML의 이미지 태그를 사용합니다

HTML 이미지 태그

끝!!

 

여기서 중요!!

<img src="https://cdn.pixabay.com/photo/2016/11/29/11/34/america-1869214__340.jpg" />

<img />
HTML의 이미지 태그 입니다

src=""
이미지 소스(URL)를 넣는곳 입니다

 

팁!!

width=""를 사용해서 넓이를 조절할수 있습니다

height=""를 사용해서 길이를 조절할수 있습니다

<img src="https://cdn.pixabay.com/photo/2016/11/29/11/34/america-1869214__340.jpg" width="450" height="300" />

이렇게하면 넓이 450픽셀, 길이 300픽셀로 이미지 사이즈가 조절됩니다

 

 

단점

HTML을 사용하면 하나의 단점이 있는데요, 바로 이미지 옵션을 사용할수 없다는 점입니다.

티스토리의 기능 또는 캡쳐도구를 사용하면 아래와같이 이미지를 클릭하면 이미지 옵션이 나옵니다

이미지 옵션

이렇게 블로그에 사진을 첨부하는 방법들, 그리고 장점과 단점들을 알아봤습니다.

여러분의 필요에따라 골라서 사용하세요.

댓글