[티스토리] 포스팅에 삽입하는 이미지를 글자처럼 취급하기

티스토리 포스팅 이미지 삽입

---

티스토리 블로그 포스팅을 하다 보면 글과 함께 내용을 보다 잘 설명하기 위한 이미지(사진, 그림)를 첨부하게 되는 경우가 많다.

때로는 디테일한 설명을 위해 글과 이미지를 같은 줄에 표현하고 싶은 경우도 있다.

 

예를 들면 다음과 같은 케이스이다.

Windows 설정 바로가기 단축키는  +  입니다.

그러나 티스토리 포스팅 에디터에서 일반적으로 이미지를 붙여 넣으면 이미지가 중간에 한 줄을 차지해버려서 텍스트와 함께 배치할 수 없는 문제가 있다.

 

이런 식으로.

Windows 설정 바로가기 단축키는

+

입니다.

 

한컴 오피스(한글)에 익숙한 사용자라면 이 경우 이미지를 '글자처럼 취급' 옵션을 사용하고 싶을 것이다.

(MS Word에서는 '텍스트 줄 안' 옵션이 있다.)

한컴 오피스(한글)에서의 '글자처럼 취급' 옵션

 

하지만, 티스토리 에디터에는 해당 옵션을 지원하지 않는다.

그럼 티스토리에서 포스팅에 삽입하는 이미지를 '글자처럼 취급' 하는 방법에 대해 알아보자.

728x90

 

티스토리 포스팅 이미지 글자처럼 취급

---

티스토리 포스팅 이미지 글자처럼 취급하는 방법

포스팅에 삽입한 이미지를 글자처럼 취급하여 배치하는 방법은 다음과 같다.

1. 작성 중인 포스트에 이미지를 붙여 넣는다. (Ctrl+V)

2. 삽입된 이미지에 마우스 오른쪽 클릭하여 '이미지 주소 복사'를 클릭한다.

3. 글쓰기 에디터 상단의 '기본 모드'를 클릭하여 'HTML' 모드로 변경한다.

4. <img> 태그를 사용해서 원하는 위치에 이미지를 삽입한다.

<img style="vertical-align: middle;" src="http://복사한 이미지 주소" />

태그의 src 부분은 2번에서 복사한 주소를 붙여 넣으면 된다.

style 부분은 이미지가 세로 방향의 중앙으로 정렬되도록 하는 속성이다.

(기존의[##_Image|...]으로 작성된 이미지 태그는 제거하면 된다.)

 

그러나, 인용 문단 모양(<blockquote>)이 아닌 본문(<p>)에서 <img> 태그로 이미지를 삽입하는 경우

기본모드로 돌아오면 이미지가 줄 바꿈 된 상태로 되돌아가는 문제가 있다.

 

5. <div> 태그를 사용해서 줄 바꿈 상태가 되돌아가지 않도록 수정해준다.

기존의 <p> 태그를 아래의 <div> 태그로 바꿔주자.

<div style="margin: 0px;">내용</div>

태그의 style 부분은 여백(margin)을 제거하는 속성이다.

 

최종 결과물은 다음과 같다.

<div style="margin: 0px;">Windows 설정 바로가기 단축키는 <img style="vertical-align: middle;" src="https://blog.kakaocdn.net/dn/D59UL/btqRAj1BbgT/0HalV00RLsE0drfXyC1SaK/img.png" /> + <img style="vertical-align: middle;" src="https://blog.kakaocdn.net/dn/k7hmU/btqRxZhRS4C/unHnUflKdxkg06ivvyfxg0/img.png" /> 입니다.</div>

Windows 설정 바로가기 단축키는 + 입니다.

 

---

이렇게 티스토리 포스팅에서 삽입한 이미지를 글자처럼 취급하여 다루는 방법에 대해 살펴보았다.

 

이 문제는 티스토리 에디터가 이미지 정렬 방식의 지원에 한계가 있어서 발생하는 것이므로,

추후 티스토리 측에서 기능 개선을 해주면 좋을 것 같다.

 

그전까지는 다소 불편하지만 위의 방법으로 이미지를 텍스트 사이에 배치하면 되겠다.