티스토리 소제목 꾸미기 샘플

티스토리 소제목 서식

개요

티스토리 블로그의 기본 모드에서는 인용구 서식을 이용하여 소제목을 강조할 수 있습니다. 하지만 이 방법은 글의 구조를 명확하게 보여주지 못하고, 디자인적인 측면에서도 한계가 있습니다. 인용구 서식을 사용하면 h태그를 사용을 못하는 점도 아쉽습니다.

 

방법

티스토리 소제목도 이쁘게 꾸미고, SEO 작업도 가능한, 간단한 소제목 서식 코드 공유 합니다.

1) 에디터에서 오른쪽 상단 모드 메뉴에서 "HTML" 모드로 들어갑니다. 

2) 원하는 위치에 소제목 서식을 붙여주면 됩니다. 

<h4 style="box-sizing: border-box; border-right-width: 0px; border-bottom: #404040 2px solid; margin: 5px 0px; border-left: #404040 10px solid; letter-spacing: 1px; line-height: 1.5; border-top-width: 0px; padding: 3px 5px 3px 5px;" data-ke-size="size20"><span style="color: #006dd7;"><b><span style="color: #000000;">소제목 스타일 3(약한 검정)</span></b></span></h4>
<p data-ke-size="size16">&nbsp;</p>

3) 기본모드로 돌아와서 추가로 필요한 소제목 위치에 복불로 사용 하시면 됩니다.

4) 다른 색상이 필요 하실 경우 RGB 코드 사이트에서 RGB값만 변경해주시면 됩니다.

RGB 코드 사이트

 

샘플 및 따라하기 영상

<p data-ke-size="size16">&nbsp;</p>
<h2 style="box-sizing: border-box; border-right-width: 0px; border-bottom: #000000 2px solid; margin: 5px 0px; border-left: #000000 10px solid; letter-spacing: 1px; line-height: 1.5; border-top-width: 0px; padding: 3px 5px 3px 5px;" data-ke-size="size26"><b>소제목 스타일 3 (검정)</b></h2>
<p data-ke-size="size16">&nbsp;</p>
<h2 style="box-sizing: border-box; border-right-width: 0px; border-bottom: #FF0000 2px solid; margin: 5px 0px; border-left: #FF0000 10px solid; letter-spacing: 1px; line-height: 1.5; border-top-width: 0px; padding: 3px 5px 3px 5px;" data-ke-size="size26"><span style="color: #ee2323;"><b><span style="color: #000000;">소제목 스타일 3</span> (빨강)</b></span></h2>
<p data-ke-size="size16">&nbsp;</p>
<h2 style="box-sizing: border-box; border-right-width: 0px; border-bottom: #0000FF 2px solid; margin: 5px 0px; border-left: #0000FF 10px solid; letter-spacing: 1px; line-height: 1.5; border-top-width: 0px; padding: 3px 5px 3px 5px;" data-ke-size="size26"><span style="color: #006dd7;"><b><span style="color: #000000;">소제목 스타일 3</span> (파랑)</b></span></h2>
<p data-ke-size="size16">&nbsp;</p>
<h4 style="box-sizing: border-box; border-right-width: 0px; border-bottom: #404040 2px solid; margin: 5px 0px; border-left: #404040 10px solid; letter-spacing: 1px; line-height: 1.5; border-top-width: 0px; padding: 3px 5px 3px 5px;" data-ke-size="size20"><span style="color: #006dd7;"><b><span style="color: #000000;">소제목 스타일 3(약한 검정)</span></b></span></h4>
<p data-ke-size="size16">&nbsp;</p>
<h4 style="box-sizing: border-box; border-right-width: 0px; border-bottom: #CCCCFF 2px solid; margin: 5px 0px; border-left: #CCCCFF 10px solid; letter-spacing: 1px; line-height: 1.5; border-top-width: 0px; padding: 3px 5px 3px 5px;" data-ke-size="size20"><span style="color: #006dd7;"><b><span style="color: #000000;">소제목 스타일 3(약한 보라)</span></b></span></h4>
<p data-ke-size="size16">&nbsp;</p>