티스토리 반응형 스킨 #2 이미지 쏠림 현상 해결 및 가운데 정렬하는 법

내 티스토리 스킨은 야금야금 조금씩 바뀌어나가고 있다. 정말 야금야금. 조금씩조금씩.

그런데 어느 순간 문제가 생겼다.

이미지의 너비가 들쑥날쑥 이상하다.

 

이렇게

위의 이미지도, 아래의 이미지도 분명 같은 너비다. 혹시나 내가 업로드를 잘못했나 싶어서 다시 확인을 해봐도 두 이미지의 너비는 같다.

대체 이게 뭔일이다냐 ...

심지어 늘어놓은 이미지들의 사이즈가 들쑥날쑥한 것만이 문제가 아니었다.

어떤 포스팅에서는 이미지가 오른쪽으로 치우쳤다.

이렇게...

뭐야, 진짜 뭔데. (속 터짐)

검색해도 딱히 잘 나오지 않는다. 구글신은 아마 문제가 없을테니 티스토리의 이용자수가 조금 슬픈게 아닐까 싶다.

그래도 이 지랄 저 지랄 하다가 약간 가닥을 잡았다.

문제는 가닥만 잡았을 뿐, 새로고침만 하면 이미지가 삐옹삐옹 커지고 옆으로 튀어나오고. 어휴. 어쩌다 찾은 방법 하나는 블로그 전체를 쪼그라뜨리는 어마어마한 놈이었고...

그래도 다행히 방법을 찾았다.

언제나처럼 스킨 편집 - html 편집 - css 탭으로 들어가자.

아래 코드는 복사해서 css탭 맨 하단에 붙여넣길. 요런 종류는 맨 아래에 정리해두는 게 깔끔하게 보기 좋은 듯 싶다.

/* 사진 사이즈 및 정렬 조정 */

#tt-body-page figure.imageblock img, figure.imageblock img {
max-width: 95% !important;
display: block;
margin: 0 auto;
}

저기 밑줄 친 display: block; 가 제일 핵심이다.

얘가 없으면 말짱 도루묵이다. 이곳 저곳에서 margin: 0 auto; 가 중요하다고 하지만 쟤 하나로는 정말 아무것도 안 된다. text-align:center;랑 같이 붙여놔도 이미지들이 하나도 말을 안 듣는다.

max-width: 95% !important; 이쪽 부분은 이미지의 너비 사이즈를 강제해주는 부분인데, 95%를 100%로 해줘도 좋고, 더 줄여도 좋고. 마음대로 하길.

여하튼 저 코드를 넣으면 이제 이미지가 이렇게 -

짜잔!

크으 - 속 시원하다아아아ㅏㅏㅏㅏㅏㅏㅏㅏ

저렇게 늘어놓은 이미지들 뿐만 아니라 뜬금없이 지 혼자 오른쪽으로 치우치던 이미지들도 제자리를 찾았다. 사진 첨부는 귀찮으니까 패스!

깔끔한 정렬은 언제나 옳다! 캬!