[블로스 커스텀] 티스토리 hello 스킨 이미지 본문 폭 안에 맞추는 방법

이미지가 본문 폭을 벗어나는 문제

 

 
티스토리에서 hello 스킨을 적용해서 잘 쓰고 있는데, 이 스킨은 이미지가 본문 폭을 벗어났을 때 줄여주는 기능은 탑재하고 있지 않다. 
그래서 블로그 스킨편집 창에서 손을 좀 봐 주어야 겠다고 생각했다.
 
일단 티스토리에서 width가 860보다 더 큰 이미지는 에디터에서는 무조건 860으로 보이게 해 놓은 거 같은데...
글을 발행하면 최대크기가 1100으로 되어 있는지 1100까지도 나온다
 

---

1. 본문 쪽 맞춤 기능

우선 스킨편집에서 html/css를 수정하지 않아도 본문 폭 맞춤 기능을 사용하면 이미지가 줄여지기는 한다. 

 
하지만 에디터로 글을 작성할 때 이미지 크기랑 실제로 글을 발행하고 나서 보여지는 크기가 다르기 때문에 글 작성중에는 실제로 이미지 크기가 어느 정도로 나올지 예측 할 수가 없다. 그래서 글 발행 후 계속 수정 버튼을 눌러 발행된 글과 에디터를 왔다 갔다 하면서 손을 봐줘야 하는 번거로움이 있다. 
 
그렇다고 올리는 모든 이미지마다 본문 폭 맞춤을 하면 처음부터 작은 이미지는 강제로 본문 폭에 맞추어 확대가 되기 때문에 화질구지..가 된다.
 

---

2. 이미지 크기조정

그래서 내가 쓰는 방법은 이미지 크기조정 버튼을 클릭 해 보는 것이다. 현재 860 사이즈로 뜨는데 이것을 650 이하로 줄이면 된다. 
일단 내 경험칙상 witdh 가 650이 넘어가면 이미지가 무조건 본문 폭을 벗어난다.

(hello 스킨 기본값 기준)
 
650이 본문보다 약간 작으면서 양쪽에 20px정도 여백을 남겨 주기 때문에 650이 넘는 것들은 그냥 650 을 입력해 주면 된다.

이것은 티스토리 hello 스킨 기본값 기준이고
본문폭이 더 넓게 설정해놓으신 분은 700이든 800이든 취향껏 수정하시면 된다

---

 

3. 스킨 편집에서 CSS수정(비추천)

혹시 블로그 스킨에서 CSS 편집하면  
이미지가 저절로 폭에 맞춰지는지 1시간째 구글링 해 보는중...

티스토리 블로그도 워낙 오래되서 중간에 리뉴얼이 많이 된 거라 비교적 최신 블로그들에서 해당문제를 어떻게 해결하고 있는지 찾아보았다.

결론적으로 말하면 스킨편집창에서 CSS를 수정해도 결국 본문 폭을 벗어나는 이미지는 에디터에서 이미지마다 본문 쪽 맞춤을 개별적으로 설정해 주어야 하는 거라서 고치는 의미가 없다.
 
 
블로그 관리 > 스킨편집 > html 편집 > CSS 창에 max-width 라고 검색

 
 
기존 코드에 아래 코드 추가

width-max: 100% !important;
margin-left: auto !important;
margin-right: auto !important

 
이렇게 해주고도 글을 발행할 때 이미지를 가운데정렬이 아닌 본문 폭 맞춤으로 발행해 주어야 한다. 

 

무튼 내생각에 예전부터 이런문제로 골머리를 앓다가
티스토리에서 해결책으로 내놓은게

본문폭맞춤이랑 이미지 크기조정 이니 이 두개를 쓰는 방법 밖에는 없다 ㅋㅋㅋ

이미지 크기조절 눌러서 이미지가 650 넘어가는 것들은 다 본문 폭맞춤으로 하나 하나 바꿔주든지 크기변경 버튼을 눌러서 크기가 650보다 큰 경우 650으로 수동으로 설정하든지 중에 하나다.

결국 이런 식이면 CSS를 수정 해 주는 의미는 없다