728x170

    티스토리 북클럽 스킨을 쓰다보면 헤더의 높이가 너무 커서 본문 글이 눈에 들어오지 않을 때가 많다.

    지나치게 큰 헤더는 글읽기에 방해되니 사이즈를 줄여보도록 하자.

     

    | 티스토리 북클럽 스킨 헤더 높이 수정하기

     

    스킨편집 - html - CSS로 이동하고 하래 코드를 찾는다.

     

    .post-cover {
    	position: relative;
    	z-index: 20;
    	display: table;
    	width: 100%;
    	height: 220px;
    	background-color: #cbcbcb;
    	background-position: 50% 50%;
    	background-size: cover;
    	box-sizing: border-box;
    }

     

    여기서 height: 220px;로 되어있는데 이건 내가 수정한 사이즈라 작다.

    원래 얼마였는지 모르겠는데...

    하여튼 이 부분의 숫자를 수정하면 헤더 높이가 수정된다.

    220이면 이정도 사이즈 된다.

     

    좀 더 줄이고 싶다면 220보다 작은 숫자로 입력하면 된다.

    이걸로 끝이 아니다.

    헤더 사이즈를 줄였으면 그 바로 아래에 시작된 본문 시작위치도 같이 줄어들어야하는데

    헤더 사이즈만 줄이면 본문 시작위치는 그대로 남아있게 되어 여백이 크게 남아있어 보기 싫다.

    그래서 본문 시작위치도 기존보다 줄인 숫자만큼 줄여줘야한다.

     

    | 티스토리 북클럽 스킨 본문 시작위치 수정하기

     

    CSS에서 아래 코드 부분을 찾는다

     

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

     

    padding-top: 199px; 로 되어있는데 여기서 숫자를 헤더 사이즈 줄인만큼 빼면 된다.

    그럼 헤더 사이즈 줄어든만큼 본문 시작위치도 조정되어 깔끔하게 보이게 된다.

     

    | 헤더 제목 수직 중앙정렬 하기

     

    헤더 높이를 줄이고 나니 제목의 수직정렬이 자동이 아니더라.

    이거도 수동으로 조절해줘야한다.

    CSS에서 아래 코드 부분을 찾는다. (헤더 높이 조절하는거 바로 아래에 있다)

     

    .post-cover .inner {
    	display: table-cell;
    	position: relative;
    	z-index: 10;
    	vertical-align: bottom;
    	padding-bottom: 15px;
    }

     

    여기서 padding-bottom: 15px; 부분을 원하는대로 수정하면 된다.

    수치는 개인마다 얼마나 헤더 사이즈를 변경했는지에 따라 다르기 때문에 수치 변경하고 왼쪽편에서 새로고침 하면서 변경을 눈으로 확인하며 바꿔주도록 하자.

     

    도움이 되었다면 공감과 추천👍 꾹 부탁한다

     

    그리드형
    • 네이버 블러그 공유하기
    • 네이버 밴드에 공유하기
    • 페이스북 공유하기
    • 카카오스토리 공유하기

    파트너스 활동으로 수수료가 제공될 수 있음

    댓글을 달아 주세요

    ">