티스토리 블로그 소제목 예쁘게 넣는 법 (서식 + HTML 예시 20종)

오늘은 티스토리 블로그에서 예쁜 소제목을 넣는 방법을 소개해드릴게요.
단순히 제목 1, 제목2에 색상 변경 정도도 좋지만, 디자인을 살짝 입혀주면 글의 가독성은 물론 퀄리티까지 확 올라갑니다.

 

 

✅ 티스토리 ‘서식’ 기능 활용법

티스토리에는 글 쓰기 화면에서 ‘서식’ 기능을 제공하고 있습니다.
자주 쓰는 HTML 블록을 저장해두면, 글 쓸 때마다 버튼 한 번으로 소제목 디자인을 불러올 수 있어요.

1. 서식 저장하는 방법

1. 새 글쓰기 또는 기존 글 편집으로 진입합니다.
2. 에디터에서 HTML 모드로 전환합니다.
   (우측 상단 메뉴에서 HTML 버튼 클릭)
3. 저장하고 싶은 HTML 코드(소제목 스타일 등)를 입력합니다.
4. 위쪽 메뉴에서 불러오기 → 서식 저장 클릭
5. 이름을 정하고 저장을 누르면 완료!

📝 Tip: 소제목 스타일이라면 이름을 "파란 소제목 박스", "하이라이트 박스"처럼 지정해두면 나중에 찾기 쉬워요.

2. 저장한 서식 불러오는 방법

1. 새 글쓰기 시, 편집기 상단 메뉴에서 불러오기 클릭
2. 서식 탭을 선택합니다.
3. 저장해둔 서식 목록에서 원하는 것을 클릭하면 본문에 삽입돼요.

3. 서식 편집/삭제 방법

1. 글쓰기 화면 상단 → 불러오기 → 서식 탭에서
2. 오른쪽 상단의 편집 아이콘(연필모양) 클릭
3. 기존 서식을 수정하거나 삭제할 수 있어요.

 

 

🎨 예쁜 소제목 디자인 20여종 + HTML 예시

아래는 티스토리에서 바로 사용할 수 있는 예쁜 소제목 디자인 모음입니다.
모두 HTML 코드만 복붙하면 바로 사용 가능하고, 필요시 글꼴, 색상, 굵기, 배경 등을 조정하셔도 좋아요.

 

[라운드 박스형]

가장 베이직한 버전으로 아래 6개는 색상만 다른 버전이지만 귀차니즘을 조금 더 덜어드리고자 다양한 색상으로 구성해봤어요.

원하는 색상이 있으면 background 뒤에 색상코드와, solid 뒤에 색상코드를 변경하시면 됩니다.

💠 소제목 1 : 파랑 라운드 박스

🔹 전문적인 느낌 소제목

<div style="padding: 10px 15px; background: #f0f8ff; border-left: 5px solid #3399ff; border-radius: 6px; font-weight: bold;">🔹 소제목입니다</div>

💠 소제목 2 : 네온 라임 박스

🌿 친환경 느낌 소제목

<div style="padding:10px 15px; background:#e9fce9; border-left:5px solid #4caf50; border-radius:6px; font-weight:bold;">🌿 친환경 느낌 소제목</div>

💠 소제목 3 : 핑크 하이라이트

💗 사랑스러운 소제목

 

<div style="padding:10px 15px; background:#ffeef2; border-left:5px solid #f06292; border-radius:6px; font-weight:bold;">💗 사랑스러운 소제목</div>

💠 소제목 4 : 그레이 박스

🪨 심플한 소제목

<div style="padding:10px 15px; background:#f1f1f1; border-left:5px solid #888; border-radius:6px; font-weight:bold;">🪨 심플한 소제목</div>

💠 소제목 5 : 노란 포스트잇 스타일

📝 노란 메모 느낌

<div style="padding:10px 15px; background:#fff9c4; border-left:5px solid #fbc02d; border-radius:6px; font-weight:bold;">📝 노란 메모 느낌</div>

💠 소제목 6 : 오렌지 에너지

🍊 오렌지 에너지

<div style="padding:10px 15px; background:#fff3e0; border-left:5px solid #fb8c00; border-radius:6px; font-weight:bold;">🍊 오렌지 에너지</div>

 

[라인형]

💠 소제목 7 : 밑줄 강조형

역시 변경을 원하시면 solid 뒤에 색상코드를 변경하시면 됩니다.

색상 선택이 어렵다면 라운드박스형의 solid 뒷부분 색상코드를 참고해보세요~

📌 밑줄 강조 소제목

<div style="font-size: 1.2em; font-weight: bold; border-bottom: 3px solid #3399ff; display: inline-block; padding-bottom: 5px;">📌 밑줄 강조 소제목</div>

 

💠 소제목 8 : 그림자 밑줄 강조

🔮 그림자 밑줄

<div style="font-weight: bold; font-size: 1.1em; padding-bottom: 4px; border-bottom: 3px solid #673ab7; box-shadow: 0 2px 0 #9575cd;">🔮 그림자 밑줄</div>

 

