티스토리 이미지 안 잘리게 넣는 방법 (모바일 최적화 HTML 태그)

티스토리 이미지 안 잘리게 넣는 방법 (모바일 최적화 HTML 태그)

티스토리 블로그를 운영하다 보면
가장 많이 겪는 문제 중 하나가 바로 이미지 잘림 현상입니다.

PC에서는 괜찮아 보여도
모바일에서는 사진이 잘리거나 깨져 보이는 경우가 생각보다 자주 발생합니다.

특히 대표 이미지나 긴 설명 이미지는
화면 비율 때문에 일부가 잘려 보이기도 합니다.

오늘은 티스토리에서 이미지를 올릴 때
모바일에서도 자연스럽게 보이도록 설정하는 방법을
실제 메뉴얼 방식으로 하나씩 정리해보겠습니다.


---

STEP 1. 티스토리 글쓰기 화면 접속

먼저 티스토리 관리자 페이지에 접속합니다.

이후:

콘텐츠 → 글쓰기

순서로 이동합니다.


---

---

STEP 2. 기본모드 → HTML 모드 변경

티스토리는 기본적으로 글쓰기 모드가 설정되어 있습니다.

하지만 이미지 반응형 태그를 적용하려면
HTML 모드로 변경해야 합니다.

상단 메뉴에서:

기본모드 → HTML

로 변경합니다.


---

---

STEP 3. 이미지 업로드 진행

이제 이미지를 먼저 업로드합니다.

상단 사진 버튼을 눌러 원하는 이미지를 첨부합니다.


---

---

STEP 4. 기본 이미지 태그 확인하기

이미지를 업로드하면
티스토리가 자동으로 이미지 태그를 생성합니다.

보통 아래처럼 들어갑니다.

<img src="이미지주소">

하지만 이 상태에서는 모바일 환경에 따라
이미지가 잘릴 수도 있습니다.

그래서 반응형 스타일을 추가해야 합니다.


---

STEP 5. 모바일 최적화 태그 적용하기

아래 코드를 적용하면
모바일에서도 자연스럽게 이미지가 표시됩니다.

<div style="text-align:center;">
<img src="이미지주소"
style="width:100%; max-width:1000px; height:auto;"
alt="티스토리 이미지">
</div>


---

핵심 설정 설명

태그 역할

width:100% 화면 크기에 맞춤
max-width:1000px PC에서 너무 커지지 않음
height:auto 비율 유지
text-align:center 가운데 정렬



---

---

STEP 6. 미리보기로 모바일 화면 확인하기

코드 적용 후에는
반드시 미리보기 기능으로 확인하는 것이 좋습니다.

특히:

✔ 이미지 잘림 여부
✔ 모바일 가독성
✔ 이미지 비율
✔ 정렬 상태

를 꼭 확인해보는 것을 추천합니다.


---

---

STEP 7. 발행하기

설정이 완료되었다면
마지막으로 발행 버튼을 눌러 글을 등록합니다.


---

---

복붙용 추천 태그

아래 코드는 저장해두고 계속 사용하면 편합니다.

<div style="text-align:center;">
<img src="이미지주소"
style="width:100%; max-width:1000px; height:auto;"
alt="티스토리 이미지">
</div>


---

이미지가 잘리는 가장 흔한 이유

보통 아래처럼 이미지 크기를 고정했을 때 발생합니다.

width:1200px;
height:600px;

이렇게 고정값을 사용하면
모바일 화면보다 이미지가 커져 일부가 잘릴 수 있습니다.

그래서:

max-width:100%;
height:auto;

설정을 사용하는 것이 가장 안전합니다.


---

추천 이미지 크기

용도 추천 사이즈

대표 이미지 900~1200px
본문 이미지 800~1000px
썸네일 1:1 비율



---

마무리

처음 티스토리를 운영할 때는
이미지 하나 설정하는 것도 어렵게 느껴질 수 있습니다.

하지만 반응형 태그만 잘 적용해두면
모바일과 PC 모두 자연스럽게 이미지가 표시됩니다.

특히 모바일 방문자가 많은 티스토리에서는
이미지 최적화가 생각보다 중요한 부분입니다.

한 번만 설정 방식을 익혀두면
이후에는 훨씬 편하게 블로그를 운영할 수 있습니다.


---



#티스토리 #티스토리HTML #티스토리이미지 #반응형이미지 #티스토리꾸미기 #티스토리최적화 #블로그꾸미기 #HTML태그 #티스토리모바일 #블로그운영