티스토리 소제목 서식(HTML) 스타일 모음 part 5

 

 

 

티스토리 소제목 서식(HTML) 모음 part 5

티스토리에서 소제목 서식을 사용하는 장점은 다음과 같습니다.

• 시각적인 효과, 가독성 향상, 정보 전달 효과, 포스트 관리 용이성 등 포스트의 시각적 효과와 가독성, 정보 전달 효과 등을 향상하는 데 큰 도움을 줍니다.
• 서식화된 소제목은 시각적인 강조와 정보의 구조화를 통해 독자들의 주의를 끌고 글의 가독성과 검색 엔진 최적화를 향상시킬 수 있습니다.

💡 공지

웹서핑을 하다 보면, 제가 만든 소제목 코드, 태그 속성 테이블, 그리고 오탈자까지 그대로 가져가 본인이 작성한 글인 것처럼 소제목 관련 포스팅을 하시는 분들이 계십니다. 코드를 퍼가는 것까지는 제가 막을 수 없지만, 제 자료를 사용해 소제목 관련 포스팅을 하실 경우, 출처를 꼭 밝혀주시기 바랍니다.

그 외 개인적인 사용은 자유롭게 사용하시면 됩니다.

 

티스토리 소제목 서식 저장법

1. 서식을 이용하려면 '블로그 관리 홈 > 서식 관리자 > 서식 쓰기'로 들어갑니다.

---

2. 기본 모드가 아닌 'HTML'로 작성합니다.

---

3. 'HTML'로 작성 후 필요한 부분은 수정하시면 됩니다.

---

4. 마지막으로 '완료'를 클릭하여 저장합니다.

---

728x90

 

티스토리 소제목 HTML 코드

테두리 스타일

원하는 선 스타일을 'solid'라고 쓰여있는 부분에 바꿔 적으면 됩니다.

직선	네모 점선	동그란 점선	두줄선
solid	dashed	dotted	double

 

선 위치

전체선	왼쪽 선	오른쪽 선	위쪽 선	아래쪽 선
border	border-left	border-right	border-top	border-bottom

 

태그 속성 (2024.03 수정)

태그 속성	설명
color:#8568e1;	글꼴색: #색상
background-color: #6c7ae0;	배경색: #색상
border-bottom: #000000 2px solid;	아래쪽 선: #색상, 선굵기px, 선 스타일
border-left: #000000 10px solid;	왼쪽 선: #색상, 선굵기px, 선 스타일
border: 5px solid #A9A9F5;	전체 태두리선: 선굵기px, 선 스타일, #색상
padding: 10px 1px 10px 1px;	박스 내부 여백: 상, 좌, 하, 우
margin: 10px 0px;	박스 외부 여백: 상/하, 좌/우
border-radius: 20px 1px 20px 1px;	테이블 모서리 둥글게: 좌/상, 우/상, 우/하, 좌/하
box-shadow: 5px 5px 5px #999;	그림자 효과: 좌, 하, 그림자 크기, #색상
px와 em은 모두 크기 입니다.(16px → 1em, 18px → 1.1em)

---

 

티스토리 소제목 서식 색상표

소제목 색상변경 시 색상코드는 아래 '색상표' 홈에서 확인하시면 됩니다.

- 형광, 파스텔, 그라데이션 색상표와 컬러 코드 사이트

형광, 파스텔, 그라데이션 색상표와 컬러 코드 사이트

---

 

티스토리 소제목 HTML 서식 모음

 

https://galam.tistory.com/폴더 소제목 1

 

<div style="width: 150px; margin: 0.5em 0em 0em 0em; padding: 10px 10px; background: #f8c754; border-radius: 20px 45px 0px 0px;">&nbsp;</div>
<h3 style="background: #fce175; color: #000000; font-weight: bold; margin-top: 0px; margin-bottom: 15px; padding: 15px 20px 15px 20px; border-radius: 0px 10px 10px 10px;" data-ke-size="size23">https://galam.tistory.com/폴더 소제목 1</h3>

