반응형 html4 [티스토리 블로그] 썸네일 다루기 심화편 ③ 커버 썸네일 수정 여기서 다루는 내용은 Book Club 스킨에 한정합니다. 스킨마다 구조가 다르기 때문에 반드시 확인하셔야 합니다. 심화편 ①에서는 각 설정별 구조를 살펴보았고, ②에서는 기본 목록의 썸네일 이미지를 조정하는 법을 살펴보았습니다. 이번에는 관리>스킨편집>홈설정이 커버일 때 커버 아이템별로 썸네일 이미지를 조정하는 방법을 살펴보겠습니다. 심화편 ①에서 찾은 커버 아이템별 HTML 구조는 다음과 같습니다. 섬네일리스트 뉴스레터 커버갤러리1 커버갤러리2 첫 화면 div.cover-thumbnail-1>ul>li>a>figure>img div.cover-thumbnail-2>ul>li>a>figure>img div.cover-thumbnail-3>ul>li>a>figure>img div.cover-thumbna.. 2021. 8. 5. [티스토리 블로그] 썸네일 다루기 심화편 ② 기본 목록 여기서 다루는 내용은 Book Club 스킨에 한정합니다. 스킨마다 구조가 다르기 때문에 반드시 확인하셔야 합니다. 지난번 썸네일 다루기 심화편 ①에서 환경 설정에 따른 스킨의 구조를 살펴보았습니다. 그 내용을 토대로 오늘은 기본 목록 썸네일에 대해 자세히 살펴보도록 하겠습니다. 관리 메뉴 중 스킨편집에서 홈설정이 최신글(목록+내용)인 경우와 블로그의 기본 목록에서의 썸네일은 구조가 동일하다는 것을 알 수 있었습니다. div.post-item>a>span.thum>img 이것이 기본 구조였죠. 썸네일 사이즈를 제어하는 것은 어떤 부분인지 자세히 살펴보겠습니다. CSS 부분을 살펴보면, span.thum 요소는 부모 요소에서 넓이를 제어하고 높이는 0으로 잡아두고 실질 높이는 padding-bottom으로.. 2021. 7. 28. [북클럽 스킨] 썸네일 크기 변경 Book Club 스킨이 기본적인 기능은 다 제공하면서 깔끔해서 많이들 쓰시죠? 저도 Book Club을 사용하고 있습니다. 다만, 첫 페이지에서 썸네일이 위아래로 길쭉한 형태라는 점이 조금 아쉽습니다. 북리뷰를 위한 스킨이어서 이런 디자인을 채택한 것 같습니다. 그래도 아주 간단한 방법으로 썸네일 크기를 조절할 수 있으니 다행인 것 같습니다. 저는 크롬 브라우저를 주로 사용하고 있습니다. 참고하시고요. 첫 페이지의 썸네일 이미지 위에 마우스를 댄 상태로 오른쪽 클릭 -> 검사를 클릭합니다. (또는 단축키 Ctrl + Shift + I ) 구조가 한눈에 보이지요? CSS에서는 크기 지정한 부분이 딱히 보이지 않습니다. 구조는 잘 기억해 둡시다. .cover-thumbnail-2 ul li figure i.. 2021. 7. 15. Book Club 스킨 손보기 - 사진에 라인 입혀 정돈되게 보이기 블로그 디자인 상당히 귀찮은 점이 많죠. 그래서 남이 만들어 놓은 스킨을 편하게 가져다 쓰게 되는 것 같습니다. 저는 Book Club 스킨을 사용하고 있습니다. 군더더기 없이 깔끔하기도 하고 기본적인 기능은 다 되는 기본에 충실한 스킨이란 점이 참 맘에 들어요. 블로그 글 써가면서 디자인 조금씩 바꿔가는 것도 나쁘지 않을 것 같아서 조금씩 손대 보려고 합니다. 사실 남이 만든 걸 바꾸는 건 제 취향에서 상당히 벗어난 일이긴 하지만, 디자인에는 소질도 없으니 부분적으로 바꾸는 것에 만족하기로 했습니다. 오늘의 목표는 글보기를 했을 때 사진이나 그림에 라인을 입히는 것입니다. 이 스킨이 예쁜 사진을 주로 담는다면 참 고급져 보이고 좋겠지만, 애석하게도 저는 업로드하는 이미지는 캡쳐가 주다 보니 아무래도 산.. 2021. 7. 10. 이전 1 다음
