#2 티스토리 블로그 상단 타이틀(post-cover) 높이 설정하기! (Feat. padding-top)

 

어찌어찌 타이틀 폰트를 바꿨다며 만족하고 글을 작성하고 보니 글 상단의 타이틀이 너무 거슬린다.

(글 상단 타이틀은 post-cover로 지칭. 용어들을 숙지해놓으면 추후 원하는 모양을 구현할 때 검색이 용이할 듯!)

뭔가 대표사진이 이쁘게 배열해서 들어가는 것도 아니고, 쓸데없이 높이가 너무 높아서 메인 글이 너무 내려감.

 

그냥 딱 '티스토리입문'부터 '날짜'까지만 슬림하게 직사각형으로 들어가는 것으로 조정해보기로 했다.

 

나름 열심히 서칭했는데 죄다 썸네일 정사각형 만들기 등의 주제만 검색이 되어서 나름 애를 먹었다며

내가 검색이 더 잘되게 다시 작성해보자...고 작성했지만 이 글 역시 원하는 사람들에게 검색이 잘 될지는 나도 모르겠다.

 

우선 시작!

 

쓸데없이 넓은 post-cover

우선 앞의 글과 동일하게 스킨 편집 → html편집 → CSS로 들어가 아래 1046번행을 찾는다.

타이틀 수정할 때 살펴봤듯, 1041 ~ 1051행은 현재 수정하고 있는 post-cover에 대한 세부 설정을 담고 있음을 알 수 있다.

우선은 아래 이미 설정된 position ~ box-sizing까지는 이래저래 손대면서 바꿔볼 수 있고, 다른 커스텀 스킨들을 봤을 때 추가적인 기능을 삽입하는 것도 가능할 것 같다. 우선은 있는 거라도 제대로 바꿔보는 것으로..

 

 

CSS화면

 

height를 200px로 줄여봤다.

여기서 반토막 더 내도 되겠다 싶어 100px, 150px도 넣어봤는데 변동이 없는걸보니 200px가 최소값인 듯 싶다.

그렇게 post-cover를 높이를 줄여서 올려놓고 나니 본문과 post-cover 사이에 공백이 아래와 같이 엄청나게 늘어났다..;;

 

title이 줄어든 자리에 자리잡은 공백

 

이 부분의 높이는 다시 아래의 padding - top 부분을 수정하여 변경이 가능하다.

현재 339px로 처음 post-cover 높이였던 340px에 육박한다.

 

아예 없애버리고 싶어 0px로 변경했더니 아예 post-cover 뒤까지 올라가서 본문이 안보이는 엉망진창인 페이지가 되었다..

(아니 왜 post-cover는 최소값이 있더니 여긴 또 최소값이 없는거야...)

 

CSS화면

 

0px부터 시작해서 조금씩 올라오다가 150px까지 와서야 내용을 다 볼 수 있게 되었다.

결국 post-cover 200px, padding-top 150px정도로 생각하면 나처럼 최소로 하고 싶은 사람들에게 적절할 것 같다.

 

근데 또 마침 이 글을 적자마자 확인해보니 제목이 길어지면 padding-top 150px인 경우 내용이 사려지는 불상사가..

제목 길이를 한 줄로 맞출 수도 있겠지만, 살짝 길어지는 걸 대비하자면 결국 padding-top도 200px는 되어야 안전할 듯.

 

padding-top 150, 단 제목이 두 줄이 되면 본문을 가린다

 

여기까지 post-cover 및 padding-top까지 설정완료!