---

 

 

https://galam.tistory.com/폴더 소제목 2

 

<div style="width: 150px; margin: 0.5em 0em 0em 0em; padding: 10px 10px; background: #0271c5; border-radius: 20px 45px 0px 0px;">&nbsp;</div>
<h3 style="background: #25abe5; color: #ffffff; font-weight: bold; margin-top: 0px; margin-bottom: 15px; padding: 15px 20px 15px 20px; border-radius: 0px 10px 10px 10px;" data-ke-size="size23">https://galam.tistory.com/폴더 소제목 2</h3>

---

 

 

https://galam.tistory.com/폴더 소제목 3

 

<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; border-bottom: 35px solid #f8c754; border-right: 35px solid rgba(0,0,0,0); border-radius: 15px 0px 0px 0px;">&nbsp;</div>
<h3 style="background: #fbd84b; font-weight: bold; color: #000; margin: 0em 0em 0.5em 0em; padding: 15px 20px 15px 20px; border-radius: 0px 10px 10px 10px;" data-ke-size="size23">https://galam.tistory.com/폴더 소제목 3</h3>

---

 

 

https://galam.tistory.com/폴더 소제목 4

 

<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; border-bottom: 35px solid #0048c2; border-right: 35px solid rgba(0,0,0,0); border-radius: 15px 0px 0px 0px;">&nbsp;</div>
<h3 style="background: #347ffd; font-weight: bold; color: #fff; margin: 0em 0em 0.5em 0em; padding: 15px 20px 15px 20px; border-radius: 0px 10px 10px 10px;" data-ke-size="size23">https://galam.tistory.com/폴더 소제목 4</h3>

---

 

 

https://galam.tistory.com/폴더 소제목 5

 

<div style="width: 150px; height: 0px; margin: 0.5em 0em 0.05em 0em; border-bottom: 35px solid #846add; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;">&nbsp;</div>
<h3 style="border: 5px solid #b3aaec; font-weight: bold; color: #000; margin: 0em 0em 0.5em 0em; padding: 10px 20px 10px 20px; border-radius: 0px 10px 10px 10px;" data-ke-size="size23">https://galam.tistory.com/폴더 소제목 5</h3>

---

 

 

https://galam.tistory.com/폴더 소제목 6

 

<div style="width: 150px; height: 0px; margin: 0.5em 0em 0.05em 0em; border-bottom: 35px solid #0048c2; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;">&nbsp;</div>
<h3 style="border: 5px solid #347ffd; font-weight: bold; color: #000; margin: 0em 0em 0.5em 0em; padding: 10px 20px 10px 20px; border-radius: 0px 10px 10px 10px;" data-ke-size="size23">https://galam.tistory.com/폴더 소제목 6</h3>

---

 

https://galam.tistory.com/폴더 소제목 5

 

<h3 style="border-bottom: 5px solid #00b26f; text-align: left; color: #00b26f; font-weight: bold;" data-ke-size="size23"><span style="display: inline-block; border-radius: 15px 15px 0px 0px; background-color: #e5efec; position: relative; padding: 10px 20px 5px 15px; bottom: 0px;">https://galam.tistory.com/폴더 소제목 5</span></h3>

---

 

https://galam.tistory.com/폴더 소제목 6

 

<h3 style="border-bottom: 5px solid #4272d7; text-align: left; color: #4272d7; font-weight: bold;" data-ke-size="size23"><span style="display: inline-block; border-radius: 15px 15px 0px 0px; background-color: #c5d3f8; position: relative; padding: 10px 20px 5px 15px; bottom: 0px;">https://galam.tistory.com/폴더 소제목 6</span></h3>

---

 

짧은 제목용 소제목 HTML 서식 모음

