[블로그 꾸미기] H태그 이용하여 본문 제목 꾸미기

H태그를 이용하여 본문 제목 꾸미기

이번 포스팅에서는 이 위에 있는 제목 같이 본문 제목을 꾸미는 방법에 대해서 알아보겠습니다!

예를 들면 이런 것!

위와 같이 제목을 달기 위해서는 h태그라고 하는 css 속성을 편집해주어야합니다.

먼저 티스토리 관리자 페이지에 접속합시다. 왼쪽에 보면 HTML/CSS 편집 탭이 있을텐데 클릭해줍시다.

탭을 클릭하셨다면 아래쪽에 style.css 라고 쓰여진 부분을 확인할 수 있습니다. 이 부분에 h태그 속성을 추가해보도록 하겠습니다.

먼저 .article 속성을 찾습니다. 그리고 아래 부분에 다음 내용을 추가해줍시다.

.article h9 {

display: block;

margin-top: 30px;

margin-bottom: 5px;

line-height: 30px;

border-left: 5px solid #4197B8;

border-bottom: 1px solid #f2f2f2;

padding: 0 10px 1px;

font-size: 17px;

color: #333;

}

추가 하셨다면 설정은 끝났습니다. 이제 본문에 글을 작성할 때마다 html 태그를 추가해 주셔야합니다.

글쓰기 탭에 가시면 위에 HTML 체크버튼이 있습니다.

체크 버튼을 누르시면 html 형식으로 편집할 수 있게 됩니다. 여기서 아까 추가했던 h9 태그를 사용해봅시다.

제목을 시작하기 전에 <h9>을 사용해주시고 제목을 마치면서 </h9>을 추가해주시면 됩니다.

한번 확인해보겠습니다. 저는 다음과 같이 추가해보았습니다.

미리보기로 확인해보도록 하겠습니다.

다음과 같이 적용이 잘 되는 것을 확인할 수 있습니다.

일단 html에서는 기본적으로 h1부터 h6까지의 태그를 사용하고 있다고 합니다. 그래서 저는 저만의 태그를 사용하기 위해서 h9으로 설정을 해주었습니다. 기존에 있던 h1~h6의 태그를 수정하여 사용하셔도 문제는 없습니다~

이상 포스팅 마치도록 하겠습니다!