▸티스토리 이야기/•소제목 꾸미기
티스토리 꾸미기 | 소제목 'SET10' 모음집
Galam.
2024. 10. 18. 18:27
728x90
티스토리 소제목 'SET10' 모음집
블로그에서 소제목 서식을 사용하는 것은 콘텐츠의 가독성, 구조화, 그리고 SEO(검색 엔진 최적화) 측면에서 매우 중요합니다.
- 가독성 향상
소제목을 사용하면 긴 텍스트를 작은 섹션으로 나누어 독자가 빠르게 정보를 얻을 수 있습니다. - 주요 구성화
소제목은 블로그의 구조를 명확히 합니다. 그렇기 때문에 독자들이 글을 읽는 동안 더욱 집중할 수 있습니다. - SEO 최적화
소제목에 적절한 키워드를 사용하면 검색 엔진이 페이지를 더 쉽게 이해하고, 관련 검색 결과에 더 잘 노출될 수 있습니다.
📌 알림
웹서핑을 하다 보면, 제가 만든 소제목과 인용구의 코드, 태그 속성 테이블, 그리고 오탈자까지 그대로 가져가 본인이 작성한 글인 것처럼 소제목과 관련된 포스팅을 하시는 분들이 계십니다. 코드를 가져가는 것까지는 제가 막을 수 없지만, 제 자료를 사용해 소제목이나 인용구 등과 관련된 포스팅을 하실 경우, 출처를 꼭 밝혀 주시기 바랍니다.
그 외 개인적인 사용은 자유롭게 하시면 됩니다.
소제목의 CSS와 서식의 사용법
소제목을 티스토리에 적용하는 방법은 아래 페이지를 참고하시기 바랍니다.
티스토리 소제목 꾸미기(CSS 활용, 서식 활용)
티스토리 소제목 꾸미기이번에는 티스토리 본문 안에 "소제목 꾸미기"를 알아보도록 하겠습니다. 전체적인 소제목 서식을 변경하기 위해서는 'CSS' 또는 'HTML'를 수정하시면 되고,작성하는 글마
galam.tistory.com
티스토리 소제목 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>
◇
728x90
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>
◇
728x90
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>
◇
728x90
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까지 세트로 만들어 봤습니다. 소제목 세트는 글에 통일성을 주며 가독성을 높이고, 각 섹션을 명확하게 구분하는 데 도움이 됩니다.
"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다"
반응형