[티스토리 블로그] 썸네일 다루기 심화편 ② 기본 목록

[티스토리 블로그] 썸네일 다루기 심화편 ② 기본 목록

 

여기서 다루는 내용은 Book Club 스킨에 한정합니다.
스킨마다 구조가 다르기 때문에 반드시 확인하셔야 합니다.

 

 

지난번 썸네일 다루기 심화편 ①에서 환경 설정에 따른 스킨의 구조를 살펴보았습니다.
그 내용을 토대로 오늘은 기본 목록 썸네일에 대해 자세히 살펴보도록 하겠습니다.

관리 메뉴 중 스킨편집에서 홈설정이 최신글(목록+내용)인 경우와 블로그의 기본 목록에서의 썸네일은 구조가 동일하다는 것을 알 수 있었습니다.

div.post-item>a>span.thum>img

이것이 기본 구조였죠.
썸네일 사이즈를 제어하는 것은 어떤 부분인지 자세히 살펴보겠습니다.

 

div.post-item>a>span.thum

CSS 부분을 살펴보면, span.thum 요소는 부모 요소에서 넓이를 제어하고 높이는 0으로 잡아두고 실질 높이는 padding-bottom으로 조절하고 있음을 알 수 있습니다.
overflow:hidden 옵션으로 넘치는 부분은 가려지게 해 둔 것을 알 수 있습니다.

 

 

직접적인 썸네일 이미지 부분

썸네일 이미지에는 사이즈를 조절할 수 있는 옵션은 없습니다.
부모 요소 사이즈에 의존적임을 알 수 있습니다.

transform 옵션을 통해 이미지의 25% 높이에서부터 화면에 보여줍니다.
살펴본 옵션을 통해 이 스킨은 세로로 긴 이미지를 염두하여 만든 스킨임을 알 수 있습니다.

이상을 종합해보면, 기본 목록의 경우 썸네일 이미지 사이즈보다는 CSS 수정을 통해 사이즈를 제어하는 것이 효과적입니다.

 

 

CSS에서 span.thum의 margin-bottom을 90%로 조정하고, img의 transform 옵션을 없앴을 때의 예제입니다.
썸네일의 기본 이미지가 세로로 긴 형태이기 때문에 세부 영역을 보면 위의 스크린샷과 같은 영역을 차지하고 있음을 확인할 수 있습니다.

 

정사각형 썸네일 이미지인 경우

스킨 편집의 HTML에서 링크 이미지 사이즈를 C300x300으로 바꾼 예제입니다.

썸네일 이미지 C300x300인 경우

1:1 비율 썸네일을 활용한 스킨 예제입니다.
padding-bottom을 늘려주고 transform을 -5%로 설정하여 이미지의 위아래 쏠림을 조정합니다.

 

300x300 사이즈 썸네일

위의 예제대로 적용했을 때 화면입니다.
기본으로 두고 이미지 사이즈만 조정했을 때보다 훨씬 보기 좋습니다.

 

 

가로가 긴 형태의 이미지인 경우

스킨 편집의 HTML에서 썸네일 이미지 사이즈를 C400x300으로 조정했을 때의 예제를 들어보겠습니다.

썸네일 이미지 C400x300인 경우

이미지 아래로 연한 회색 공간이 붙어 나오는 것을 확인할 수 있습니다.
이는 span.thum의 padding-bottom 때문입니다.

 

썸네일 이미지 C400x300인 경우

CSS에서 해당 부분의 padding-bottm을 70%로 낮춰주고 transform을 제거했습니다.

 

400x300 사이즈 썸네일

군더더기 없는 썸네일 리스트가 되었습니다.