북클럽 포스트 타이틀바 사이즈 변경

공부한 거 정리하려고 만든 카테고리가 있는데, 타이틀바가 너무 넓어 보였어요. 사진이 없는 포스트가 대다수라면 타이틀바를 줄여주는 게 좋을 것 같아요. 여기에 주어진 수치는 정해진 게 아니니 본인에게 맞는 사이즈로 바꿔보세요.

북클럽 포스트 타이틀바 사이즈 변경

이미지를 중시하시는 분들이라면 넓은 타이틀바를 원하실 수도 있는데요, 저는 기존 타이틀바가 스크롤을 한참 내려야 해서 번거롭더군요. 또 이미지 없는 카테고리가 있다 보니 필요없이 넓어보이기도 했고요. 그래서 폭을 줄여봤습니다. 사이즈를 만지기 전에 기존 모습부터 살펴보고 비교해 보면 좋을 것 같네요. 

 

아직 수정을 하지 않은 처음 모습입니다. 사진이 없으니 타이틀바가 너무 휑하지요? 스킨편집에 들어갑니다. HTML이 본판, 얼굴이라면 CSS는 화장에 해당돼요. 타이틀바의 모습을 꾸며주는 것이기 때문에 CSS 들어가야겠죠. 

 

1046번째 줄(수정 여부에 따라 번호가 다를 수 있어요)에 포스트커버의 높이를 조절해 주는 부분이 있습니다. 기존에 height를 안 만졌다면 340픽셀로 되어 있을 건데요, 이 부분을 원하는 만큼 수정해 줍니다. 옆에 미리 보기 화면이 있으니 새로고침해 봐가면서 가장 원하는 모양에 맞추세요. 

 

이 부분도 함께 손봐줘야 글씨가 가운데로 옵니다. padding-bottom은 아랫부분의 여백을 뜻하므로, 원래 78픽셀로 되어 있는 여백을 그대로 두면 아래부분만 너무 커져요. 타이틀바의 크기를 줄이려면 아랫부분의 여백도 함께 줄여야 합니다. 이 또한 수치에 연연하기보다 느낌적인 느낌에 비중을 두어야겠죠.

 

 

여기까지 수정하고 새로고침을 해서 살펴봅니다. 확실히 아까보다는 타이틀바가 더 간단해졌지요? 그런데 본문과의 사이가 너무 떨어져 있습니다. 타이틀바의 사이즈는 줄였지만 그만큼 본문과의 여백은 커져버렸기 때문입니다. 이제 본문 윗부분 여백을 줄여주어야 겠네요. 

 

439 줄 정도에 이 부분을 찾아보세요. padding-top은 윗부분 여백을 의미합니다. 본문영역에서 윗부분의 여백을 좁혀주기 위해 이 부분을 수정했어요. 원래는 339픽셀로 되어 있습니다. 170으로 했는데, 이것보다 더 좁히거나 넓혀도 상관없습니다. 자기가 원하는 만큼 해주시면 됩니다.

 

어차피 요새는 모바일로 유입이 되기 때문에 크게 신경 안 쓰고 그냥 두시는 분들도 많으신데요, 잠깐의 수고로 타이틀바를 수정해 보았습니다. 어렵지 않으니 한번 해보세요. 수정하시기 전에 HTML과 CSS 부분 따로 저장해놓지 않으셨다면 다른 곳에 저장부터 해 두시고요. 그래야 잘못돼도 싹 밀고 다시 붙여 원복 할 수 있으니까요.