티스토리 블로그 관리#4 - 소제목 꾸미기 (사각, 둥근 스타일)

티스토리 관리 관련 문서

1. 초기 세팅
2. 검색엔진 등록
3. 단축키 활용
4. 소제목 꾸미기
5. P태그 여백조정
6. 관련글 목록 만들기

티스토리 블로그를 하려면 기본적인 HTML 편집을 할 수 있어야 합니다. HTML은 Hyper Text Markup Language 의 약자로, 쉽게 말하면 웹페이지에 어떤 요소들이 들어가는 지 나타내는 규칙입니다. 예를 들어, 티스토리에서 제목에 해당하는 부분은 <h1> </h1> 태그 사이에 들어가고, 여기에 대한 서식은 <style> 태그를 이용해 정해줍니다.

간혹, 티스토리 블로그를 보다보면 예쁜 글상자, 예쁜 제목 박스 들을 보신 적이 있으실 것입니다. 이런 것들이 바로 HTML 편집을 통해 얻은 결과물들인데요. 어떻게 하는 지 알아보겠습니다.

목차

티스토리 블로그 소제목 서식

가장 많이 사용되는 티스토리 소제목 서식을 아래에 나열할 생각입니다. 그 전에 입맛에 맞게 수정할 수 있는 부분을 알아보겠습니다.

구분	태그	수정 가능
제목 수준	h2	h2, h3, h4 등으로 수정 가능
선의 존재	border-right-width border-left-width border-top-width border-bottom-width	0px 로 바꿔주면 선이 사라짐
선의 두께, 색깔	border-left border-right border-top border-bottom	#색상코드 15px solid;  원하는 색상, 두께, 실선여부 선택
높이	line-height	폰트 사이즈의 몇 배 정도 높이를 할지 선택 1.6 정도면 무난
바깥 여백	margin-right margin-left margin-top margin-bottom	SKIN에 이미 있어 굳이 입력하지 않아도 됨 마음에 안들면 숫자를 바꿔줌
배경색	backbround-color	#FFFFFF 이면 흰색
안 여백	padding	0px 0px 0px 10px (상 > 우 > 하 > 좌)

1. 니은(ㄴ), 무색 스타일

왼쪽 선은 두껍고, 아랫쪽 선은 얇게 표현하는 방식입니다. 일반적으로 사용되는 소스코드는 아래와 같습니다.

<h2 style= "box-sizing: border-box;
                  border-right-width: 0px;
                  border-top-width: 0px;
                  border-left: #F15F5E 14px solid;
                  border-bottom: #FFD8D7 1px solid;
                  line-height: 1.6;
                  margin-right: 0px;
                  background-color: #ffffff;
                  padding: 0px 0px 0px 10px; "
                 data-ke-size="size26"> <b> 소제목 내용 입력 </b></h2>

2. 니은(ㄴ), 유색 스타일

니은(ㄴ) 자로 감싸는 것은 같되, 안쪽 배경 색을 집어 넣었습니다.

<h2 style= "box-sizing: border-box;
                  border-right-width: 0px;
                  border-top-width: 0px;
                  border-left: #F15F5E 14px solid;
                  border-bottom: #FFD8D7 2px solid;
                  line-height: 1.6;
                  margin-right: 0px;
                  background-color: #eeeeee;
                  padding: 0px 0px 0px 10px; "
                 data-ke-size="size26"> <b> 소제목 내용 입력 </b></h2>

3. 왼선(| ), 무색 스타일

왼쪽에 바(Bar) 형태로 표시하는 깔끔한 스타일입니다. 주로 h2 보다 낮은 h3 등급의 제목을 달 때 많이 사용합니다.

<h2 style= "box-sizing: border-box;
                  border-right-width: 0px;
                  border-top-width: 0px;
                  border-left: #FFD8D7 10px solid;
                  border-bottom-width: 0px;
                  line-height: 1.6;
                  margin-right: 0px;
                  background-color: #ffffff;
                  padding: 0px 0px 0px 10px; "
                 data-ke-size="size26"> <b> 소제목 내용 입력 </b></h2>

