티스토리 소제목 꾸미기

티스토리 소제목 서식 모음 #2

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

시각적인 효과, 가독성 향상, 정보 전달 효과, 포스트 관리 용이성 등 포스트의 시각적 효과와 가독성, 정보 전달 효과 등을 향상하는 데 큰 도움을 줍니다.

💡 공지

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

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

소제목 서식 저장법

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

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

3. 'HTML'로 작성 후 필요한 부분을 수정합니다.

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

테두리 스타일

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

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

선 위치

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

태그 속성 (2042.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)

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

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

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

형광, 파스텔, 그라데이션 색상표와 컬러 코드 사이트 블로그의 소제목에 사용할 수 있는 색상표와 사이트입니다. 색상을 잘 이용하면 작은 차이지만 좀 더 고급스럽고, 멋지게 블로그를 만들

galam.tistory.com

짧은 제목용 소제목

글 위에 라인 소제목

<div style="border-bottom: 5px solid #000; width: 100px; margin: 0 auto; position: relative; bottom: -15px;">&nbsp;</div>
<h3 style="color: #000000; text-align: center; font-weight: bold;" data-ke-size="size23">글 위에 라인 소제목</h3>
<p data-ke-size="size16">&nbsp;</p>

글 위에 라인 소제목

<div style="border-bottom: 2px solid #f54f3d; width: 100px; margin: 0 auto; position: relative; bottom: -15px;">&nbsp;</div>
<h3 style="color: #f54f3d; text-align: center; font-weight: bold;" data-ke-size="size23">글 위에 라인 소제목</h3>
<p data-ke-size="size16">&nbsp;</p>

글위에 점선 스타일

<h3 style="text-align: center;" data-ke-size="size23"><span style="border-top: 8px dotted #f54f3d; padding: 0.3em 0em 0em 0em; font-weight: bold;" data-ke-size="size23">글위에 점선 스타일</span></h3>
<p data-ke-size="size16">&nbsp;</p>

밑줄 점선 스타일

<h3 style="text-align: center;" data-ke-size="size23"><span style="border-bottom: 8px dotted #f54f3d; padding: 0em 0em 0.3em 0em; font-weight: bold;" data-ke-size="size23">밑줄 점선 스타일</span></h3>
<p data-ke-size="size16">&nbsp;</p>

글 위에 점 3개 소제목

<div style="border-bottom: 18px dotted #f14c4c; width: 90px; margin: 0 auto; position: relative; bottom: -15px;">&nbsp;</div>
<h3 style="color: #000000; text-align: center; font-weight: bold;" data-ke-size="size23">글 위에 점선 6개 소제목</h3>
<p data-ke-size="size16">&nbsp;</p>

깔끔한 밑줄 스타일

<h3 data-ke-size="size23"><span style="border-bottom: 5px solid #f54f3d; padding: 0 0 0 0.2em; font-weight: bold;">깔끔한 밑줄 스타일</span></h3>
<p data-ke-size="size16">&nbsp;</p>

두꺼운 밑줄 스타일

<h3 data-ke-size="size23"><span style="border-bottom: 12px solid #dcf1fb; padding: 0 0 0 0.2em; font-weight: bold;">두꺼운 밑줄 스타일</span></h3>
<p data-ke-size="size16">&nbsp;</p>

형광 밑줄 소제목

<h3 style="padding: 2px 5px; font-weight: bold; background: linear-gradient(to top, #FF00FF 40%, transparent 40%); display: inline-block;" data-ke-size="size23">형광 밑줄 소제목</h3>
<p data-ke-size="size16">&nbsp;</p>

라인 소제목 1

<h3 style="border-bottom: 2px solid #ef6c57; text-align: left; color: #ef6c57; font-weight: bold;" data-ke-size="size23"><span style="background-color: #fff; position: relative; padding: 10px 15px 10px 0px; bottom: -19px;">소제목은 이곳 입력</span></h3>
<p data-ke-size="size16">&nbsp;</p>

라인 소제목 2

<h3 style="border-bottom: 2px solid #9b80ce; text-align: center; color: #9b80ce; font-weight: bold;" data-ke-size="size23"><span style="background-color: #fff; position: relative; padding: 10px 15px; bottom: -19px;">소제목은 이곳에 입력</span></h3>
<p data-ke-size="size16">&nbsp;</p>