티스토리 소제목 'SET10' 모음집
블로그에서 소제목 서식을 사용하는 것은 콘텐츠의 가독성, 구조화, 그리고 SEO(검색 엔진 최적화) 측면에서 매우 중요합니다.
- 가독성 향상
소제목을 사용하면 긴 텍스트를 작은 섹션으로 나누어 독자가 빠르게 정보를 얻을 수 있습니다. - 주요 구성화
소제목은 블로그의 구조를 명확히 합니다. 그렇기 때문에 독자들이 글을 읽는 동안 더욱 집중할 수 있습니다. - SEO 최적화
소제목에 적절한 키워드를 사용하면 검색 엔진이 페이지를 더 쉽게 이해하고, 관련 검색 결과에 더 잘 노출될 수 있습니다.
📌 알림
웹서핑을 하다 보면, 제가 만든 소제목과 인용구의 코드, 태그 속성 테이블, 그리고 오탈자까지 그대로 가져가 본인이 작성한 글인 것처럼 소제목과 관련된 포스팅을 하시는 분들이 계십니다. 코드를 가져가는 것까지는 제가 막을 수 없지만, 제 자료를 사용해 소제목이나 인용구 등과 관련된 포스팅을 하실 경우, 출처를 꼭 밝혀 주시기 바랍니다.
소제목의 CSS와 서식의 사용법
소제목을 티스토리에 적용하는 방법은 아래 페이지를 참고하시기 바랍니다.
티스토리 소제목 SET-10
소제목의 종류
H1은 포스팅의 메인 제목입니다.
H2는 대제목으로 사용됩니다.
인용구는 글의 주제와 목적을 간략히 소개합니다.
H3는 소제목으로 사용됩니다.
H4는 메인 키워드나 소제목의 보조적인 내용으로 사용합니다. .
SET-1. 대제목 / H2
<h2 style="background: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%); color: #fff; font-weight: bold; margin: 0.5em 0em; padding: 15px 20px; border-radius: 0px 20px 20px 20px;" data-ke-size="size26">SET-1. 대제목 / H2</h2>
SET-1. 인용구
https://galam.tistory.com/
<div style="margin: 1em 0; padding: 10px 20px; border: 1px solid #37bafd; background-color: #f1f8fc; border-top: 5px solid #37bafd; border-radius: 10px; box-shadow: 0 3px 12px rgb(0 0 0 / 15%);">
<p data-ke-size="size16"><span style="font-weight: 500; font-size: 1.05em;">SET-1. 인용구</span></p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>
SET-1. 소제목 / H3
<div style="padding: 0 0 3px 10px; margin: 0.5em 0; background: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);">
<h3 style="padding: 10px 15px; margin: 0 0; background-color: #fff; font-weight: bold; color: #000;" data-ke-size="size23">SET-1. 소제목 / H3</h3>
</div>
SET-1. 소제목 / H4
<h4 style="display: inline-block; padding: 0.5em 2em 0.5em 0.6em; margin: 0.5em 0em; border-left: 10px solid #37bafd; background-color: #eaf2f6; border-radius: 0px 20px 20px 0px; font-weight: bold; color: #000;" data-ke-size="size20">SET-1. 소제목 / H4</h4>
SET-1. 소제목 / H4
<div style="margin: 0em 0; padding-bottom: 0.5em;" data-ke-size="size20">
<h4 style="position: relative; bottom: 15px; padding-left: 20px; font-weight: bold;" data-ke-size="size20">SET-1. 소제목 / H4</h4>
<div style="width: 10px; height: 30px; background: linear-gradient(180deg, #37bafd 0%, #eaf2f6 100%); margin-top: -65px; border-radius: 4px;" data-ke-size="size16"> </div>
</div>
SET-2. 대제목 / H2
<h2 style="background-image: linear-gradient(220.55deg, #FFF500 0%, #FF00B8 100%); color: #fff; font-weight: bold; margin: 0.5em 0em; padding: 15px 20px; border-radius: 0px 20px 20px 20px;" data-ke-size="size26">SET-2. 대제목 / H2</h2>
SET-2. 인용구
https://galam.tistory.com/
<div style="margin: 1em 0; padding: 10px 20px; border: 1px solid #FF00B8; background-color: #fcf1f9; border-top: 5px solid #FF00B8; border-radius: 10px; box-shadow: 0 3px 12px rgb(0 0 0 / 15%);">
<p data-ke-size="size16"><span style="font-weight: 500; font-size: 1.05em;">SET-2. 인용구</span></p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>
SET-2. 소제목 / H3
<div style="padding: 0 0 3px 10px; margin: 0.5em 0; background-image: linear-gradient(220.55deg, #FFF500 0%, #FF00B8 100%);">
<h3 style="padding: 10px 15px; margin: 0 0; background-color: #fff; font-weight: bold; color: #000;" data-ke-size="size23">SET-2. 소제목 / H3</h3>
</div>
SET-2. 소제목 / H4
<h4 style="display: inline-block; padding: 0.5em 2em 0.5em 0.6em; margin: 0.5em 0em; border-left: 10px solid #FF00B8; background-color: #feebf9; border-radius: 0px 20px 20px 0px; font-weight: bold; color: #000;" data-ke-size="size20">SET-2. 소제목 / H4</h4>
SET-2. 소제목 / H4
<div style="margin: 0em 0; padding-bottom: 0.5em;" data-ke-size="size20">
<h4 style="position: relative; bottom: 15px; padding-left: 20px; font-weight: bold;" data-ke-size="size20">SET-2. 소제목 / H4</h4>
<div style="width: 10px; height: 30px; background: linear-gradient(180deg, #FF00B8, #ffd8f4); margin-top: -65px; border-radius: 4px;" data-ke-size="size16"> </div>
</div>
SET-3. 대제목 / H2
<h2 style="background-image: linear-gradient(220.55deg, #FFE70B 0%, #27B643 100%); color: #fff; font-weight: bold; margin: 0.5em 0em; padding: 15px 20px; border-radius: 0px 20px 20px 20px;" data-ke-size="size26">SET-3. 대제목 / H2</h2>
SET-3. 인용구
https://galam.tistory.com/
<div style="margin: 1em 0; padding: 10px 20px; border: 1px solid #27B643; background-color: #eefbee; border-top: 5px solid #27B643; border-radius: 10px; box-shadow: 0 3px 12px rgb(0 0 0 / 15%);">
<p data-ke-size="size16"><span style="font-weight: 500; font-size: 1.05em;">SET-3. 인용구</span></p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>
SET-3. 소제목 / H3
<div style="padding: 0 0 3px 10px; margin: 0.5em 0; background-image: linear-gradient(220.55deg, #FFE70B 0%, #27B643 100%);">
<h3 style="padding: 10px 15px; margin: 0 0; background-color: #fff; font-weight: bold; color: #000;" data-ke-size="size23">SET-3. 소제목 / H3</h3>
</div>
SET-3. 소제목 / H4
<h4 style="display: inline-block; padding: 0.5em 2em 0.5em 0.6em; margin: 0.5em 0em; border-left: 10px solid #27B643; background-color: #e3f2e3; border-radius: 0px 20px 20px 0px; font-weight: bold; color: #000;" data-ke-size="size20">SET-3. 소제목 / H4</h4>
SET-3. 소제목 / H4
<div style="margin: 0em 0; padding-bottom: 0.5em;" data-ke-size="size20">
<h4 style="position: relative; bottom: 15px; padding-left: 20px; font-weight: bold;" data-ke-size="size20">SET-3. 소제목 / H4</h4>
<div style="width: 10px; height: 30px; background: linear-gradient(180deg, #27B643, #d8eed8); margin-top: -65px; border-radius: 4px;" data-ke-size="size16"> </div>
</div>
SET-4. 대제목 / H2
<h2 style="background: linear-gradient(220.55deg, #FADD76 0%, #9F3311 100%); color: #fff; font-weight: bold; margin: 0.5em 0em; padding: 15px 20px; border-radius: 0px 20px 20px 20px;" data-ke-size="size26">SET-4. 대제목 / H2</h2>
SET-4. 인용구
https://galam.tistory.com/
<div style="margin: 1em 0; padding: 10px 20px; border: 1px solid #9F3311; background-color: #fbf8ec; border-top: 5px solid #9F3311; border-radius: 10px; box-shadow: 0 3px 12px rgb(0 0 0 / 15%);">
<p data-ke-size="size16"><span style="font-weight: 500; font-size: 1.05em;">SET-4. 인용구</span></p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>
SET-4. 소제목 / H3
<div style="padding: 0 0 3px 10px; margin: 0.5em 0; background: linear-gradient(220.55deg, #FADD76 0%, #9F3311 100%);">
<h3 style="padding: 10px 15px; margin: 0 0; background-color: #fff; font-weight: bold; color: #000;" data-ke-size="size23">SET-4. 소제목 / H3</h3>
</div>
SET-4. 소제목 / H4
<h4 style="display: inline-block; padding: 0.5em 2em 0.5em 0.6em; margin: 0.5em 0em; border-left: 10px solid #9F3311; background-color: #f5efd8; border-radius: 0px 20px 20px 0px; font-weight: bold; color: #000;" data-ke-size="size20">SET-4. 소제목 / H4</h4>
SET-4. 소제목 / H4
<div style="margin: 0em 0; padding-bottom: 0.5em;" data-ke-size="size20">
<h4 style="position: relative; bottom: 15px; padding-left: 20px; font-weight: bold;" data-ke-size="size20">SET-4. 소제목 / H4</h4>
<div style="width: 10px; height: 30px; background: linear-gradient(180deg, #9F3311, #FADD76); margin-top: -65px; border-radius: 4px;" data-ke-size="size16"> </div>
</div>
SET-5. 대제목 / H2
<h2 style="background: linear-gradient(to right, #4c5664 0%, #c4c7cd 100%); color: #fff; font-weight: bold; margin: 0.5em 0em; padding: 15px 20px; border-radius: 0px 20px 20px 20px;" data-ke-size="size26">SET-5. 대제목 / H2</h2>
SET-5. 인용구
https://galam.tistory.com/
<div style="margin: 1em 0; padding: 10px 20px; border: 1px solid #4c5664; background-color: #f1f4f9; border-top: 5px solid #4c5664; border-radius: 10px; box-shadow: 0 3px 12px rgb(0 0 0 / 15%);">
<p data-ke-size="size16"><span style="font-weight: 500; font-size: 1.05em;">SET-5. 인용구</span></p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>
SET-5. 소제목 / H3
<div style="padding: 0 0 3px 10px; margin: 0.5em 0; background: linear-gradient(to right, #4c5664 0%, #c4c7cd 100%);">
<h3 style="padding: 10px 15px; margin: 0 0; background-color: #fff; font-weight: bold; color: #000;" data-ke-size="size23">SET-5. 소제목 / H3</h3>
</div>
SET-5. 소제목 / H4
<h4 style="display: inline-block; padding: 0.5em 2em 0.5em 0.6em; margin: 0.5em 0em; border-left: 10px solid #4c5664; background-color: #e4e6ea; border-radius: 0px 20px 20px 0px; font-weight: bold; color: #000;" data-ke-size="size20">SET-5. 소제목 / H4</h4>
SET-5. 소제목 / H4
<div style="margin: 0em 0; padding-bottom: 0.5em;" data-ke-size="size20">
<h4 style="position: relative; bottom: 15px; padding-left: 20px; font-weight: bold;" data-ke-size="size20">SET-5. 소제목 / H4</h4>
<div style="width: 10px; height: 30px; background: linear-gradient(180deg, #4c5664 0%, #c4c7cd 100%); margin-top: -65px; border-radius: 4px;" data-ke-size="size16"> </div>
</div>
SET-6. 대제목 / H2
<h2 style="background: linear-gradient(to right, #BCC5CE 0%, #929EAD 100%); color: #fff; font-weight: bold; margin: 0.5em 0em; padding: 15px 20px; border-radius: 0px 20px 20px 20px;" data-ke-size="size26">SET-6. 대제목 / H2</h2>
SET-6. 인용구
https://galam.tistory.com/
<div style="margin: 1em 0; padding: 10px 20px; border: 1px solid #BCC5CE; background-color: #f9f9f9; border-top: 5px solid #929EAD; border-radius: 10px; box-shadow: 0 3px 12px rgb(0 0 0 / 15%);">
<p data-ke-size="size16"><span style="font-weight: 500; font-size: 1.05em;">SET-6. 인용구</span></p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>
SET-6. 소제목 / H3
<div style="background-color: #f9f9f9; border: 1px solid #BCC5CE; margin: 1em 0; padding-bottom: 15px; padding-left: 10px; border-radius: 10px;" data-ke-size="size23">
<h3 style="position: relative; bottom: 15px; padding-left: 15px; font-weight: bold;" data-ke-size="size23">SET-6. 소제목 / H3</h3>
<div style="width: 8px; height: 30px; background: linear-gradient(180deg, #929EAD 20%, #c4c7cd 100%); margin-top: -67px; border-radius: 4px;" data-ke-size="size16"> </div>
</div>
SET-6. 소제목 / H4
<h4 style="display: inline-block; background-color: #f9f9f9; border: 1px solid #BCC5CE; padding: 0.4em 2em 0.4em 0.6em; margin: 0.5em 0em; border-left: 8px solid #929EAD; border-radius: 0px 20px 20px 0px; font-weight: bold; color: #000;" data-ke-size="size20">SET-6. 소제목 / H4</h4>
SET-6. 소제목 / H4
<div style="margin: 0em 0; padding-bottom: 0.5em;" data-ke-size="size20">
<h4 style="position: relative; bottom: 15px; padding-left: 20px; font-weight: bold;" data-ke-size="size20">SET-6. 소제목 / H4</h4>
<div style="width: 8px; height: 30px; background: linear-gradient(180deg, #929EAD 20%, #c4c7cd 100%); margin-top: -65px; border-radius: 4px;" data-ke-size="size16"> </div>
</div>
SET-7. 대제목 / H2
<h2 style="background: linear-gradient(to right, #495aff 0%, #0acffe 100%); color: #fff; font-weight: bold; margin: 0.5em 0em; padding: 15px 20px; border-radius: 0px 20px 20px 20px;" data-ke-size="size26">SET-7. 대제목 / H2</h2>
SET-7. 인용구
https://galam.tistory.com/
<div style="margin: 1em 0; padding: 10px 20px; border: 1px solid #ddd; background-color: #f3fcfe; border-top: 5px solid #495aff; border-radius: 10px; box-shadow: 0 3px 12px rgb(0 0 0 / 15%);">
<p data-ke-size="size16"><span style="font-weight: 500; font-size: 1.05em;">SET-7. 인용구</span></p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>
SET-7. 소제목 / H3
<div style="background: linear-gradient(to right, #fff 0%, #f3fcfe 100%); border: 1px solid #ddd; margin: 1em 0; padding-bottom: 15px; padding-left: 10px; border-radius: 10px;" data-ke-size="size23">
<h3 style="position: relative; bottom: 15px; padding-left: 15px; font-weight: bold;" data-ke-size="size23">SET-7. 소제목 / H3</h3>
<div style="width: 8px; height: 30px; background: linear-gradient(180deg, #495aff 20%, #0acffe 100%); margin-top: -67px; border-radius: 4px;" data-ke-size="size16"> </div>
</div>
SET-7. 소제목 / H4
<h4 style="display: inline-block; background: linear-gradient(to right, #fff 0%, #f3fcfe 100%); border: 1px solid #ddd; padding: 0.4em 2em 0.4em 0.6em; margin: 0.5em 0em; border-left: 8px solid #495aff; border-radius: 0px 20px 20px 0px; font-weight: bold; color: #000;" data-ke-size="size20">SET-7. 소제목 / H4</h4>
SET-7. 소제목 / H4
<div style="margin: 0em 0; padding-bottom: 0.5em;" data-ke-size="size20">
<h4 style="position: relative; bottom: 15px; padding-left: 20px; font-weight: bold;" data-ke-size="size20">SET-7. 소제목 / H4</h4>
<div style="width: 8px; height: 30px; background: linear-gradient(180deg, #495aff 20%, #0acffe 100%); margin-top: -65px; border-radius: 4px;" data-ke-size="size16"> </div>
</div>
SET-8. 대제목 / H3
<div style="background: linear-gradient(to right, #017ab8 0%, #0097e2 100%); border: 1px solid #fff; margin: 1em 0; padding-bottom: 15px; padding-left: 10px; border-radius: 0px 10px 0px 10px;" data-ke-size="size23">
<h2 style="position: relative; bottom: 15px; padding-left: 15px; font-weight: bold; color: #fff;" data-ke-size="size26">SET-8. 대제목 / H3</h2>
<div style="width: 8px; height: 35px; background: linear-gradient(180deg, #d8f2ff 20%, #fff 100%); margin-top: -70px; border-radius: 4px;" data-ke-size="size16"> </div>
</div>
SET-8. 인용구
https://galam.tistory.com/
<div style="margin: 1em 0; padding: 10px 20px; border: 1px solid #bbc9d0; background-color: #f1fafe; border-top: 5px solid #017ab8; border-radius: 10px; box-shadow: 0 3px 12px rgb(0 0 0 / 15%);">
<p data-ke-size="size16"><span style="font-weight: 500; font-size: 1.05em;">SET-8. 인용구</span></p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>
SET-8. 소제목 / H3
<div style="background: linear-gradient(to right, #fff 0%, #dceef7 100%); border: 1px solid #bbc9d0; margin: 1em 0; padding-bottom: 15px; padding-left: 10px; border-radius: 10px;" data-ke-size="size23">
<h3 style="position: relative; bottom: 15px; padding-left: 15px; font-weight: bold;" data-ke-size="size23">SET-8. 소제목 / H3</h3>
<div style="width: 8px; height: 30px; background: linear-gradient(180deg, #017ab8 0%, #15affe 100%); margin-top: -67px; border-radius: 4px;" data-ke-size="size16"> </div>
</div>
SET-8. 소제목 / H4
<h4 style="display: inline-block; background: linear-gradient(to right, #fff 0%, #dceef7 100%); border: 1px solid #bbc9d0; padding: 0.4em 2em 0.4em 0.6em; margin: 0.5em 0em; border-left: 8px solid #017ab8; border-radius: 0px 20px 20px 0px; font-weight: bold; color: #000;" data-ke-size="size20">SET-8. 소제목 / H4</h4>
SET-8. 소제목 / H4
<div style="margin: 0em 0; padding-bottom: 0.5em;" data-ke-size="size20">
<h4 style="position: relative; bottom: 15px; padding-left: 20px; font-weight: bold;" data-ke-size="size20">SET-8. 소제목 / H4</h4>
<div style="width: 8px; height: 30px; background: linear-gradient(180deg, #017ab8 0%, #15affe 100%); margin-top: -65px; border-radius: 4px;" data-ke-size="size16"> </div>
</div>
SET-9. 대제목 / H2
<h2 style="background: linear-gradient(to right, #fff 20%, #f2f2f2 100%); border: 1px solid #BCC5CE; padding: 0.5em 1em 0.5em 0.5em; margin: 0.5em 0em; border-left: 10px solid #666666; border-radius: 0px 20px 20px 0px; font-weight: bold; color: #000;" data-ke-size="size26">SET-9. 대제목 / H2</h2>
SET-9. 인용구
https://galam.tistory.com/
<div style="margin: 1em 0; padding: 10px 20px; border: 1px solid #BCC5CE; background-color: #f6f6f6; border-top: 5px solid #666666; border-radius: 10px; box-shadow: 0 3px 12px rgb(0 0 0 / 15%);">
<p data-ke-size="size16"><span style="font-weight: 500; font-size: 1.05em;">SET-9. 인용구</span></p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>
SET-9. 소제목 / H3
<h3 style="background: linear-gradient(to right, #fff 20%, #f2f2f2 100%); border: 1px solid #BCC5CE; padding: 0.5em 1em 0.5em 0.5em; margin: 0.5em 0em; border-left: 10px solid #666666; border-radius: 8px; font-weight: bold; color: #000;" data-ke-size="size23">SET-9. 소제목 / H3</h3>
SET-9. 소제목 / H4
<h4 style="display: inline-block; background: linear-gradient(to right, #fff 20%, #f2f2f2 100%); border: 1px solid #BCC5CE; padding: 0.4em 2em 0.4em 0.5em; margin: 0.5em 0em; border-left: 10px solid #666666; border-radius: 0px 20px 20px 0px; font-weight: bold; color: #000;" data-ke-size="size20">SET-9. 소제목 / H4</h4>
SET-9. 소제목 / H4
<div style="margin: 0em 0; padding-bottom: 0.5em;" data-ke-size="size20">
<h4 style="position: relative; bottom: 15px; padding-left: 20px; font-weight: bold;" data-ke-size="size20">SET-9. 소제목 / H4</h4>
<div style="width: 8px; height: 30px; background: linear-gradient(180deg, #666666 20%, #c4c7cd 100%); margin-top: -65px; border-radius: 4px;" data-ke-size="size16"> </div>
</div>
SET-10. 대제목 / H2
<h2 style="background: #d0dbf7; padding: 0.5em 1em 0.5em 0.5em; margin: 0.5em 0em; border-left: 10px solid #99b3f5; border-radius: 0px 20px 20px 0px; font-weight: bold; color: #000;" data-ke-size="size26">SET-10. 대제목 / H2</h2>
SET-10. 인용구
https://galam.tistory.com/
<div style="margin: 1em 0; padding: 10px 20px; border: 1px solid #99b3f5; background-color: #f5f7fd; border-top: 5px solid #99b3f5; border-radius: 10px; box-shadow: 0 3px 12px rgb(0 0 0 / 15%);">
<p data-ke-size="size16"><span style="font-weight: 500; font-size: 1.05em;">SET-10. 인용구</span></p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>
SET-10. 소제목 / H3
<h3 style="background: #fff; border: 1px solid #99b3f5; padding: 0.5em 1em 0.5em 0.5em; margin: 0.5em 0em; border-left: 8px solid #99b3f5; border-radius: 10px; font-weight: bold; color: #000;" data-ke-size="size23">SET-10. 소제목 / H3</h3>
SET-10. 소제목 / H4
<h4 style="display: inline-block; background: #fff; border: 1px solid #99b3f5; padding: 0.4em 2em 0.4em 0.5em; margin: 0.5em 0em; border-left: 10px solid #99b3f5; border-radius: 0px 20px 20px 0px; font-weight: bold; color: #000;" data-ke-size="size20">SET-10. 소제목 / H4</h4>
SET-10. 소제목 / H4
<div style="margin: 0em 0; padding-bottom: 0.5em;" data-ke-size="size20">
<h4 style="position: relative; bottom: 15px; padding-left: 20px; font-weight: bold;" data-ke-size="size20">SET-10. 소제목 / H4</h4>
<div style="width: 8px; height: 30px; background: linear-gradient(180deg, #99b3f5 20%, #d0dbf7 100%); margin-top: -65px; border-radius: 4px;" data-ke-size="size16"> </div>
</div>
마무리
포스팅에 사용할 수 있는 소제목 H2부터 H4까지 세트로 만들어 봤습니다. 소제목 세트는 글에 통일성을 주며 가독성을 높이고, 각 섹션을 명확하게 구분하는 데 도움이 됩니다.
"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다"
'▸티스토리 이야기 > •소제목 꾸미기' 카테고리의 다른 글
티스토리 소제목 서식(HTML) 스타일 모음 part 5 (2) | 2024.08.12 |
---|---|
티스토리 소제목 꾸미기 | 서식(HTML) 모음, 그라데이션 스타일 (1) | 2024.03.22 |
티스토리 소제목 꾸미기 | 두줄 소제목 서식(HTML) 스타일 모음 (4) | 2024.03.13 |
티스토리 소제목 꾸미기 | 서식(HTML) 스타일 모음 part 2 (24) | 2023.06.26 |
형광, 파스텔, 그라데이션 색상표와 컬러 코드 사이트 (0) | 2023.06.07 |