티스토리 북클럽 스킨 변경_썸네일 크기 정사각형으로 적용하는 방법은?

 

 

 

북클럽 스킨을 변경하는 이유

 

티스토리 북클럽 스킨을 적용하게 되면 글의 썸네일이 세로로 긴 직사각형으로 적용되면서 정사각형 모양의 썸네일이 잘리게 됩니다. 이 부분을 정사각형으로 적용할 수 있도록 HTML 코드와 CSS 수정을 통해서 간단하게 변경 방법을 공유하고자 해요. 왜? 보기 좋으라고!!! ^^

 

 

 

HTML 수정

 

1. 스킨 내부 HTML 코드 수정 접근 경로

"블로그 관리 홈 ▶ 꾸미기 ▶  스킨 편집 ▶ html 편집" 순서대로 클릭하시면 편집 화면으로 접근 가능합니다. 편집화면에 모르는 내용들이 적혀있다고 긴장하지 마세요. 저도 모르니까요. ^^ 따라 하다 보면 알게 됩니다.  

2. "CTRL + F"를 눌러서 "s_article_rep_thumbnail"를 찾습니다. 라인번호 449 정도에 위치해 있어요.

 

3. "P300x300"이라고 표현된 부분을 수정하면 되고 정사각형 썸네일을 적용할 것이기 때문에 원하시는 크기를 적으시면 됩니다. 제 블로그는 "P300x300"으로 적용했습니다. 

 

 

4. "P300x300"에서 P는 썸네일 옵션을 의미하고 처음 스킨을 설정하면 C로 옵션이 기본 설정되어 있습니다. 

 

5. 썸네일 옵션으로 4가지가 있고 아래 설명을 참고하시기 바랍니다.

• C (Crop): 이미지를 크롭하여 원하는 크기로 자릅니다. 원본 이미지의 일부가 잘리지만 지정한 크기에 맞게 이미지를 조절합니다. 주로 사진의 중요한 부분을 강조하고자 할 때 사용됩니다.
• P (Pad): 이미지를 지정한 크기에 맞게 늘리거나 줄이면서 비율을 유지합니다. 이미지의 비율을 유지하면서, 배경 색상이나 투명한 영역을 추가하여 원하는 크기에 맞춥니다.
• R (Resize): 이미지를 비율을 유지하면서 정확한 크기로 조절합니다. 원본 이미지의 비율을 유지하며, 지정한 크기에 맞게 이미지를 축소 또는 확대합니다.
• S (Stretch): 이미지를 비율과 무관하게 강제로 지정한 크기에 맞춥니다. 이 경우 원본 이미지의 비율이 왜곡될 수 있습니다. 이 옵션은 일반적으로 이미지가 원하는 크기와 비율을 가지고 있지 않을 때 사용됩니다. 

 

CSS 수정

 

1. CSS 편집 화면에서 "CTRL + F"를 눌러서 ".list-type-thumbnail .post-item .thum img {"를 찾습니다. 대략 2257 라인에 위치합니다. 

 

 

2. "width: 150px;"라고 되어 있는 부분을 수정합니다. 저 같은 경우 126px라고 되어있던 부분을 이미 150px로 수정한 상태이기 때문에 위에 그림처럼 나와 있습니다. 참고하세요. ^^

 

 

"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다"