티스토리 소제목 꾸미는 방법 서식 활용하기 (2025 최신ver.)

 

목차

블로그를 운영하며 콘텐츠의 질만큼이나 중요한 것이 바로 가독성입니다. 아무리 좋은 내용을 담고 있어도 독자가 읽기 불편하다면 정보 전달의 효과는 떨어질 수밖에 없습니다.

 

특히, 글의 핵심 내용을 요약하고 흐름을 안내하는 소제목(H 태그)은 블로그의 가독성을 결정짓는 중요한 요소이자, 검색 엔진 최적화(SEO) 측면에서도 간과할 수 없는 부분이죠.

 

 

 

 

1. 소제목의 중요성

1. 시각적 매력 증가
2. 가독성 증가 (체류시간 증가)
3. 정보 파악 및 전달력 증가
4. 내용 요약 및 문맥 파악 효과

 

 

많은 초보 블로거분들이 소제목의 중요성을 미처 알지 못하고 활용하지 않거나, 기본적인 스타일 그대로 두는 경우가 많습니다.

 

하지만 소제목은 단순히 내용을 구분하는 것을 넘어, 시각적인 효과를 더해 독자의 집중도를 높이고 블로그의 전반적인 완성도를 향상시킬 수 있는 강력한 도구예요.

 

밋밋하고 평범한 소제목 스타일이 지겨우셨다면, 이제 여러분의 콘텐츠를 더욱 돋보이게 만들 시간입니다. 이 글에서는 티스토리 소제목 꾸미기 방법을 서식을 통해 만드는 방법을 알려드리겠습니다.

 

우선 제가 쓰고 있는 소제목 디자인을 쓰는 방법을 적용해본 후, 디자인 템플릿 3가지를 알려드릴테니 선택적으로 사용해보세요😉

 

 

 

2. 소제목 스타일 서식 만드는 방법

 

 

 

1. 파일 다운로드 하기

 

스타일1-검은색.txt

0.00MB

 

소제목 디자인이 담긴 HTML 메모장을 다운로드해 줍니다. 

 

 

 

 

 

2. 관리 - 콘텐츠 - 서식 관리

 

 

블로그 관리에 들어갑니다. 그리고 [콘텐츠] - [서식 관리]를 클릭해서 들어갑니다.

 

 

 

3. [서식 쓰기] 클릭하기

 

 

오른쪽 상단에 있는 '서식쓰기✏️' 버튼을 클릭합니다.

 

 

 

 

 

4. 서식 제목을 적기

 

내가 자주 쓸 소제목이기 때문에 어떤 모양의 소제목 디자인인지 적으면 나중에 찾기 쉽습니다. 저는 제목을 '소제목 스타일 (검은색 바&회색바탕 Black) 이라고 적었지만 대충 한눈에 알아보게끔 적어주시면 됩니다.

 

 

 

 

5. 상단 오른쪽 '기본모드' 클릭

 

가장 오른쪽에 있는 '기본모드'를 눌러줍니다.

 

 

 

 

 

 

 

6. HTML 클릭

 

기본 모드 버튼을 누르면 3번째에 있는 HTML을 클릭합니다.

 

 

이런 팝업창이 뜨면 '확인' 버튼을 눌러주시면 됩니다.

 

 

 

이렇게 검은색 화면이 나오면 맞게 잘 따라오신 거에요👍

 

 

 

7. 다운받은 메모장 전체 복사

 

아까 맨 처음에 다운로드했던 메모장을 펼쳐줍니다. 그리고 전체 드래그해서 복사를 해줍니다.

단축키는 [Ctrl + A]를 먼저 누른 후 [Ctrl + C]를 누르면 됩니다.

 

 

 

 

8. 붙여넣기

 

아까 HTML 모드에서 그대로 붙여넣기를 해줍니다.

단축키로 [Ctrl + V] 눌러주시면 됩니다.

 

 

 

그리고 완료 버튼을 누르면 됩니다.

 

 

 

 

 

 

 

9. 서식 확인

 

방금 만든 서식이 완료된 걸 확인할 수 있습니다.

 

 

 

 

 

 

3. 서식 적용하는 방법

 

서식을 만들었으니 이제 실전에서 글쓰기를 할 때 서식을 써봐야겠죠?

글쓰기를 들어가서 글을 먼저 써봅니다.

 

 

원래는 소제목을 넣을 때 이렇게 적을 수밖에 없었습니다.

이 부분에 소제목 서식을 넣는 방법을 알려드릴게요.

 

 

 

 

 

 

1. 원하는 곳에 커서를 두고 점3개 누르기

 

 

소제목을 넣고 싶은 부분에 커서를 두고 오른쪽 상단에 있는 점 3개가 있는 부분을 클릭합니다.
소제목 디자인을 쓸 때마다 사용하는 곳이니 잘 알아두세요!

 

 

 

2.  서식 클릭

 

 

 

두 번째에 있는 '서식'을 클릭합니다.

 

 

아까 만든 서식을 클릭해 줍니다.

 

 

 

 

 

 

3. 완료

 

그럼 아까 만든 소제목 스타일이 등장합니다. 여기서 소제목에 들어갈 문구를 수정하면 됩니다.

 

 

원하는 소제목을 쓰면 5분도 안 돼서 가독성 좋고 예쁜 소제목을 사용할 수 있습니다!

 

 

4. 제목1(h1) 확인하기

 

 

저번에 알려드렸던 '자동 목차' 서식은 가장 처음 부분에 넣으면 됩니다.
자동 목차를 만드는 방법은 아래 버튼을 클릭해 주시면 됩니다.

 

👉 자동 목차 만드는 방법

 

 

 

 

단, 자동 목차에 들어갈 때 제목 1, 제목 2, 제목 3으로 글자 크기가 잘 설정되어 있는지 꼼꼼히 확인하세요!

 

 

 

 

4. 소제목 디자인 템플릿

또 다른 소제목 디자인을 원하시면 HTML 템플릿을 공유해 드릴 예정이니 추후 적용해서 쓰시면 됩니다!