티스토리 썸네일 정사각형으로 안 될 때 - 원인은 티스토리 스킨 마다 CSS 마진 값이 다르기 때문!

메인 페이지 썸네일을 정사각형으로 고치려고 하니 웹디자인을 10년 했는데도 불구하고 남의 글만 보면서 따라하니까 오히려 더 헷갈려서 뻘짓하다가 스스로 찾아낸 방법입니다. 굉장히 간단하니 잘 보세요.


우선 스킨 편집> HTML 편집을 누르면 나오면 소스 부분 상단의 HTML, CSS 중에 CSS를 엽니다.


1. CSS 소스 수정
CTRL +F 를 눌러서 .thum img를 누르고 엔터는 한 번만 누르세요. 그럼 아마 제일 위에 아래와 비슷한 소스가 뜰 겁니다. 안 나오면 마우스 스크롤이나 스크롤 바 드래그를 이용해서 오른쪽 스크롤 바에 노란색으로 표기된 부분까지 내려주세요.

.post-item .thum img {
width: 200px;
height: 200px;
transform: translateY(-25%);
-webkit-transform: translateY(-25%);
-ms-transform: translateY(-25%);
}

여기서 width와 height값을 원하는 값으로 수정해 주세요. 저는 미리 고쳐놔서 가로와 세로 값이 같지만 여러분은 두 개의 값이 다를 겁니다. 혹은 width: 100%; height: auto; 로 되어 있는 분도 있을 수 있어요. 저는 첨에 200x200으로 했는데 180x180으로 해야 작은 모니터에서 칸이 안 밀려 보이니 참고하세요.

그 다음 스킨 디자인 마다 아래의 마진값 표기가 다른데 어떤 스킨은
margin 0 0 85px 이런식으로 되어 있고 제가 쓰는 스킨은 위와 같이 되어 있으니 마진으로 된 분들은 85px 부분을 0px로 바꿔주세요. 숫자가 85px건 45px건 상관 없습니다. 0px로 바꿔주세요. 참고로 마진 값은 시계 방향으로 위, 오른쪽, 아래, 왼쪽을 나타내기 때문에 85px 부분이 아래 즉 bottom 값입니다.

저 같이 하단에 transform으로 된 분들은
transform: translateY(0%);
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
으로 바꾸거나 앞 뒤로
/* transform: translateY(-25%);
-webkit-transform: translateY(-25%);
-ms-transform: translateY(-25%); */를 붙여서 가려주세요.

이러면 틀은 정사각형으로 바뀌어 지지만 안에 들어간 이미지가 찌그러진 상태로 보입니다.
이미지를 바르게 보이는 방법은 2번에 있습니다.


2. CSS 소스를 수정하였으면 상단의 HTML 소스로 넘어갑니다.

소스입력줄을 나타내는 왼쪽 숫자에서 280~390 사이에

<div class="inner">
<s_article_rep>
<s_index_article_rep>
<div class="post-item">
<a href="/574">
<span class="thum">
<s_article_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C150x180/?fname=https://blog.kakaocdn.net/dn/bYCKRH/btrbqvDc5pE/Ff4gcqTUDnbkzDcdEkTZbK/img.png" alt="">
</s_article_rep_thumbnail>

CTRL + F로 s_index_article_rep 을 검색합니다. 위와 비슷한 소스가 나오면 C150x180 숫자를 C200x200 으로 바꿔주세요. 여러분의 스킨 최초값은 저와 다를 수 있으나 가로 세로 값이 같지 않은 상태일 것입니다. 같게 맞춰주세요.
간혹 C를 R이나 P로 바꿔야 한다는 블로거도 많지만 C는 안 바꿔도 됩니다.

해결 되셨길 바라며~