티스토리를 개설하고 많은 분들이 기본 스킨으로 북클럽 스킨을 적용하시는데요. 북클럽이 전체적인 디자인이 깔끔하면서도 한 눈에 글이 들어오기 때문에 많이 선호합니다.
우리가 글을 올릴 때 보통 썸네일을 설정하곤 합니다. 키워드를 검색한 사람들이 작은 썸네일에 적힌 내용이나 디자인을 보고 글을 선택하기 때문이죠. 하지만 북클럽은 아무 설정도 거치지 않으면 썸네일이 정사각형이 아닐 뿐더러 우리가 정성스럽게 만든 글씨가 잘리기도 합니다.
이 문제점을 고치기 위해 html과 css를 조금 수정할 필요가 있는데요. 티스토리 북클럽 스킨에서 썸네일을 정사각형으로 이미지가 잘리지 않게 나오도록 하는 방법을 알려드리도록 하겠습니다.
먼저 블로그 관리 페이지에 접속하면 왼쪽에 여러 메뉴가 있습니다. 그 중에서 [꾸미기] 탭 중 [스킨 편집]을 클릭합니다.
먼저 html 편집을 하기 전에, 저 같은 경우는 위처럼 전체 글이 내용-이미지의 모양대로 세로로 쭉 나오는 모습을 선호합니다. 일반적인 게시판 형태이기도 해서 많은 사용자들이 익숙하게 보는 글 게재 방식인데요.
북클럽 스킨은 말 그대로 책에 대한 리뷰나 후기 등을 올리는 데에 편의성을 높인 스킨이기 때문에, 위처럼 글이 차례대로 나오는 것이 아니라 가로로 병렬되어 누적되는 모양새를 가지고 있습니다.
정보성 블로그에는 딱히 어울리지 않는 글 배열 방식이죠.
일반적인 정보성 블로그에서 사용하는 세로 배열 방식을 사용하고자 하는 분들은, 저처럼 편집 모드에서 [리스트] 탭을 수정하시면 됩니다.
리스트 타입을 [뉴북]으로 설정하시면 됩니다.
[뉴북]으로 리스트 타입을 적용하고 새로고침을 누르면 위처럼 글이 배열되는 것을 확인할 수 있는데요.
[더보기 방식] 탭은 저처럼 more 버튼으로 보이게끔 [더보기]로 하셔도 되고, 페이지 번호를 누를 수 있게끔 하는 방식으로 하셔도 무방합니다. 그건 중요하지 않습니다.
첫 번째, html 편집
이제 썸네일을 정방형, 정사각형으로 만들기 위한 방법을 알아보겠습니다.
위처럼 스킨 편집 모드 가장 위에는 사진처럼 [html 편집] 버튼이 있을 텐데요. 이 버튼을 클릭하여 html 편집 모드로 들어가겠습니다.
html 편집 모드에 들어갔으면, 일반적인 초보 블로거들이 알아보기 힘든 외계스러운 태그들이 범벅되어 있는 모습을 볼 수 있겠습니다.
당황하지 마시고, 다른 것은 건들지 마시고 html 편집 창을 한 번 클릭한 후 [ctrl+f], 맥북의 경우 [command+f]를 눌러서 찾기 창을 띄워 보세요.
여기서 우리는 찾기 창에다가 <s_article_rep_thumbnail>을 입력하면 됩니다, 괄호까지 전부 그대로 적어 주세요.
<s_article_rep_thumbnail>
그러면 위의 사진처럼 똑같은 키워드가 2개 검색될 것입니다. 그 중에 407번에 적힌 <s_article_rep_thumbnail>을 주목하겠습니다. 보통 별다른 스킨 편집을 거치지 않은 경우에는 저처럼 400번대 초반에 위치해 있을 거예요.
<s_article_rep_rep_thumnail>을 검색하면 407번, 421번 두 개가 나왔듯이 여러분들도 2개가 중복 검색될 텐데요. 이때 헷갈리지 마시고, 단독으로 쓰여있고 그 바로 밑줄에 <img src="~>로 시작하는 게 있는 곳을 건드시면 돼요.
수정을 거치기 전이라면 여러분들은 //i1.daumcdn.net/thum/C230x300/?fname=~ 이렇게 적혀있을 것입니다.
여기 적혀있는 C230x300을 C250x250으로 수정하시면 됩니다.
C230x300 > C250x250
두 번째, css 편집
위를 따라서 html 편집을 끝냈으면 다음으로 [html] 탭 옆에 있는 [css] 탭에 들어가 수정을 한 번 더 하셔야 합니다.
css 탭에서 해야 할 것은 먼저 아까와 똑같이 css 편집 창을 한 번 클릭하여 커서를 활성화시킨 후 [ctrl+f], 맥북의 경우 [command+f]를 눌러 찾기 창을 열어줍니다.
찾기 창에 여러분들은 post-item을 검색하시면 됩니다.
post-item
그럼 저 같은 경우에는 1147번부터 post-item 관련 css가 나오는데요. 여러분들도 스킨 편집을 크게 안 한 상태라면 저처럼 1147번 언저리에 나올 것입니다.
여기서 바꿔야 할 부분은
padding-bottom: 60.8695~%; 이 부분을 먼저 손볼 건데요. 여기서 60.~~이라 적혀있는 숫자(소수 전부)를 100으로 바꾸어 줍니다.
padding-bottom: 60.8695~%; > padding-bottom: 100%;
즉, 이렇게 수정이 되겠죠.
이렇게 1154번 줄에 있는 padding-bottom: 60.8695~%; 이 부분이 100%로 수정했습니다.
그 다음 수정할 부분은 1157번 줄부터 시작하는 post-item .thum img 파트인데요.
즉, 썸네일 이미지의 비율을 설정하는 부분입니다.
여기서 1158번 줄에 width: 100%;을 수정하는데요, 100%를 inherit으로 수정하면 됩니다.
width: 100%; > width: inherit;
여기까지 되었으면 css 한 줄만 추가로 적어주면 진짜 끝입니다.
방금 width 부분을 inherit으로 수정을 했다면, 그 밑으로 4줄이 더 있고 } 괄호를 통해 마무리가 되는 모습을 볼 수 있습니다.
우리가 마지막으로 할 것은 } 괄호 전에 한 문장을 추가해 주는 것입니다.
.post-item .thum img {
width: inherit;
height: auto;
transform: translateY(-25%);
-webkit-transform: translateY(-25%);
-ms-transform: translateY(-25%);
-webkit-transform: translateX(0%);
}
위에 빨갛게 써둔 한 문장을 } 대괄호 윗줄에 추가해 주시면 됩니다. 중요한 점은 대괄호 바깥에다가 쓰면 안 된다는 점이에요.
-webkit-transform: translateX(0%);
여기까지 하고 [적용]을 눌러 저장하시면 블로그 메인의 썸네일들이 정사각형으로 잘 배열되는 것을 확인할 수 있습니다.
여기까지 잘 적용이 되었다면 앞으로는 썸네일이 정사각형, 정방형으로 글씨가 잘리지 않게 잘 나오는 걸 확인할 수 있을 것입니다.
함께 보면 도움되는 글
운동화 세탁 방법 추천 및 정리 (집에서 운동화 빨래 쉽게 하는 법, 운동화 빨래 후기, 흰 운동화
평소 속옷이나 자주 입는 옷들은 누구나 대수롭지 않게 집에 있는 세탁기를 통해 빨래를 돌리곤 합니다. 하지만 운동화, 신발을 세탁하는 걸 일상적으로 하는 분들은 적을 것으로 생각이 되는데
happyit.happyhealth.kr
2023학년도 정시 정원 미달 대학교 (지방대, 국립대, 수도권 대학 등)
2023학년도 정시 모집 기준으로 모든 대학 모든 학과를 조사하였으며, 총 모집 인원 대비 미달 인원의 비율로 내용을 정리하였습니다. 2022학년도에 비해 2023학년도의 미달 대학 증가세가 아주 급
happyit.happyhealth.kr
댓글