티스토리 소제목 꾸미기 총정리(CSS, HTML 및 서식활용)

티스토리에서 CSS, HTML 및 서식을 활용하여 소제목 꾸미기 방법에 대해 알려드리겠습니다. 소제목을 이용하여 글을 작성하면, 문단 구분을 쉽게 할 수 있어 내용 파악이 쉬워집니다. 구글 SEO에 최적화에 유리하며, 글의 디자인 측면에서도 가독성이 좋아집니다.

 

 

목차
1. 소제목 꾸미기 요약
2. CSS 활용 소제목 꾸미기
3. HTML 및 서식 활용 소제목 꾸미기

 

 

 

1. 소제목 꾸미기 요약

글을 작성할 때, 소제목을 사용하는 이유는 독자들로 하여금 글을 쉽게 이해하도록 하는 것입니다. 그리고 구글 SEO에서 말하는 '최적화' 기준을 맞춤으로써, 구글에서 상위 노출 하는데 도움이 됩니다. 단순히 글만으로 소제목을 작성하는 것보다, 디자인적인 요소가 들어간다면 가독성이 훨씬 좋아집니다. 이는 글을 읽는 사람들의 체류시간을 늘리는 효과도 있습니다. 소제목을 꾸미는 방법은 크게 두 가지가 있습니다. CSS에 코드를 삽입하기와 HTML 및 서식을 활용한 방법입니다.

 

 

• 1. CSS 활용 : 코드생성 → 관리자 화면 → 스킨편집 → html편집 → CSS → 코드삽입 및 적용
• 2. HTML 활용 : 코드생성 → 관리자 화면 → 서식 관리 → 서식 쓰기 → HTML 모드에서 코드삽입 → 완료

---

 

2. CSS 활용 소제목 꾸미기

CSS를 활용한 소제목 꾸미기 방법입니다. 앞으로 설명드릴 소제목은 h3 기준으로 작성하였습니다. h2 또는 h4에도 추가하고 싶다면, 코드를 CSS에 해당 라인에 넣어주시면 됩니다.

 

 

1. CSS 코드 생성

h3에 적용될 소제목 코드입니다.

border-style: solid;
border-width : 0px 0px 1px 14px;
border-color: #000000;
background-color: #fff;
padding: 6px;

 

또 하나의 코드를 추가해 드리겠습니다.

padding: 15px 20px;
background-color: #70829a;
border-radius: 25px 5px 25px 5px;

단조로운 색이 아닌 두 가지의 색을 활용한 그러데이션이 필요하다면 코드를 변경해야 합니다.

• background-color: #색상코드; → background: linear-gradient(to right,#색상코드 1,#색상코드 2);

코드에 대해 설명드리겠습니다. 설명을 드린 이유는 개인의 취향에 따라 색상, 크기, 모양 등을 수정할 수 있기 때문입니다.

 

border-style	선 모양	solid(직선), dashed(네모 점선), dotted(동그란 점선), double(두줄선)
border-width	선 굵기	순서는 위, 오른쪽, 아래, 왼쪽
border-color	선 색깔	색상코드는 아래 링크를 참조
background-color	배경색
padding	간격	한 개는 간격, 두 개는 내부 여백(상하/좌우)
border-radius	라운드 크기	테두리 경계를 둥글게 만듬. 순서는 왼쪽위, 오른쪽위, 오른쪽아래, 왼쪽아래

 

색상코드 링크

Color Hex Color Codes

 

 

2. CSS 코드 삽입

앞서 만들었던 CSS 코드 중에 그러데이션이 적용되는 소제목을 설정해 보겠습니다. 순서는 다음과 같습니다.

 

• 관리자 화면 → 스킨편집 → html편집 → CSS → 코드 삽입 및 적용

 

1. 관리자 화면> 스킨편집> html편집> CSS로 이동합니다.

 

 

2. CSS 편집 → 마우스 클릭 및 Ctrl+F를 이용 entry 검색 → 1421번 entry-content h3로 이동합니다.

초기 북클럽 기준이며, 코드 입력 위치는 아래 그림과 같습니다.

 

.entry-content h3 {
   clear: both;
   margin: 29px 0 22px;
   font-size: 1.3125em;
   line-height: 1.5;
   color: #000;
                     <----------------- 여기에 입력
}

 

