오디세이스킨 제목과 본문 사이 간격 변경하기

티스토리 오디세이 스킨은 제목과 본문 사이 간격이 있습니다. 저는 너무 간격이 넓은 것 같아서 간격 조절을 했었는데, 다시 간격을 줄여보겠습니다.

 

목차

 

Before: 제목과 본문사이

오디세이 스킨 제목과 본문 사이 간격

▲오디세이 스킨은 제목에 썸네일 배경이 들어가고 사이드바 프로필이 들어가면서 그 사이 간격이 존재합니다. 즉, 글의 본문을 시작하는 부분과 제목 사이의 간격이지요.

 

저는 오디세이 스킨의 제목 배경부분을 검정으로 채웠기 때문에 오히려 제목과 너무 간격이 생겨서 이상하다는 생각이 들었습니다. 그래서 제목과 본문 사이 간격을 1차 조정했습니다. 

 

After: 제목과 본문사이

오디세이 스킨 제목과 본문사이 간격 조정후

 

▲같은 세로길이의 노란색 박스를 사용했습니다. 본문이 조금 위로 당겨진 게 보이시나요? 혹시 눈치채신 분들이 계시다면, 이 간격은 제목과 프로필 사이의 간격도 뜻합니다. 수정 전후 제목과 프로필 사이 세로 간격도 아주 살짝 줄어들었지요. 

 

그럼 오늘 오디세이 스킨의 제목과 본문 사이 간격을 좀 더 줄여보겠습니다. 

 

재수정: 제목과 본문사이

오디세이스킨 제목과 본문사이 간격 2차 수정

▲오디세이 스킨 오리지널과 제가 1차 수정한 부분과 비교할 수 있게 같은 세로 길이의 노란 박스를 살짝 투명하게 만들었습니다. 본문이 많이 올라갔죠? 

 

🔻🔻🔻🔻🔻

오디세이스킨 제목과 본문사이 간격 3차 수정

▲이번에는 10px만 더 늘렸습니다. 10px 차이가 어떤지 느낌이 오시나요? 그럼 이번에는 모바일 화면도 제목과 본문 사이 간격을 변경해보겠습니다. 

 

🔻🔻🔻🔻🔻

수정전 제목과 본문사이 간격 (모바일)

 

🔻🔻🔻🔻🔻

수정후 제목과 본문사이 간격(모바일)

▲모바일은 20px을 줄였는데 간격 차이는 저정도 입니다. 같은 세로 길이의 노란색 박스를 사용했으니 참고해주세요. 그럼 오디세이 스킨 CSS의 어떤 부분을 수정해야 제목과 본문사이 간격을 조정할 수 있을까요?

 

오디세이스킨 CSS 수정방법

1) 오디세이스킨 제목과 본문사이 간격 조정 CSS 변경(PC)

#tt-body-page .main {
    padding-top: 000px;
}

2) 오디세이스킨 제목과 본문사이 간격 조정 CSS 변경(모바일)

@media screen and (max-width: 0000px) {
    #tt-body-page .main {
        padding-top: 000px;
    }
}

 

▲PC와 모바일 모두 바로 저 부분의 padding-top 뒤 숫자를 변경하시면 됩니다. 10px 씩 수정하면서 블로그 스킨이나 이미지, 가독성에 맞추어 조정하시면 됩니다. 

 

오디세이스킨을 사용중이신 분들 중에 배경 이미지를 제거하고 배경 높이도 조절하시는 분들이 많아서, 제목과 본문 사이 간격도 그에 맞추어 수정하실 분들이 계시면 도움되시면 좋겠습니다.

 

간단한 팁이지만, 저는 티스토리 블로그를 운영하기 전에는 html을 아예 모르던 사람이어서 제게는 어려운 팁이었습니다. ㅠㅠ 더군다나 오디세이 스킨은 북클럽스킨에 비해서는 팁을 찾기도 어렵더라고요. 

 

혹시 도움되셨다면 꼭 제 링크도 남겨주세요! 그럼 블로그가 경제적 자유를 주는 날까지 응원하겠습니다!