티스토리 소제목 꾸미다가 푸터가 날아간 날
티스토리에 와인 블로그를 하나 새로 열었어요. 글을 쓰기 전에 모양부터 잡아두고 싶었어요. 특히 소제목이요. 티스토리 글쓰기 화면에서 '제목2'를 고르면 글자만 조금 커질 뿐, 본문이랑 별 차이가 없더라고요. 글이 길어지면 어디서 이야기가 바뀌는지 눈에 잘 안 들어왔어요.
그래서 하루 날 잡고 소제목 모양을 바꿨어요. 결론부터 말하면 소제목은 예쁘게 바뀌었는데, 그러다 블로그 맨 아래 넣어둔 링크 세 개가 감쪽같이 사라졌어요. 다시 넣느라 한참 걸렸고요. 저처럼 처음 손대시는 분은 이 순서대로 하시면 덜 헤매실 거예요.
서식을 넣는 방법이 두 가지더라고요
처음엔 다른 블로그에서 소제목 꾸미는 코드를 복사해서, 글 쓸 때마다 붙여넣는 방법을 봤어요. 티스토리 관리 화면에 '서식 관리'라는 메뉴가 있어서, 거기 코드를 저장해 두고 불러오는 방식이에요.
그런데 해보니까 이건 글마다 매번 불러와서 글자를 바꿔 넣어야 하더라고요. 나중에 색을 바꾸고 싶으면 지난 글을 하나하나 다 고쳐야 하고요. 그래서 다른 방법을 골랐어요. 스킨 CSS에 한 번만 넣어두면, 글 쓸 때 '제목2'만 골라도 알아서 모양이 입혀지는 방식이에요.
- 서식 관리: 글마다 서식을 불러와야 하고, 지난 글은 하나씩 고쳐야 해요
- 스킨 CSS: 한 번 넣으면 끝, 색을 바꾸면 지난 글까지 한꺼번에 바뀌어요
CSS는 스킨 편집 안쪽에 숨어 있어요
CSS라는 말만 들어도 머리가 아팠는데, 들어가는 길은 생각보다 단순했어요. 블로그 관리 화면 왼쪽에서 '꾸미기'를 누르고 '스킨 편집'으로 들어가요. 오른쪽 위에 'html 편집' 버튼이 있고, 그걸 누르면 위쪽에 HTML, CSS, 파일업로드 탭이 나와요. 여기서 CSS 탭을 누르면 됩니다.
스킨 편집 → html 편집 → CSS 탭 맨 아래에 소제목 코드를 붙여 넣었어요
CSS 탭을 열면 영어랑 숫자가 수천 줄 나와요. 저는 그걸 보고 덜컥 겁이 났는데, 다른 건 하나도 건드릴 필요 없어요. 맨 아래로 쭉 내려가서 빈 줄에 새 코드를 붙여넣기만 하면 돼요. 아래쪽에 넣은 코드가 위쪽 설정을 덮어쓰기 때문이에요.
제가 넣은 코드는 이거예요
와인 블로그라서 소제목 색을 와인색으로 잡았어요. 제목2는 왼쪽에 진한 줄이 있고 연한 분홍 바탕이 깔리는 모양, 제목3은 글자 밑에 점선이 들어가는 모양이에요.
/* 제목2 - 큰 소제목 */
.tt_article_useless_p_margin h2,
.contents_style h2,
.entry-content h2,
#article-view h2 {
font-size: 1.35em;
font-weight: 700;
color: #4a1528;
background: #faf3f5;
border-left: 6px solid #7b1e3a;
padding: 12px 16px;
margin: 40px 0 20px;
border-radius: 0 6px 6px 0;
line-height: 1.4;
}
/* 제목3 - 작은 소제목 */
.tt_article_useless_p_margin h3,
.contents_style h3,
.entry-content h3,
#article-view h3 {
font-size: 1.15em;
font-weight: 700;
color: #7b1e3a;
border-bottom: 2px dotted #c9a0ab;
padding-bottom: 8px;
margin: 30px 0 15px;
line-height: 1.4;
}
맨 앞에 이름이 네 개씩 붙어 있는 건, 스킨마다 글 본문을 부르는 이름이 달라서예요. 제 스킨(Book Club)은 entry-content라는 이름을 쓰는데, 다른 스킨을 쓰시는 분도 그대로 쓰실 수 있게 흔한 이름을 다 넣어둔 거예요. 색을 바꾸고 싶으면 #7b1e3a 같은 색 번호만 다른 걸로 바꾸시면 돼요.
적용 전. 글쓰기 화면에서는 소제목이 그냥 큰 글씨로만 보여요
미리보기를 누르니 와인색 줄과 점선 소제목이 나왔어요
적용을 누르고 나서 사고가 났어요
코드를 붙여넣고 오른쪽 위 '적용'을 눌렀어요. 여기까진 좋았어요. 그런데 블로그를 열어보니 맨 아래 푸터에 넣어둔 '블로그 소개', '개인정보처리방침', '문의하기' 링크가 싹 사라져 있는 거예요. 애드센스 신청하려면 꼭 있어야 하는 페이지들이라 심장이 덜컥했어요.
알고 보니 제 스킨은 푸터 링크를 코드가 아니라 스킨 편집 화면의 '푸터' 칸에서 따로 넣게 되어 있었어요. 외부링크1 이름, 외부링크1 주소, 이런 식으로 칸이 나눠져 있고요. 그런데 적용을 누른 뒤에 그 칸들이 비어 있더라고요. 왜 지워졌는지는 지금도 정확히는 모르겠어요. 다만 다시 넣는 건 어렵지 않았어요.
다시 살려낸 푸터. 블로그 소개·개인정보처리방침·문의하기 링크가 제자리로 돌아왔어요
- 스킨 편집 화면 오른쪽 설정 칸을 맨 아래까지 내려요
- '푸터' 아래 외부링크 이름과 주소 칸에 페이지 이름과 주소를 넣어요
- 페이지 주소는 블로그주소/pages/페이지이름 모양이에요
- 설정 칸 맨 위 '적용'을 눌러요
한 번 데이고 나니 요령이 생겼어요. 스킨을 고치기 전에, 스킨 편집 화면 오른쪽 설정 칸에 뭐가 들어 있는지 먼저 훑어보는 거예요. 그리고 적용을 누른 다음엔 블로그를 새로 열어서 맨 아래까지 내려 확인해요. 그 뒤로 한 번 더 고칠 일이 있었는데, 그땐 아무것도 안 날아갔어요.
문단 사이가 너무 붙어 보여서 한 줄 더 넣었어요
소제목을 바꾸고 나서 시험 삼아 글을 하나 붙여넣어 봤어요. 저는 글을 마크다운이라는 방식으로 붙여넣는데, 티스토리 글쓰기 화면 오른쪽 위에서 '기본모드'를 '마크다운'으로 바꾸고 붙여넣으면 돼요. 샵(#) 두 개로 시작하는 줄은 제목2, 세 개로 시작하는 줄은 제목3이 돼요.
미리보기를 눌러보니 소제목은 예쁘게 나왔는데, 문단과 문단 사이가 딱 붙어 있었어요. 티스토리가 원래 문단 간격을 거의 없게 해둬서 그렇대요. 기본모드에서 엔터를 칠 때마다 문단이 새로 생기니까 일부러 그렇게 해둔 거라고요. 그래서 CSS 맨 아래에 이 세 줄을 더 넣었어요.
/* 문단 사이 간격 */
.tt_article_useless_p_margin p,
.entry-content p {
margin-bottom: 1.2em !important;
}
다시 미리보기를 눌렀더니 문단 사이가 한 줄쯤 벌어져서 훨씬 읽기 편해졌어요. 이 정도 차이인데도 글이 확 달라 보이더라고요.
발행 안 하고 시험해보는 게 마음 편했어요
처음엔 바뀐 모양을 보려면 글을 하나 올려야 하는 줄 알았어요. 아직 글이 하나도 없는 블로그라, 시험용 글을 올렸다가 지우는 게 영 찜찜했거든요. 그런데 발행만 안 누르면 블로그에는 아무것도 안 올라가더라고요.
그래서 시험용 글을 따로 만들었어요. 제목2 한 줄, 본문 한 줄, 제목3 한 줄, 굵은 글씨 한 줄, 목록 두 줄. 이렇게 짧게 넣고 미리보기만 눌러봤어요. 쓰다가 나가도 임시저장으로만 남고 다른 사람한테는 안 보여요. 확인이 끝나면 임시저장 목록에서 지우면 되고요.
이 방법이 좋았던 게, CSS를 고칠 때마다 같은 시험 글로 미리보기만 다시 누르면 된다는 거예요. 처음 넣은 코드랑 문단 간격 코드를 넣은 뒤를 같은 글로 비교하니까, 뭐가 달라졌는지 한눈에 보였어요. 색을 바꿔보고 싶을 때도 이 글 하나면 충분했어요.
- 소제목 모양은 서식 관리보다 스킨 CSS에 넣는 게 편해요
- CSS는 꾸미기 → 스킨 편집 → html 편집 → CSS 탭 맨 아래에 붙여넣어요
- 적용 전에 스킨 설정 칸(푸터 링크 등)에 뭐가 있는지 먼저 봐두세요
- 적용 후엔 블로그를 열어서 맨 아래까지 확인하세요
- 문단이 붙어 보이면 문단 간격 코드를 한 번 더 넣으면 돼요
저는 이 과정을 AI한테 하나하나 물어보면서 했어요. 코드를 짜는 건 AI가 해줬고, 저는 화면을 보면서 어디가 이상한지 알려주는 역할이었어요. 그래도 푸터가 날아갔을 때 그걸 알아챈 건 저였어요. 결국 마지막에 눈으로 확인하는 건 직접 해야 하더라고요. 소제목 하나 바꿨을 뿐인데, 블로그가 제 것 같은 느낌이 조금 더 들었어요.
이 글은 2026년 10월에 티스토리 Book Club 스킨에서 직접 해본 경험을 적은 거예요. 스킨마다 구조와 설정 칸이 달라서 같은 코드라도 다르게 보일 수 있어요. 스킨 편집 전에는 꾸미기 메뉴의 스킨 변경 화면에서 지금 스킨을 보관함에 저장해 두시는 걸 추천해요.