간혹 다른분이 쓴 글을 보다보면 기본 편집툴에서는 보지 못한 이쁜글을 보게 된다. 그중 하나가 본문 소제목이다. 제목을 정하고 글을 쓰지만 글을 쓰다보면 그 안에서도 글을 나누고 싶을 때가 있다. 보통은 글자를 크게 하거나 숫자를 붙여서 소제목을 만들지만, html로 편집 가능한 소제목이 있어서 이렇게 포스팅 하려 한다.
■ 소제목 예시
소제목은 이런것을 말합니다.
▼지난번에 포스팅한 본문 글상자 만들기와 동일하게 서식을 저장하면 된다. 서식을 저장하는법은 이전글을 참고하자
티스토리 본문 글상자 만들기
블로그라는 게 내용이 가장 중요하지만 눈에 보기 예쁜 게 읽기도 좋은 법이다. 처음에 나 혼자 글을 쓸 때는 글상자라는 게 있는지 몰랐지만 다른 사람 블로그에도 가보고 하면서 티스토리의
tony4679.tistory.com
■ 소제목 코드
<h2 style="box-sizing: border-box; border-width: 2px 12px; border-bottom-style: solid; border-bottom-color: #000044; padding: 3px 10px; border-left-style: solid; border-left-color: #000044; margin: 5px 0px; letter-spacing: 1px;" data-ke-size="size26"><span style="font-size: 30px; font-family: 'Nanum Barun Gothic'; font-weight: normal; color: #000000;">소제목 검정 나눔바른고딕 </span></h2>
서식을 저장하는법을 배웠으면 노란색박스처럼 html을 편집하여 사용하면 된다. 아래 규칙에 따라 색깔, 문자크기, 문자 스타일을 바꿔서 사용하면된다. 나 같은 경우 본문 글자와 동일한 폰트로 바꿔서 사용했다.
아이콘 모양 규칙
letter-spacing: 1px; = 문자간격
margin: 5px 0px; = 위 아래 문단과의 여백, 양 옆여백
padding: 3px 5px; = 아래바와 문자간격, 왼쪽바와 문자간격
border-width: 2px 12px; = 아래바 두께, 왼쪽바 두께
line-height: 1.2; = 왼쪽바 높이
border-bottom-color: #000044; = 아래바 색깔
border-left-color: #000044; = 왼쪽바 색깔
폰트 규칙
font-family: 'Nanum Barun Gothic'; = 문자 스타일
color: #000000; = 문자 색깔
font-size: 30px; = 문자 크기
이렇게 하면 다양한 소제목을 만들 수 있다. 자신에게 맞는 소제목을 만들에서 서식에 저장해 두고 쓰면 나만의 독창적인 글을 쓰는데 도움이 될 수 있다.