3. CSS에 코드 입력 → 적용 및 새로고침 실행

 

 

3. CSS 활용 소제목 꾸미기 적용

CSS에 코드 입력을 완료하였다면, 실제 글쓰기에 적용할 차례입니다. 소제목이 필요한 위치에 알맞은 내용을 쓰고 상단의 '제목 2'로 변경을 하면, 아래 그림처럼 적용이 됩니다. 초기 북클럽의 경우에는 글자색이 검은색(#000) 이어서, 글자가 잘 보이지가 않았습니다. 테스트로 글자색을 하얀색(#fff)으로 변경하였습니다.

 

소제목 꾸미기 적용

 

---

3. HTML 및 서식 활용 소제목 꾸미기

HTML과 서식을 활용한 소제목 꾸미기 방법입니다. 장점은 내가 원하는 스타일의 소제목을 서식형태로 여러 개 만들어서, 글의 내용에 맞게 사용할 수 있다는 장점이 있습니다. 단점이라고 말할 수 있는 부분은 개인에 따라서 많은 서식을 만들 수도 있다는 점입니다. 소제목 꾸미기 순서는 다음과 같습니다.

 

• HTML 코드 생성 → 관리자 화면 → 서식 관리 → 서식 쓰기 → HTML 모드에서 입력 및 저장

 

1. HTML 코드 생성 및 서식 저장

이 글에서 사용하고 있는 '제목 1' 서식을 적용하겠습니다. 좌측 녹색이 아니라 보라색으로 변경해 보도록 하겠습니다. 코드는 아래와 같습니다.

 

<h3 style="padding: 0.4em 1em 0.4em 0.5em; 
background: #efe8f2; 
margin: 0.5em 0em; 
color: #000000; 
border-left: #918ACE 10px solid;
"data-ke-size="size23">
<b>소제목</b></h3>

 

몇 가지 코드에 대해서 설명드리겠습니다.

margin	간격	margin-top(상단 간격), bottom(하단 간격)
border-left	왼쪽 선	border-right(오른쪽), top(위), bottom(아래)
font-weight	글자 두께	bold(굵게 표현)
letter-spacing	글간격	기본은 0px

 

1. 관리자 화면> 서식 관리> 서식 쓰기> HTML 모드로 이동합니다.

HTML 모드에서 복사한 코드를 입력하고 저장하면 서식이 완성됩니다.

 

 

 

2. HTML 및 서식 활용 소제목 꾸미기 적용

복사한 코드를 활용하여 실제 어떤 모습으로 적용되는지 살펴보겠습니다. 순서는 아래와 같습니다.

 

• 글쓰기 → 더 보기 → 서식 → 서식 선택

실제 적용된 모습은 아래와 같습니다.

 

3. 소제목 HTML 코드 공유

글에서 소개해 드린 코드 이외에 몇 가지의 코드를 알려드리겠습니다. 필요하신 분들은 활용하시기 바라겠습니다.

 

소제목 꾸미기 코드(티스토리).txt

0.00MB

 

소제목1

<h3 style="padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; 
border: 5px solid #f8cee1; 
background-color: #e4d3ea; 
font-weight: bold;
"data-ke-size="size23">소제목1</h3>

 

소제목2

<h3 style="box-sizing: border-box; 
border-right-width: 0px; 
border-bottom: #c4c4c4 2px solid; 
margin: 5px 0px; 
border-left: #c4c4c4 10px solid; 
letter-spacing: 1px; 
line-height: 1.5; 
border-top-width: 0px; 
padding: 3px 5px 3px 5px;
"data-ke-size="size23">소제목2</h3>

소제목3

<h3 style="background: linear-gradient(to right,#123751,#4e286c); 
color: #fff; 
font-size: 22px; 
font-weight: bold; 
margin-top: 30px; 
margin-bottom: 15px; 
padding: 15px 20px; 
border-radius: 25px 2px 25px 2px;
"data-ke-size="size23">소제목3</h3>

지금까지 티스토리 글쓰기에서 소제목을 꾸미는 방법에 대해서 설명하였습니다. CSS 또는 HTML을 활용하여 소제목을 활용하여 글을 쓰는데 도움이 되었으면 합니다.

 

티스토리 블로그 링크버튼 만들기 총정리

티스토리 블로그 링크버튼 만들기 총정리