아래의 소제목들은 제목이 길어질 경우 PC에서는 정상적으로 보이나 모바일에서 소제목의 글자가 영역을 벗어납니다.

※ 제목의 길이는 10~12자 정도가 적절합니다.

 

<모바일 사용 예제>

https://galam.tistory.com/폴더 소제목

 

---

 

galam/폴더 소제목 1

 

 

<h3 style="display: inline-block; height: 0px; margin: 0.5em 0em 0em 0em; padding: 0px 10px 0px 15px; border-bottom: 45px solid #ffe176; border-right: 45px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;" data-ke-size="size23"><span style="position: relative; bottom: -10px; font-weight: 600; color: #281107;">galam-폴더 소제목 1</span></h3>
<div style="border-top: 5px solid #ffbe84; margin-top: 0px; margin-bottom: -10px;">&nbsp;</div>

---

 

galam/폴더 소제목 2

 

 

<h3 style="display: inline-block; height: 0px; margin: 0.5em 0em 0em 0em; padding: 0px 10px 0px 15px; border-bottom: 45px solid #d4d6fc; border-right: 45px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;" data-ke-size="size23"><span style="position: relative; bottom: -10px; font-weight: 600;">galam-폴더 소제목 2</span></h3>
<div style="border-top: 5px solid #6c7ae0; margin-top: 0px; margin-bottom: -10px;">&nbsp;</div>

---

 

galam/폴더 소제목 3

 

 

<h3 style="display: inline-block; height: 0px; margin: 0.5em 0em 0em 0em; padding: 0px 10px 0px 15px; border-bottom: 45px solid #a5bd2d; border-right: 45px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;" data-ke-size="size23"><span style="position: relative; bottom: -10px; font-weight: 600; color: #fff;">https://galam.tistory.com/폴더 소제목 3</span></h3>
<div style="border-top: 3px solid #5ba50c; margin-top: 0px; margin-bottom: -10px;">&nbsp;</div>

---

728x90

 

 

포스트잇 소제목 1

 

<div style="height: 55px; background-color: #00a0e9; margin: 5px auto;">
<div style="width: 0; height: 0; border: 15px solid white; border-bottom-color: #214363; border-right-color: #214363;">&nbsp;</div>
<h3 data-ke-size="size23"><span style="position: relative; bottom: 45px; left: 50px; font-weight: bold; color: #ffffff;">galam/포스트잇 소제목 1</span></h3>
</div>

---

 

 

포스트잇 소제목 2

 

<div style="height: 55px; background-color: yellowgreen; margin: 0.5em auto;">
<div style="width: 0; height: 0; border: 15px solid white; border-bottom-color: #5a771e; border-right-color: #5a771e;">&nbsp;</div>
<h3 data-ke-size="size23"><span style="position: relative; bottom: 45px; left: 50px; font-weight: bold; color: #ffffff;">포스트잇 소제목 2</span></h3>
</div>

---

 

 

포스트잇 소제목 3

 

<div style="height: 55px; background-color: #920783; margin: 5px auto;">
<div style="width: 0; height: 0; border: 15px solid white; border-bottom-color: #d7a3d1; border-right-color: #d7a3d1;">&nbsp;</div>
<h3 data-ke-size="size23"><span style="position: relative; bottom: 45px; left: 50px; font-weight: bold; color: #ffffff;">galamm/포스트잇 소제목 3</span></h3>
</div>

---

 

 

 

책갈피 소제목 1

 

<div style="position: relative; padding: 0px 25px 0px 50px; margin-bottom: 50px; border-top: 1px solid #d9d9d9;">
<div style="position: absolute; top: -1px; left: 10px; width: 30px; height: 40px; background-color: #bd59d4;">&nbsp;</div>
<div style="position: absolute; top: 10px; left: 10px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #ffffff transparent;">&nbsp;</div>
<h3 data-ke-size="size23"><span style="position: absolute; top: 5px;"><b>책갈피 소제목 1</b></span></h3>
</div>

