워드프레스 또는 티스토리를 통해 블로그를 운영할 때 소제목 서식을 사용하면 시각적인 효과가 있고, 한 눈에 보기 쉬어 가독성이 향상 됩니다. 오늘 포스팅에서는 몇가지 추천드리는 소제목 디자인과 CSS 코드를 제공하겠습니다.

소제목 꾸미기

소제목 CSS 코드

소제목1

<h3 style="padding: 0.4em 1em 0.1em 0.2em; margin: 0.5em 0em; border-bottom: 4px #5B78FB solid;">소제목 1</h3>

소제목2

<h3 style="padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; border-left: 10px solid #5B78FB; border-bottom: 2px #5B78FB solid;">소제목 2</h3>

소제목3

<h3 style="padding: 0.3em 0.5em 0.3em 0.5em; margin: 0.5em 0em; border-left: 10px solid #5b63fb;">소제목 3</h3>

소제목4

<div style="background-color: #EEF3FF; margin-top: 20px; margin-bottom: 15px; padding: 5px 10px;">
        <h3 style="border-left: #5B78FB 10px solid; padding: 0.2em 0.5em; margin: 0.2em 0em;">소제목 4</h3>
    </div>소제목 1</h3>

소제목5

<h3 style="padding: 0.4em 1em 0.4em 0.5em; background: #EEF3FF; margin: 0.5em 0em; border-left: #5B78FB 10px solid;">소제목 5</h3>

소제목6

<h3 style="background: #EEF3FF; margin: 1em 0em; padding: 15px 20px; border-radius: 20px 0px 20px 0px;">소제목 6</h3>

소제목7

<h3 style="background: linear-gradient(to right, #7b2ff7 0%, #396afc 100%); color: #fff; font-size: 22px; margin: 0.5em 0em; padding: 15px 20px; border-radius: 20px 1px 20px 1px;">소제목 7</h3>

마무리

상단의 이미지에 사용하실 소제목을 아래의 코드를 활용해 여러분의 블로그를 멋지게 꾸며보세요.