[#티스토리] 스킨 살짝 손보기 - 썸네일 모양, 크기 바꾸기

 

 

 

티스토리 블로그를 운영하다보면 썸네일 크기나 모양이 마음에 안들 수 있다. 그렇다고 처음부터 스킨을 만드는건 배보다 배꼽이 더 큰격이니 간단하게 현재 스킨에서 썸네일 크기, 모양을 바꾸는 법에 대해서 알아보자

 

 

1. 크롬 개발자 도구 켜서 원하는 영역의 위치 알아내기

1-1. 크롬 설정 메뉴에서 도구 더보기 - 개발자 도구를 킨다. 

 

 

 

1-2. 오른쪽에 개발자 도구 창이 뜨는데 바로 아래 그림처럼 생긴 왼쪽 위 아이콘을 눌러

원하는 영역에 마우스를 갖다대면 div.클래스명 또는 div#아이디 와 같은 형식이 표시된다. 

 

여기서 이미지 주소 형식을 잘 보면 C126x166 가 보인다. 이게 바로 이미지 사이즈이다. 이 값을 조절해서 가로가 긴 사각형 or 정사각형 or 세로가 긴 사각형을 자유자재로 만들 수 있다.

//i1.daumcdn.net/thumb/C126x166/?fname=https://k.kakaocdn.net/dn/BYL8Q/btqCYGjscAR/S807QKr4j3I9KeqJReAQZk/img.png

 

[!] 꿀팁

개발자 모드에서 영역 선택 후, 오른쪽의 elements에서 직접 소스를 변경하면 실시간으로 변경되는 모습을 시뮬레이션할 수 있다. (ex: C126x166을 C300x300으로 바꿔본다던지, 이미지를 삭제해본다던지..) 여기서 이리저리 바꿔보고 마음에 드는 내용으로 변경하면 된다. 참고로 여기서 아무리 변경해도 새로고침하면 다시 원복된다.

 

 

2. 꾸미기 - 스킨 편집 - html 편집 창에서 변경해주기

블로그 관리 페이지의 왼쪽 탭 메뉴의 꾸미기 - 스킨 편집을 눌러 스킨 편집창을 띄우고, html 편집을 눌러 html 편집창을 띄워보자.

 

1. 에서 찾은 위치는 <article id="content"> 아래에 있는 이미지 영역이었으니, ALT + F로 해당 위치를 찾아보자. 그리고 쭉 내려가면서 //i1.daumcdn/net/thumb/C원하는가로x원하는세로 값으로 변경하고 적용을 누르면 반영된다. 적용 후 브라우저에서 새로고침을 해야 제대로 보이니 새 창을 띄워서 새로고침을 누르면서 확인해줘야한다.

 

 

기존에 세로로 길었던 썸네일이 정사각형 모양으로 잘 적용된 것을 확인할 수 있다.

 

 

3. 응용하기

조금 더 응용하면 썸네일의 위치를 바꿔보거나 썸네일에 걸린 CSS 클래스를 찾아 수정해주는 방식으로 자유롭게 수정을 할 수 있다.