얼리두잉
2025. 10. 18. 12:13
티스토리에서 소제목 디자인은 가독성을 높이는 핵심 요소입니다.
1) 심플 & 라인형 (5종)
1-1. 기본 굵은 소제목(H2)
<h2 style="margin:24px 0 12px; font-size:1.5rem; line-height:1.4; font-weight:800;"> 소제목을 입력하세요 </h2>
1-1. 기본 굵은 소제목(H2)
1-2. 얇은 하단 라인
<h2 style="margin:24px 0 8px; padding-bottom:8px; border-bottom:2px solid #222; font-size:1.3rem; font-weight:700;"> 소제목을 입력하세요 </h2>
1-2. 얇은 하단 라인
1-3. 강조 색상 바(왼쪽)
<h2 style="margin:24px 0 12px; padding-left:10px; border-left:6px solid #2b6cb0; font-size:1.25rem; font-weight:800;"> 소제목을 입력하세요 </h2>
1-3. 강조 색상 바(왼쪽)
1-4. 점선 언더라인
<h2 style="margin:24px 0 8px; padding-bottom:6px; border-bottom:2px dotted #999; font-size:1.2rem; font-weight:700;"> 소제목을 입력하세요 </h2>
1-4. 점선 언더라인
1-5. 미니 캡션(H3)
<h3 style="margin:18px 0 6px; color:#444; font-size:1.05rem; font-weight:700; letter-spacing:0.2px;"> 소제목을 입력하세요 </h3>
1-5. 미니 캡션(H3)
2) 박스 & 카드형 (5종)
2-1. 라운드 박스 헤더
<div style="margin:26px 0 14px; padding:12px 14px; border:1px solid #e5e7eb; border-radius:12px; background:#fafafa; font-weight:800; font-size:1.15rem;"> 소제목을 입력하세요 </div>
2-2. 그림자 카드 헤더
<div style="margin:26px 0 14px; padding:14px 16px; border-radius:14px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.07); font-weight:800; font-size:1.15rem;"> 소제목을 입력하세요 </div>
2-3. 리본 탭(왼쪽 리본)
<div style="position:relative; display:inline-block; margin:24px 0 10px; padding:10px 16px 10px 20px; background:#fef3c7; color:#7c2d12; font-weight:800; border-radius:8px;"> 소제목을 입력하세요 <span style="position:absolute; left:-10px; top:50%; transform:translateY(-50%); width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:10px solid #fef3c7;"></span> </div>
2-3. 리본 탭(왼쪽 리본)
2-4. 배지형(태그 느낌)
<div style="display:inline-block; margin:22px 0 8px; padding:6px 12px; border-radius:999px; background:#e0e7ff; color:#1e3a8a; font-weight:800;"> # 소제목을_입력하세요 </div>
2-4. 배지형(태그 느낌)
2-5. 강조 바 + 박스 결합
<div style="margin:26px 0 14px; border-left:8px solid #10b981; background:#ecfdf5; padding:12px 14px; border-radius:10px; font-weight:800; font-size:1.1rem;"> 소제목을 입력하세요 </div>
2-5. 강조 바 + 박스 결합
3) 아이콘 & 심볼형 (4종)
3-1. 체크아이콘 헤더
<div style="margin:24px 0 10px; display:flex; align-items:center; gap:8px; font-size:1.15rem; font-weight:800;"> <span style="display:inline-block; width:24px; height:24px; border-radius:50%; background:#10b981; color:#fff; text-align:center; line-height:24px; font-weight:900;">✓</span> <span>소제목을 입력하세요</span> </div>
3-1. 체크아이콘 헤더
3-2. 전구 아이디어 헤더
<div style="margin:24px 0 10px; display:flex; align-items:center; gap:10px; font-size:1.15rem; font-weight:800; color:#111827;"> <span style="font-size:1.2rem;">💡</span> <span>소제목을 입력하세요</span> </div>
3-2. 전구 아이디어 헤더
3-3. 그래프 아이콘(경제/데이터용)
<div style="margin:24px 0 10px; display:flex; align-items:center; gap:8px; font-size:1.15rem; font-weight:800;"> <span style="font-size:1.1rem;">📈</span> <span>소제목을 입력하세요</span> </div>
3-3. 그래프 아이콘(경제/데이터용)
3-4. 책 아이콘(교육/가이드용)
<div style="margin:24px 0 10px; display:flex; align-items:center; gap:8px; font-size:1.15rem; font-weight:800;"> <span style="font-size:1.1rem;">📘</span> <span>소제목을 입력하세요</span> </div>
3-4. 책 아이콘(교육/가이드용)
4) 단계/번호/타임라인형 (3종)
4-1. 번호 배지 소제목
<div style="margin:24px 0 10px; display:flex; align-items:center; gap:10px; font-size:1.15rem; font-weight:800;"> <span style="display:inline-block; min-width:28px; height:28px; border-radius:8px; background:#111827; color:#fff; text-align:center; line-height:28px;">01</span> <span>소제목을 입력하세요</span> </div>
4-2. 프로그레스 바 스타일
<div style="margin:26px 0 6px;"> <div style="display:flex; align-items:center; justify-content:space-between;"> <div style="font-weight:800; font-size:1.1rem;">소제목을 입력하세요</div> <div style="font-size:.9rem; color:#6b7280;">Step 2/5</div> </div> <div style="margin-top:8px; height:6px; background:#e5e7eb; border-radius:999px;"> <div style="width:40%; height:100%; background:#3b82f6; border-radius:999px;"></div> </div> </div>
4-2. 프로그레스 바 스타일
4-3. 타임라인 도트 헤더
<div style="margin:24px 0 10px; position:relative; padding-left:18px; font-weight:800; font-size:1.1rem;"> <span style="position:absolute; left:0; top:8px; width:10px; height:10px; background:#ef4444; border-radius:50%;"></span> 소제목을 입력하세요 </div>
4-3. 타임라인 도트 헤더
5) 알림/메모/경고형 (3종)
5-1. 메모 스티키(점선)
<div style="margin:26px 0 12px; padding:10px 12px; border:2px dashed #9ca3af; border-radius:10px; background:#fff7ed; font-weight:800;"> 소제목을 입력하세요 </div>
5-1. 메모 스티키(점선)
5-2. 정보 안내(파란 인포)
<div style="margin:26px 0 12px; padding:12px 14px; border-left:6px solid #2563eb; background:#eff6ff; border-radius:8px; font-weight:800; color:#1e3a8a;"> 소제목을 입력하세요 </div>
5-2. 정보 안내(파란 인포)
5-3. 경고/주의(노랑)
<div style="margin:26px 0 12px; padding:12px 14px; border-left:6px solid #d97706; background:#fff7ed; border-radius:8px; font-weight:800; color:#7c2d12;"> 소제목을 입력하세요 </div>
5-3. 경고/주의(노랑)
6) 그라디언트 & 하이라이트형 (2종)
6-1. 그라디언트 바 헤더
<div style="margin:24px 0 10px;"> <div style="height:6px; background:linear-gradient(90deg,#06b6d4 0%, #3b82f6 60%, #8b5cf6 100%); border-radius:999px;"></div> <div style="margin-top:10px; font-weight:800; font-size:1.15rem;">소제목을 입력하세요</div> </div>
6-1. 그라디언트 바 헤더
6-2. 형광펜 하이라이트
<h2 style="margin:22px 0 8px; font-size:1.2rem; font-weight:800; line-height:1.5; display:inline;"> <span style="box-shadow:inset 0 -0.6em 0 #fef08a;">소제목을 입력하세요</span> </h2>
6-2. 형광펜 하이라이트
