티스토리 북클럽 스킨 제목 높이 수정,변경해서 줄이는 방법

 

 

이전 포스팅 참고:

▶ 티스토리 북클럽 스킨 제목의 배경 이미지 자동으로 나오는 것 수정하기

 

 

 

 

목차

 

티스토리 북클럽 스킨 제목 높이 수정, 줄이는 방법

 

 

 

티스토리 북클럽 스킨 수정 : 제목 높이 줄이기

 

일단 제목 배경 사진을 빼고 나면, 이렇게 보입니다.

 

 

깔끔해보이기는 한데, 사진이 사라지니 높이가 너무 높아집니다. 그래서 이번에는 제목 배경의 높이를 줄여보도록 하겠습니다.

 

스킨편집에서 CSS 탭에서 post-cover 라고 찾아보면 7번째에 나오는 것 중에서 바로 height : 340px 입니다. 

 

 

height : 200px 정도로 줄여주세요.  나중에 본문과의 여백과 균형을 맞출려면 이정도가 좋더라구요. 결과 한번 보실까요?

 

 

 

티스토리 북클럽 스킨 제목 부분 세로 정렬 맞추기

 

높이도 적당하고 좋은데, 이번에는 상단 여백이 너무 적어서, 너무 붙은 거 같죠? 요것도 수정해보도록 하겠습니다.

 

이제는 9번째 post-cover .inner  스타일 부분에 속성 하나를 추가합니다. 바로

 

post-cover .inner  스타일에 padding-bottom  항목을  아예 없애주시구요. 저는 테스트삼아 30px로 수정했는데 그것보다는 세로정렬인  vertical-align 항목을 bottom 에서 middle로 수정하는게 더 좋더라구요.

 

결과소스

.post-cover .inner {   display: table-cell;   position: relative;   z-index: 10;   vertical-align: middle; }

 

 

결과 화면 보실래요?

 

 

제목 배경의 높이 수정하고 세로정렬도 중앙으로 맞췄더니 거이 딱 맞는데요.

 

 

티스토리 북클럽 스킨 제목 부분과 본문 여백  줄이기 변경 방법

 

이번에는 본문과의 여백부분이 너무 넓죠? ㅠ.ㅠ 요걸 마지막으로 수정하시면 됩니다.

 

거의 다 왔습니다. 마지막입니다.

 

이제는 tt-를 찾아서 7번째 항목을 수정하면 되는데요. 

  

변경전

#tt-body-page #container {   padding-top: 339px; }

변경후

#tt-body-page #container {   padding-top: 200px; }

 

 

현재값 padding-top : 339 픽셀이 되어있는데요.

 

 

padding-top:339px 를 200px 로 수정해보세요.

 

 

결과는요?

 

 

 

 

여기까지 티스토리 북클럽 스킨 포스팅 제목 높이 수정 하고, 세로 정렬도 중앙으로 맞추고 본문과의 여백까지 수정해보는 포스팅을 마칩니다. 그리 많은 분량이 아닌데, 캡쳐하고 소스 수정하고 상당히 까다롭긴 했네요.

 

추가로 저 배경색까지 바꿔주는 포스팅까지도 올라올 예정인데요. 이 부분은 여러분들의 선택입니다. 사실 이까지만 해도 초보들에게는 쉽지 않았을 겁니다. 고생하셨습니다. 오늘 예제는 티스토리 북클럽 스킨 제목 수정이었습니다.