블로그 소제목 꾸미기 총정리 | 정보박스, 버튼, 아코디언, 예쁜 코드 모음

1. 배경색(음영) 넣기

• 소제목이나 중요한 문구에 연한 배경색을 넣어서 구분할 수 있어.

• 블로그 편집기(티스토리, 네이버, 워드프레스 등)에서 '배경색' 기능을 활용하거나, 직접 HTML/CSS를 써서 넣을 수도 있어.

html
<div style="background-color:#f0f0f0; padding:10px; border-radius:8px;">
  소제목 텍스트
</div>

---

2. 버튼처럼 만들기

 

 

• 소제목을 버튼 스타일로 꾸미면 더 눈에 띄어.
• 마찬가지로 블로그 편집기에서 스타일 버튼이나, HTML을 써서 표현 가능.

html
<div style="display:inline-block; background-color:#4CAF50; color:white; padding:10px 20px; border-radius:20px; font-weight:bold;">
  소제목 텍스트
</div>

---

3. 구분선(디바이더) 사용하기

• 소제목 위아래로 선을 추가하면 깔끔하게 구분돼.

html
<hr style="border:0; height:2px; background:#ccc; margin:20px 0;">
<h2>소제목</h2>
<hr style="border:0; height:2px; background:#ccc; margin:20px 0;">

---

4. 기본 정보박스 (연한 파란색 배경)

html
<div style="background-color: #e8f4fd; padding: 15px; border-left: 5px solid #2196F3; border-radius: 8px; margin: 20px 0;">
  <strong>정보:</strong> 이 박스는 중요한 내용을 부드럽게 강조할 때 사용해요.
</div>

결과 미리보기:

정보: 이 박스는 중요한 내용을 부드럽게 강조할 때 사용해요.

---

5. 주의박스 (연한 노란색 배경)

html
<div style="background-color: #fff8e1; padding: 15px; border-left: 5px solid #FFC107; border-radius: 8px; margin: 20px 0;">
  <strong>주의:</strong> 여기는 사용자에게 주의가 필요한 내용을 안내하는 박스입니다.
</div>

결과 미리보기:

주의: 여기는 사용자에게 주의가 필요한 내용을 안내하는 박스입니다.

---

6. 팁박스 (연한 초록색 배경)

html
<div style="background-color: #e8f5e9; padding: 15px; border-left: 5px solid #4CAF50; border-radius: 8px; margin: 20px 0;">
  <strong>팁:</strong> 여기는 추가 팁이나 참고사항을 적는 공간입니다.
</div>

결과 미리보기:

팁: 여기는 추가 팁이나 참고사항을 적는 공간입니다.

 

7. 3줄짜리 소제목 박스 (깔끔+귀여운 버전)

html
<div style="background: #f9f9f9; border: 2px solid #ff7f50; border-radius: 12px; padding: 20px; margin: 20px 0;">
  <h3 style="margin-top: 0; color: #ff7f50;">✨ 소제목 타이틀</h3>
  <p style="margin: 10px 0 0 0; line-height: 1.6; color: #333;">
    여기에 짧고 임팩트 있는 내용을 적어주세요.<br>
    2줄이나 3줄 정도로 요약하면 깔끔하게 보여집니다.<br>
    블로그 포스팅을 더 세련되게 만들 수 있어요!
  </p>
</div>

---

결과 느낌

• 상단에 포인트 컬러 소제목
• 그 아래에 3줄 정도 짧은 설명
• 전체 박스는 둥근 테두리 + 살짝 음영

8. 모던&심플 스타일 소제목 박스 (3줄)

 

 

html
<div style="background: #ffffff; border: 1px solid #dcdcdc; border-radius: 12px; padding: 24px; margin: 24px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
  <h3 style="margin: 0 0 12px 0; font-size: 20px; color: #333; font-weight: 600;">🚀 소제목 타이틀</h3>
  <p style="margin: 0; font-size: 16px; line-height: 1.7; color: #666;">
    여기에 간결하고 핵심적인 내용을 작성하세요.<br>
    2~3줄 정도로 정리하면 읽기 편해요.<br>
    전체 톤은 심플하고 세련된 느낌을 유지합니다.
  </p>
</div>

9. 인스타 감성 소제목 박스 (3줄)

html
<div style="background: #fff6f6; border: 1px solid #ffd6d6; border-radius: 16px; padding: 24px; margin: 24px 0; box-shadow: 0 4px 10px rgba(0,0,0,0.05);">
  <h3 style="margin: 0 0 12px 0; font-size: 22px; color: #ff7e7e; font-weight: 600;">🌸 인스타 감성 타이틀</h3>
  <p style="margin: 0; font-size: 16px; line-height: 1.8; color: #666;">
    여기에는 감성적인 문구나 따뜻한 메시지를 담아주세요.<br>
    부드럽고 여백이 많은 레이아웃이 인스타 무드와 잘 어울려요.<br>
    짧지만 인상 깊게 남길 수 있는 글을 추천해요.
  </p>
</div>

마무리

이렇게 소제목을 다양하게 꾸미면, 블로그 전체 분위기도 훨씬 깔끔하고 전문적으로 보입니다!

여러 스타일을 적절히 조합해서 포스팅에 재미를 더해보세요.

추가 팁!

색감은 블로그 컨셉에 맞게 조정하세요.
너무 많은 스타일을 섞기보다는 2~3가지 톤으로 통일하는 게 더 세련돼요.
심플할수록 고급스럽습니다.