HTML과 CSS로 탬플릿 디자인을 할때 타이틀 제목으로 사용할 태그에 대해서 미리 꾸며 놓는 경우가 있습니다.
저같은 경우는 블로그를 작성할때 Markdown으로 작성을 하는데 Headline 테그에 미리 CSS로 꾸며 놓으면 쉽고 빠르게 아름다운 글 모양을 나타낼 수 있습니다.

보통 h1 ~ h6 사이의 테그를 크기와 두께 라인 등을 이용하여 꾸밉니다. 아래에 정보를 남기니 참조해서 사용하시면 됩니다.

h1

Headline h1 타이틀 제목 입니다.

<h1>Headline h1 타이틀 제목 입니다.</h1>

h1 {
    margin: 2em 0 0.5em;
    padding: 0.2em 0;
    font-size: 3.4rem;
    font-weight: normal;
    line-height: normal;
    color: #333;
    border-bottom: none;
}

h2

Headline h2 타이틀 제목 입니다.

<h2>Headline h2 타이틀 제목 입니다.</h2>

h2 {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin: 2em 0 0.5em;
    padding: 0.2em 0;
    width: 100%;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: normal;
    color: #333;
    overflow: hidden;
}

h2:before {
    content: '';
    width: 0.6rem;
    height: 1.92rem;
    margin: 3px 0.3em 0 0;
    margin: 0.3rem 0.3em 0 0;
    background: #999;
}

h2:after {
    content: "";
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin: 5px 0 0 15px;
    margin: 0.5rem 0 0 1.5rem;
    border-top: 1px solid #dadada;
}

h3

Headline h3 타이틀 제목 입니다.

<h3>Headline h3 타이틀 제목 입니다.</h3>

h3 {
    margin: 2em 0 0.5em;
    padding: 0.2em 0;
    font-size: 22px;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: normal;
    color: #333;
}

h4

Headline h4 타이틀 제목 입니다.

<h4>Headline h4 타이틀 제목 입니다.</h4>

h4 {
    margin: 2em 0 0.5em;
    padding: 0.2em 0;
    font-size: 2rem;
    font-weight: bold;
    line-height: normal;
    text-indent: 0.5em;
    color: #333;
    background: url("data:image/svg+xml; charset=utf8 ,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%225%22%20height%3D%225%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%225%22%20height%3D%225%22%20style%3D%22fill%3A%23999%3B%22%20%2F%3E%3C%2Fsvg%3E") 0 50% no-repeat;
}