[블로그 꾸미기] 티스토리 썸네일 비율 깨질 때 해결하는 CSS 팁
📌 썸네일이 찌그러지거나 깨져보이시나요? CSS 몇 줄이면 깔끔하게 해결됩니다! 지금 바로 따라해보세요.
티스토리 블로그를 운영하다 보면, 썸네일 이미지가 본문에선 멀쩡한데 목록에서 깨지거나 늘어나는 경우가 있습니다. 이런 문제는 스킨 구조나 자동 리사이징 설정 때문인 경우가 많은데요. 특히 썸네일의 비율이 고정되지 않거나, 컨테이너를 넘칠 때 이미지가 일그러지게 됩니다. 이번 글에서는 CSS 코드 몇 줄로 썸네일 깨짐 문제를 해결하는 방법을 소개해드릴게요. 정확히 어디에 어떤 코드를 삽입해야 하는지, 실제 적용 예시도 함께 제공하니 끝까지 읽어주세요!
📋 목차
1. 썸네일 깨짐 원인 분석
썸네일이 깨지는 주된 원인은 다음과 같습니다:
- 비율 설정 누락: width와 height를 동시에 설정하지 않아 발생
- object-fit 미사용: 이미지가 강제로 늘어나는 구조
- 컨테이너 overflow 미설정: 부모 요소의 스타일 영향
2. CSS로 해결하는 방법
아래 CSS 코드를 통해 썸네일 깨짐 현상을 방지할 수 있습니다:
.thumbnail img {
width: 100%;
height: auto;
object-fit: cover;
aspect-ratio: 16 / 9;
}
위 코드에서 object-fit: cover는 이미지가 잘리지 않고 비율 유지되도록 도와주며, aspect-ratio를 통해 일관된 가로세로 비율을 유지할 수 있습니다.
3. 티스토리 HTML에 적용하기
1. 티스토리 관리자 → 꾸미기 → HTML 편집으로 이동
2. <style> 태그 안에 위 CSS 코드를 삽입
3. 저장 후 블로그를 새로고침하여 확인
4. 적용 전후 비교
| 구분 | 썸네일 상태 | 비고 |
|---|---|---|
| 적용 전 | 가로로 늘어남 / 세로로 압축 | 비율 고정 없음 |
| 적용 후 | 16:9 고정 비율로 깔끔 | object-fit: cover 적용 |
💡 Bonus Tips 3가지
- 썸네일 외에도 본문 이미지에도 동일한 CSS 활용 가능
- 스킨마다 클래스명이 다를 수 있으니 개발자도구(F12)로 클래스 확인 필수
- 간혹
overflow: hidden을 같이 설정해야 깨짐 방지 가능
🧩 결론 및 마무리
티스토리 썸네일이 깨져 보이는 문제는 단순한 CSS 조정만으로도 충분히 해결할 수 있습니다. 많은 블로거분들이 처음에는 이미지 자체 문제로 오해하지만, 실제로는 레이아웃 설정이 원인이 되는 경우가 많죠. 실제 사용자 A님의 블로그에 적용한 결과, 이미지 가독성과 썸네일 클릭률이 모두 상승했다는 피드백도 있었습니다. 지금 바로 스킨 HTML 편집에서 위 CSS를 적용해보세요! 여러분의 블로그가 더욱 깔끔하고 보기 좋아질 거예요.
💬 여러분은 어떤 방식으로 이미지 비율을 조정하고 계신가요? 댓글로 경험을 공유해주세요!
📩 블로그 꿀팁이 더 궁금하다면 구독하고 최신 글을 받아보세요!
#블로그꾸미기 #티스토리팁 #썸네일CSS #티스토리스킨 #티스토리썸네일문제
Comments
Post a Comment