---

 

 

 

책갈피 소제목 2

 

<div style="position: relative; padding: 0px 25px 0px 50px; margin-bottom: 50px; border-top: 1px solid #d9d9d9;">
<div style="position: absolute; top: -1px; left: 10px; width: 30px; height: 40px; background-color: #2c6ed5;">&nbsp;</div>
<div style="position: absolute; top: 10px; left: 10px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #ffffff transparent;">&nbsp;</div>
<h3 data-ke-size="size23"><span style="position: absolute; top: 5px;"><b>책갈피 소제목 2</b></span></h3>
</div>

---

 

 

 

책갈피 소제목 3

 

<div style="position: relative; padding: 0px 50px 0px 20px; margin-bottom: 50px; border-top: 1px solid #d9d9d9;">
<div style="position: absolute; top: -1px; right: 15px; width: 30px; height: 40px; background-color: #fe3e64;">&nbsp;</div>
<div style="position: absolute; top: 10px; right: 15px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #ffffff transparent;">&nbsp;</div>
<h3 data-ke-size="size23"><span style="position: absolute; top: 5px;"><b>galam/책갈피 소제목 3</b></span></h3>
</div>

---

 

 

 

책갈피 소제목 4

 

<div style="position: relative; padding: 0px 25px 25px 50px; margin-bottom: 10px; border: 1px solid #d9d9d9;  background-color: #fff;">
<div style="position: absolute; top: -1px; left: 10px; width: 30px; height: 40px; background-color: #bd59d4;">&nbsp;</div>
<div style="position: absolute; top: 10px; left: 10px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #fff transparent;">&nbsp;</div>
<h3 data-ke-size="size23"><span style="position: absolute; top: 5px;"><b>galam/책갈피 소제목 4</b></span></h3>
</div>

---

 

 

 

책갈피 소제목 5

 

<div style="position: relative; padding: 0px 25px 25px 50px; margin-bottom: 10px; border: 1px solid #d9d9d9; background-color: #fff;">
<div style="position: absolute; top: -1px; left: 10px; width: 30px; height: 40px; background-color: #fe3e64;">&nbsp;</div>
<div style="position: absolute; top: 10px; left: 10px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #fff transparent;">&nbsp;</div>
<h3 data-ke-size="size23"><span style="position: absolute; top: 5px;"><b>galam/책갈피 소제목 5</b></span></h3>
</div>

---

 

 

 

책갈피 소제목 6

 

<div style="position: relative; padding: 0px 50px 25px 20px; margin-bottom: 10px; border: 1px solid #d9d9d9; background-color: #fff;">
<div style="position: absolute; top: -1px; right: 15px; width: 30px; height: 40px; background-color: #00ad5f;">&nbsp;</div>
<div style="position: absolute; top: 10px; right: 15px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #fff transparent;">&nbsp;</div>
<h3 data-ke-size="size23"><span style="position: absolute; top: 5px;"><b>galam/책갈피 소제목 6</b></span></h3>
</div>

---

 

 

 

책갈피 소제목 7

 

<div style="position: relative; padding: 0px 50px 25px 20px; margin-bottom: 10px; border: 1px solid #d9d9d9; background-color: #e7eefd;">
<div style="position: absolute; top: -1px; right: 15px; width: 30px; height: 40px; background-color: #2c6ed5;">&nbsp;</div>
<div style="position: absolute; top: 10px; right: 15px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #e7eefd transparent;">&nbsp;</div>
<h3 data-ke-size="size23"><span style="position: absolute; top: 5px;"><b>galam/책갈피 소제목 7</b></span></h3>
</div>

---

 

우측 사선 소제목 1

 

<h3 style="height: 0px; margin: 5px 0; border-top: 55px solid #ffe176; border-right: 50px solid rgba(0,0,0,0); border-radius: 50px 0 0 50px;" data-ke-size="size23"><span style="position: relative; top: -45px; margin: 25px; font-weight: 600; color: #000;">galam-우측 사선 소제목 1</span></h3>

