티스토리 블로그 H3 태그 디자인 모음

티스토리 블로그 h3 태그를 위한 10가지 디자인을 만들어 보았습니다! 각 디자인은 다음과 같은 특징을 가지고 있어요:

1. 심플 라인 - 깔끔한 언더라인 스타일
2. 좌측 포인트 바 - 왼쪽 강조선과 그라데이션 배경
3. 박스 스타일 - 그라데이션 배경의 둥근 박스
4. 언더라인 강조 - 부분 그라데이션 언더라인
5. 아이콘 포인트 - 이모지 아이콘이 포함된 스타일
6. 그라데이션 텍스트 - 텍스트 자체가 그라데이션
7. 네온 스타일 - 글로우 효과가 있는 테두리
8. 모던 카드 - 그림자 효과가 있는 카드 형태
9. 라벨 스타일 - 깃발 모양의 라벨 디자인
10. 트렌디 언더라인 - 전체 폭의 그라데이션 언더라인

원하는 코드를 복사하셔서 css 탭에서 적당한 부분에 붙여넣기 하시면 블로그의 모든 글에 원하는 디자인의 h3 태그를 보실 수 있습니다.

디자인 1: 심플 라인

깔끔한 언더라인 제목

/* 티스토리 CSS 편집에 추가할 코드 */ h3 { font-size: 24px; font-weight: 600; color: #333; margin: 20px 0; padding-bottom: 10px; border-bottom: 2px solid #4a90e2; }

디자인 2: 좌측 포인트 바

좌측 강조 포인트 제목

/* 티스토리 CSS 편집에 추가할 코드 */ h3 { font-size: 24px; font-weight: 600; color: #333; margin: 20px 0; padding-left: 15px; border-left: 4px solid #e74c3c; background: linear-gradient(90deg, rgba(231, 76, 60, 0.1) 0%, transparent 50%); }

디자인 3: 박스 스타일

그라데이션 박스 제목

/* 티스토리 CSS 편집에 추가할 코드 */ h3 { font-size: 22px; font-weight: 600; color: white; margin: 20px 0; padding: 12px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 25px; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); }

디자인 4: 언더라인 강조

그라데이션 언더라인 제목

/* 티스토리 CSS 편집에 추가할 코드 */ h3 { font-size: 24px; font-weight: 600; color: #333; margin: 20px 0; position: relative; display: inline-block; } h3::after { content: ''; position: absolute; width: 60%; height: 3px; background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%); bottom: -5px; left: 0; border-radius: 2px; }

디자인 5: 아이콘 포인트

아이콘이 있는 제목

/* 티스토리 CSS 편집에 추가할 코드 */ h3 { font-size: 24px; font-weight: 600; color: #333; margin: 20px 0; position: relative; padding-left: 40px; } h3::before { content: '📌'; position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 20px; }

디자인 6: 그라데이션 텍스트

컬러풀한 그라데이션 제목

/* 티스토리 CSS 편집에 추가할 코드 */ h3 { font-size: 26px; font-weight: 700; background: linear-gradient(45deg, #12c2e9, #c471ed, #f64f59); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 20px 0; }

디자인 7: 네온 스타일

네온 글로우 효과 제목

/* 티스토리 CSS 편집에 추가할 코드 */ h3 { font-size: 24px; font-weight: 600; color: #333; margin: 20px 0; padding: 15px 25px; border: 2px solid #00d4ff; border-radius: 10px; background: rgba(0, 212, 255, 0.05); box-shadow: 0 0 20px rgba(0, 212, 255, 0.2); }

디자인 8: 모던 카드

모던한 카드 스타일 제목

/* 티스토리 CSS 편집에 추가할 코드 */ h3 { font-size: 22px; font-weight: 600; color: #333; margin: 20px 0; padding: 18px 25px; background: white; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.1); border-left: 5px solid #ff6b6b; }

디자인 9: 라벨 스타일

라벨 형태의 제목

/* 티스토리 CSS 편집에 추가할 코드 */ h3 { font-size: 20px; font-weight: 600; color: white; margin: 20px 0; padding: 12px 20px; background: #2c3e50; border-radius: 0 8px 8px 0; position: relative; display: inline-block; } h3::before { content: ''; position: absolute; left: -10px; top: 0; width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-right: 10px solid #2c3e50; }

디자인 10: 트렌디 언더라인

트렌디한 그라데이션 언더라인

/* 티스토리 CSS 편집에 추가할 코드 */ h3 { font-size: 24px; font-weight: 600; color: #333; margin: 20px 0; position: relative; padding-bottom: 15px; } h3::after { content: ''; position: absolute; width: 100%; height: 8px; background: linear-gradient(90deg, transparent 0%, #ffd89b 20%, #19547b 80%, transparent 100%); bottom: 0; left: 0; border-radius: 4px; opacity: 0.7; }

사용법:

1. 티스토리 관리자 → 꾸미기 → 스킨 편집 → CSS 편집
2. 위의 CSS 코드 중 원하는 디자인을 복사
3. CSS 편집 창에 붙여넣기
4. 적용하기 클릭