4. 왼선(| ), 유색 스타일

바(bar) 형태인 것은 동일하면서 배경색을 넣은 스타일입니다. 바(bar) 형태만 사용하게 되면 가로선이 없어 제목이 눈에 딱 들어오지 않는 경우가 많은데 이와 같은 스타일을 통해 보완할 수 있습니다.

<h2 style= "box-sizing: border-box;
                  border-right-width: 0px;
                  border-top-width: 0px;
                  border-left: #FFD8D7 10px solid;
                  border-bottom-width: 0px;
                  line-height: 1.6;
                  margin-right: 0px;
                  background-color: #ffe8e7;
                  padding: 0px 0px 0px 10px; "
                 data-ke-size="size26"> <b> 소제목 내용 입력 </b></h2>

5. 박스 스타일

<h2 style= "box-sizing: border-box;
                  border-right: #9feec3 1px solid;
                  border-top:#9feec3 1px solid;
                  border-left: #9feec3 1px solid;
                  border-bottom: #9feec3 1px solid;
                  line-height: 1.6;
                  margin-right: 0px;
                  background-color: #eeeeee;
                  padding: 0px 0px 0px 10px; "
                 data-ke-size="size26"> <b> 소제목 내용 입력 </b></h2>

6. 둥근 스타일

요즘 유행하고 있는 둥근 스타일의 제목입니다. (1) 테두리가 필요 없기 때문에 테두리와 관련된 HTML 코드를 모두 지웠습니다; (2) 어느 정도 높이가 큰 편이 예뻐 line-height 속성을 기존 1.6 에서 2.0으로 수정하였습니다. (3) 둥근 모서리를 표현하는 border-radius 속성을 집어넣었습니다. ( 이때 픽셀값은 좌상, 우상, 우하, 좌하 순서입니다.)

<h2 style= "box-sizing: border-box;
                  line-height: 2.0;
                  margin-right: 0px;
                  background-color: #FFd8d7;
                  padding: 0px 0px 0px 10px;
                  border-radius: 15px 5px 15px 5px "
                 data-ke-size="size26">
                <span style= "color:#FFFFFF">
                 <b> 소제목 내용 입력 </b></span></h2>

예쁜 소제목 저장해놓고 계속 쓰기

소제목을 넣을 때마다 복잡한 HTML 을 편집하는 것은 어려운 일입니다. 따라서 티스토리의 '서식' 저장 기능을 사용하는 것이 편리합니다.

Step 1. 서식을 저장하기 위해 티스토리 관리자 모드에서 [서식관리] 탭에 접근합니다.

이동 방법 : 블로그 관리 홈 → 콘텐츠 → 서식 관리

Step 2. 저장해 두고자 하는 서식을 작성한 뒤 저장합니다. 서식 파일 하나에 소제목을 1개씩만 저장해도 되고, 저처럼 여러개를 저장 한 뒤에 불러온 뒤 지워가며 사용해도 됩니다.

Step 3. 티스토리 에디터의 추가 기능에서 [서식 추가] 기능을 사용하여 저장해둔 서식을 사용합니다.

참고자료

이상으로 티스토리 블로그에서 소제목을 사용하는 방법에 대해 알아보았습니다. HTML 이라는 새로운 개념을 익히는 게 쉬운 일은 아닙니다. 그러나 티스토리 블로그를 제대로 운영하기 위해서 언젠가 한 번은 넘어야 할 내용이니만큼 조금씩 익혀두는 편이 좋습니다.

문제는 한 번 익혀두어도 사용하다보면 자꾸 잊어버린 다는 것인데요. 그래서 저는 티스토리 블로그를 만들고 관리함에 있어서 필요한 내용들을 아래와 같이 정리하고 있습니다.

티스토리 블로그 관리#1 - 초기 세팅

티스토리 블로그 관리#2 - 검색엔진 등록

티스토리 블로그 관리#3 - 단축키 활용

티스토리 블로그 관리#4 - 소제목 꾸미기 (사각, 둥근 스타일)

티스토리 블로그 관리 #5 - P태그 여백 조정