💠 소제목 9 : 상단 라인 강조

📘 상단 라인 강조

<div style="border-top: 4px solid #2196f3; padding-top: 8px; font-weight: bold;">📘 상단 라인 강조</div>

 

💠 소제목 10 : 상단 바 + 아이콘

🧭 상단 바 + 아이콘

<div style="border-top: 5px solid #795548; padding-top: 8px; font-weight: bold; font-size: 1.1em;">🧭 상단 바 + 아이콘</div>

 

[점선형]

💠 소제목 11 : 하늘+보더 강조

☁️ 소제목입니다

<div style="padding:10px 15px; background:#e8f4fd; border:2px dashed #2196f3; border-radius:6px; font-weight:bold;">☁️ 소제목입니다</div>

 

💠 소제목 12 : 점선 테두리

🌿 점선 테두리

<div style="border: 2px dotted #4caf50; padding: 10px 15px; font-weight: bold;">🌿 점선 테두리</div>

 

💠 소제목 13 : 점선 박스

💠 점선 박스

<div style="padding: 10px; border: 2px dashed #009688; font-weight: bold;">💠 점선 박스</div>

 

[바 강조]

💠 소제목 14 : 왼쪽 바 강조

🔥 소제목입니다

<div style="border-left: 8px solid #f44336; padding-left: 10px; font-weight: bold; font-size: 1.1em;">🔥 소제목입니다</div>

 

💠 소제목 15 : 리스트 스타일 소제목

📂 리스트 스타일 소제목

<div style="padding: 10px 15px; background: #fafafa; border-left: 3px solid #616161; font-weight: bold;">📂 리스트 스타일 소제목</div>

 

[박스형]

💠 소제목 16 : 테두리만 있는 박스

🖤 테두리만 있는 소제목

<div style="padding: 10px; border: 2px solid #333; font-weight: bold; background: none;">🖤 테두리만 있는 소제목</div>

 

💠 소제목 17 : 이중 테두리

🔷 이중 테두리

<div style="padding: 10px; border: 3px double #9c27b0; font-weight: bold;">🔷 이중 테두리</div>

 

💠 소제목 18 : 그라디언트 박스

🌈 그라디언트 박스

<div style="padding: 10px; background: linear-gradient(135deg, #ff9a9e, #fad0c4); font-weight: bold; color: #880e4f;">🌈 그라디언트 박스</div>

 

💠 소제목 19 : 그림자 박스

🧱 그림자 소제목

<div style="padding: 10px 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); background: #ffffff; font-weight: bold;">🧱 그림자 소제목</div>

 

💠 소제목 20 : 음영 배경 박스

🕶️ 음영 배경 소제목

<div style="padding: 12px; background: #f1f1f1; font-weight: bold; box-shadow: inset 0 0 5px rgba(0,0,0,0.1);">🕶️ 음영 배경 소제목</div>

 

💠 소제목 21 : 배너 스타일

📢 배너형 소제목

<div style="background: #ffeb3b; color: #000; font-size: 1.2em; padding: 10px; font-weight: bold; text-align: center;">📢 배너형 소제목</div>

 

[기타]

💠 소제목 22 : 캡슐형 (Pill Shape)

💊 캡슐 스타일

<div style="display: inline-block; padding: 8px 20px; background: #e91e63; color: #fff; border-radius: 50px; font-weight: bold;">💊 캡슐 스타일</div>

 

💠 소제목 23 : 중앙 정렬 강조

🎯 중앙 정렬 강조

<div style="text-align: center; font-weight: bold; font-size: 1.2em; color: #4a148c;">🎯 중앙 정렬 강조</div>

 

💠 소제목 24 : 마커 강조 스타일

🖍️ 마커 강조

<div style="display: inline-block; background: #ffff8d; font-weight: bold; padding: 3px 8px;">🖍️ 마커 강조</div>

 

💬 마지막 팁

• 위 코드는 모두 티스토리 서식으로 저장해두고 재사용 가능합니다.
• 색상 코드는 필요에 따라 본인 블로그 톤에 맞게 바꾸면 더 좋아요.
• 모바일에서 잘 보이게 하려면 간결하고 여백 있는 디자인이 좋습니다.

 

소제목이 달라지면 글의 분위기가 확 달라져요.

위 코드들을 복사한 후 티스토리이 html에 붙여넣으시거나, 서식으로 간편하게 만들어 두면,

각 소제목에 맞게 스타일링된 박스를 사용할 수 있습니다.

지금 바로 티스토리에 서식을 등록하고, 나만의 소제목 컬렉션을 만들어보세요! 😊

궁금한 점이나 다른 스타일 요청도 댓글로 알려주세요!

필요한 만큼 수정하거나 추가하여 활용하세요! 감사합니다!

불펌은 사양! 활용은 환영해요~

 

 

#티스토리 #블로그팁 #소제목디자인

#티스토리서식 #블로그소제목 #HTML디자인 #티스토리꾸미기 #소제목디자인 #블로그팁 #티스토리초보 #티스토리꿀팁