티스토리의 소제목을 좀더 예쁘게 꾸며 봅시다.

티스토리의 소제목을 좀더 예쁘게 꾸며 봅시다

 

안녕하세요~!!! 경제적 자유를 꿈꾸는 쭈니 파파 입니다.

 

지난글 형광펜 효과에 이어서 오늘은 소제목에 대해서 알아 보았습니다.

 

 

1. 소제목

예시>

소제목 1-1

 

코드>

<h3 style="padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; color: #000; border-left: 10px solid #009a87; border-bottom: 2px #009a87 solid; font-weight: bold;" data-ke-size="size23">소제목 1-1</h3>

 

 

예시>

소제목 1-2

 

코드>

<h3 style="padding: 0.6em 0.5em 0.6em 0.5em; margin: 0.5em 0em; color: #000; border-left: 10px solid #0f2443; border-bottom: 2px solid #e5e5e5; font-weight: bold;" data-ke-size="size23">소제목 1-2</h3>

 

 

예시>

소제목 1-3

 

 

코드>

<h3 style="padding: 0.6em 0.5em 0.6em 0.5em; margin: 0.5em 0em; color: #000; border-left: 10px solid #0f2443; border-bottom: 2px solid #e5e5e5; font-weight: bold;" data-ke-size="size23">소제목 1-3</h3>

 

 

 

2. 소제목

예시>

소제목 2-1

 

코드>

<h3 style="padding: 0.4em 1em 0.4em 0.5em; background: #e9efed; margin: 0.5em 0em; color: #000000; border-left: #00a667 10px solid; font-weight: bold;" data-ke-size="size23">소제목 2-1</h3>

 

 

예시>

소제목 2-2

 

코드>

<div style="background-color: #c7cfff; margin-top: 20px; margin-bottom: 15px; padding: 5px 10px;">
<h3 style="border-left: #1636f7 10px solid; padding: 0.2em 0.5em; margin: 0.2em 0em; color: #1636f7; font-weight: bold;" data-ke-size="size23">소제목 2-2</h3>
</div>

 

 

예시>

소제목 2-3

 

코드>

<h3 style="padding: 0.3em 0.5em 0.3em 0.5em; margin: 0.5em 0em; color: #000000; border-left: 10px solid #5b63fb; font-weight: bold;" data-ke-size="size23">소제목 2-3</h3>

 

 

예시>

소제목 2-4

 

코드>

<h3 style="padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; border: 5px solid #A9A9F5; background-color: #ececff; font-weight: bold;" data-ke-size="size23">소제목 2-4</h3>

 

 

 

예시>

소제목 2-5

 

코드>

<h3 style="border-radius: 15px 0px 15px 0px; padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; border: 5px solid #f6d258; background-color: #fcf3d4; font-weight: bold;" data-ke-size="size23">소제목 2-5</h3>

 

 

 

예시>

소제목 2-6

코드>

<h3 style="background: #fbd84b; color: #000000; font-weight: bold; margin: 1em 0em; padding: 15px 20px; border-radius: 20px 0px 20px 0px;" data-ke-size="size23">소제목 2-6</h3>

 

 

 

 

예시>

box-shadow 소제목 2-7

 

코드>

<h3 style="background: #bee9b4; color: #000000; font-weight: bold; margin: 1em 0em; padding: 15px 20px; border-radius: 25px 25px 25px 0px; box-shadow: 1px 3px 3px 0px #469789;" data-ke-size="size23">box-shadow 소제목 2-7</h3>

 

 

예시>

소제목 2-8

 

 

코드>

<h3 style="background-color: #fcf3d4; padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; border: 5px solid #f6d258; border-radius: 15px 15px 15px 0px; font-weight: bold; box-shadow: 5px 5px 5px #999;" data-ke-size="size23">box-shadow 소제목 2-8</h3>

 

 

3. 밑줄 소제목

예제>

밑줄 소제목 3-1

코드>

<h3 style="padding: 0.4em 1em 0.1em 0.2em; margin: 0.5em 0em; color: #000; border-bottom: 2px #888 dotted; font-weight: bold;" data-ke-size="size23">밑줄 소제목 3-1</h3>

 

 

예제>

밑줄 소제목 3-2

코드>

<h3 style="padding: 0.4em 1em 0.1em 0.2em; margin: 0.5em 0em; color: #000; border-bottom: 4px #f14c4c solid; font-weight: bold;" data-ke-size="size23">밑줄 소제목 3-2</h3>

 

 

 

예제>

밑줄 소제목 3-3

코드>

<h3 style="padding: 0.4em 1em 0.1em 0.2em; margin: 0.5em 0em; color: #000; border-bottom: 8px #f14c4c double; font-weight: bold;" data-ke-size="size23">밑줄 소제목 3-3</h3>

 

 

 

 

이상 제가 보았을때 블로그 포스팅 하면서 유용하게 쓰일만한 소제목들 한번 정리 해보았습니다.

 

매번 HTML로 보정 하기 힘드니깐.. 정말 자주 사용하는 제목의 경우 서식 기능을 활용해서 사용해야 겠습니다.