티스토리 북클럽 스킨 I 본문 상단 타이틀 수정 및 사이드바와 피드 여백 조정 방법

본문 상단 타이틀 및 여백 조정 방법

티스토리는 다른 블로그와의 다르게 HTML 형식으로 스킨의 변환이 가능합니다.

이번에는 가장 기본적으로 가독성을 높이기 위한 본문 타이틀(제목)을 수정하는 방법을 간단히 알아보겠습니다.

 

 

목차

 

 [📌 코드 수정 시 주의사항은 아래 '더보기'를 참고하세요.]

1. 스킨 저장.

스킨을 변경하기 전에 가장 먼저 해야 할 일은 현재 사용 중인 스킨을 백업하는 것입니다. 스킨 변경 후 문제가 발생하면 변경전 스킨으로 돌아가야 하기 때문에 백업이 필요합니다.

스킨을 백업하려면, 블로그 관리자 > 꾸미기 > 스킨 변경을 클릭합니다. 상단에 사용 중인 스킨을 확인할 수 있으며, [보관]을 클릭하면 됩니다.

 

2. [Ctrl] + [F]를 사용할 때.

먼저 코드 탭의 빈 곳을 클릭한 후 [Ctrl] + [F]를 사용하여 검색할 코드를 입력해야 합니다.

 

본문 상단 타이틀 수정하는 방법

먼저 아래에 보이는 4곳을 수정하는 방법을 알아보겠습니다.

---

1. '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > CSS'로 들어갑니다.

---

2. CSS 탭에서 [Ctrl] + [F]를 이용해 post-cover { 를 검색합니다.

post-cover {

3. 변경할 내용은 아래와 같습니다.

• ① 타이틀(배경화면) 높이 조절
   1045번 줄 근처 height: 340px; / 340px 값을 내릴수록 타이틀 높이가 줄어듭니다. (200px 이하 설정이 불가)
• ② 배경 투명도 조절
   1059번 줄 근처 background-color: rgba(0,0,0,0.25); / rgba(0,0,0,0.75); 값을 높게 쓸수록 어둡고, 낮게 쓸수록 밝아집니다.
• ③ 제목 높이 조절
   1066번 줄 padding-bottom: 78px; / 값을 내릴수록 제목이 위치가 낮아집니다.
• ④ 제목 폰트 두께 조절
   1078번 줄 font-weight: 300; / weight: 700; 값을 올릴수록 폰트가 두꺼워집니다.
• 마지막으로 '적용' 버튼을 누릅니다.

728x90

 

피드 및 사이드바 상단 여백

아래의 2곳을 수정하는 CSS 위치입니다.

---

1. CSS 탭에서 [Ctrl] + [F]를 누르고 #content {으로 검색합니다.

#content {

 

2. 변경할 내용은 아래와 같습니다.

• ⑤ #content 영역을 수정하면 커버 상단의 간격이 줄어듭니다.
  339번 줄 근처 padding: 72px 0 60px; 를 padding: 30px 0 60px; 로 수정합니다.
• ⑥ #aside 영역을 수정하면 사이드바 상단의 간격이 줄어듭니다.
  353번 줄 근처 padding: 75px 0 32px; 를 padding: 30px 0 32px; 로 수정합니다.
• 참고로 padding: 30px 0 60px의 의미는 위쪽 간격 30px, 좌/우 간격 0, 아래쪽 간격 60px의 의미입니다.
  간격을 적용해 보시고 원하는 간격으로 30px의 수치를 변경하시면 됩니다.
• 마지막으로 '적용' 버튼을 누릅니다.
• (개인별 차이가 있으니 미리보기를 통해 확인 하면서 적당한 간격으로 조정하세요.)

 

타이틀과 본문 사이의 여백 조정

보통 #content와 #aside를 수정하면 본문까지 여백이 조정되지만 광고가 들어가면 여백이 틀어지는 경우가 있는데 이때 상단 타이틀과 본문 사이의 여백을 따로 수정하는 CSS의 위치입니다.

---

1. CSS 탭에서 [Ctrl] + [F]를 누르고#tt-body-page#container { 을 검색합니다.

#tt-body-page #container {

2. 변경할 내용은 아래와 같습니다.

• 439번 줄 근처 padding-top:339px / 339px 값을 내릴수록 간격이 줄어듭니다.
  PC만 생각하면 200px도 좋지만, 모바일에서는 너무 좁게 되므로 250 정도가 좋습니다.
  
• 마지막으로 '적용' 버튼을 누릅니다.
• (개인별 차이가 있으니 미리보기를 통해 확인 하면서 적당한 간격으로 조정하세요.)

 

마무리

이번에 수정한 값은 나중에 애드센스 광고 등 다른 변경 사항들이 계속해서 쌓여가면 다시 수정이 필요할 수도 있습니다.

이외에도 CSS나 HTML의 코드를 조금씩 변경하면 좀 더 멋진 나만의 블로그를 만들 수 있습니다.

다만 CSS나 HTML의 코드 수정 시/* 스타일 코드 삽입 */또는<!-- HTML -->처럼 주석을 넣어주어 수정한 부분을 표시해 주시기 바랍니다.

 

관련글 바로가기

2025.01.28-티스토리 북클럽 스킨 본문 상단 제목 꾸미기 #1

티스토리 북클럽 스킨 본문 상단 제목 꾸미기 #1

2025.01.28-티스토리 북클럽 스킨 본문 상단 제목의 배경 이미지 삭제 및 배경색 변경 #2

티스토리 북클럽 스킨 본문 상단 제목의 배경 이미지 삭제 및 배경색 변경 #2

2025.01.30-티스토리 북클럽 스킨 본문 상단 제목의 배경에 고정 이미지 적용하기 #3

티스토리 북클럽 스킨 본문 상단 제목의 배경에 고정 이미지 적용하기 #3

"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받습니다"