---

 

우측 사선 소제목 2

 

<h3 style="height: 0px; margin: 5px 0; border-top: 55px solid #4272d7; border-right: 50px solid rgba(0,0,0,0); border-radius: 50px 0 0 50px;" data-ke-size="size23"><span style="position: relative; top: -45px; margin: 25px; font-weight: 600; color: #fff;">galam-우측 사선 소제목 2</span></h3>

---

 

우측 사선 소제목 3

 

<h3 style="height: 0px; margin: 5px 0; border-top: 55px solid #00b26f; border-right: 50px solid rgba(0,0,0,0); border-radius: 50px 0 0 50px;" data-ke-size="size23"><span style="position: relative; top: -45px; margin: 25px; font-weight: 600; color: #fff;">galam-우측 사선 소제목 3</span></h3>

---

 

그라데이션 포인트 소제목 1

 

 

<div style="background-color: #f9f9f9; border: 1px solid #e0e0e0; 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: 600;" data-ke-size="size23">그라데이션 포인트 소제목 1</h3>
<div style="width: 8px; height: 30px; background: linear-gradient(180deg, #ff5b00, #ffbb00); margin-top: -67px; border-radius: 4px;" data-ke-size="size16">&nbsp;</div>
</div>

---

 

그라데이션 포인트 소제목 2

 

 

<p data-ke-size="size16">&nbsp;</p>
<div style="background-color: #f9f9f9; border: 1px solid #e0e0e0; 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: 600;" data-ke-size="size23">그라데이션 포인트 소제목 2</h3>
<div style="width: 8px; height: 30px; background: linear-gradient(180deg, #0c3483 0%, #a2b6df 100%); margin-top: -67px; border-radius: 4px;" data-ke-size="size16">&nbsp;</div>
</div>

---

 

그라데이션 포인트 소제목 3

 

 

<div style="background-color: #f9f9f9; border: 1px solid #e0e0e0; 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: 600;" data-ke-size="size23">그라데이션 포인트 소제목 3</h3>
<div style="width: 8px; height: 30px; background: linear-gradient(180deg, #ff0844 0%, #ffb199 100%); margin-top: -67px; border-radius: 4px;" data-ke-size="size16">&nbsp;</div>
</div>

---

 

그라데이션 포인트 소제목 4

 

 

<div style="background-color: #eef2fb; border: 1px solid #a2b6df; 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: 600;" data-ke-size="size23">그라데이션 포인트 소제목 4</h3>
<div style="width: 8px; height: 30px; background: linear-gradient(180deg, #0c3483 0%, #a2b6df 100%); margin-top: -67px; border-radius: 4px;" data-ke-size="size16">&nbsp;</div>
</div>

---

 

그라데이션 포인트 소제목 5

 

 

<div style="background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); border: 1px solid #6a11cb; 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: 600; color: #dfe9f3;" data-ke-size="size23">그라데이션 포인트 소제목 5</h3>
<div style="width: 8px; height: 30px; background: linear-gradient(180deg, #dfe9f3 0%, #ffffff 100%); margin-top: -67px; border-radius: 4px;" data-ke-size="size16">&nbsp;</div>
</div>

---

 

티스토리 소제목 관련글 바로가기

티스토리 소제목 꾸미기 | 서식(HTML) 스타일 모음 part 1

티스토리 소제목 꾸미기 | 서식(HTML) 스타일 모음 #2

티스토리 소제목 꾸미기 | 두줄 소제목 서식(HTML) 스타일 모음

티스토리 소제목 꾸미기 | 서식(HTML) 모음, 그라데이션 스타일

티스토리 소제목 꾸미기 | 인용구 서식(HTML) 스타일 모음

티스토리 소제목 꾸미기(CSS 활용, 서식 활용)

 

"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다"