티스토리에 HTML 모드로 작성했을 때, 이미지가 원하는 위치가 아닌 글의 맨 아래에 삽입되는 현상

블로그로

월 100만원?

❗ 문제의 원인

📌 1. 티스토리 에디터의 이미지 업로드 방식 문제

• 티스토리에서는 이미지 파일을 업로드하면,
  이미지를 글의 맨 마지막 블록에 자동 삽입합니다.
• 이는 드래그한 위치가 아닌, 업로드된 순서대로 글 하단에 이미지 <figure> 태그가 삽입되기 때문이에요.

---

📌 2. HTML 코드 위치와 실제 이미지 위치가 다름

• 에디터에서는 이미지가 자동 <figure>로 삽입되고
  HTML에서는 이미지 코드가 글 제일 하단에 생깁니다.
• 따라서 직접 이미지 태그를 원하는 위치에 수동으로 옮기지 않으면 하단에만 보입니다.

티스토리에 HTML 모드로 작성

 

---

✅ 해결 방법

🔧 방법 1: HTML 모드에서 이미지 태그를 원하는 위치로 잘라 붙이기

1. HTML 모드로 전환
2. 글 맨 아래에 삽입된 <figure> 또는 <img src="..." /> 태그를 복사
3. 이미지를 넣고 싶은 위치에 붙여넣기
   (예: <p>, <h2>, <ul> 중간 등)

예시:

<h2>3. 어떤 기능을 더 중요하게 봐야 할까?</h2>
<img src="https://example.com/my-image.png" alt="노트북 비교" style="max-width:100%;" />
<p>배터리, 포트 구성, 키보드 감도 등도 중요한 고려 요소입니다.</p>

---

🔧 방법 2: “이미지 블록”으로 직접 추가하기 (기본모드)

1. 티스토리 “에디터 모드”로 전환 (HTML이 아닌 일반 작성화면)
2. 원하는 위치에서 “+ 블록 → 이미지” 선택
3. 이미지 업로드
4. 그 자리에서 바로 삽입됨 (하단 이동 없음)

단, HTML 모드와 번갈아 사용하면 이미지 위치가 꼬일 수 있으니
이미지 중심 콘텐츠는 비주얼 모드에서 작업한 뒤 HTML을 정리하는 게 좋아요.

---

✨ 꿀팁: 이미지 정렬 & 반응형 스타일 추가

원하는 위치에 넣은 후, 아래처럼 style 속성을 추가하면 깔끔하게 정렬됩니다.

<img src="이미지주소" alt="설명" style="display:block; margin:20px auto; max-width:100%;" />

---

✅ 정리

문제 원인	해결 방법
티스토리 자동 삽입 → 글 끝에 위치함	HTML에서 이미지 태그 복사 → 원하는 곳에 붙여넣기
HTML 코드 위치와 시각적 위치가 다름	비주얼 에디터에서 직접 이미지 블록 추가