티스토리 블로그 본문 글 목차 서식 만들기

티스토리 블로그의 가독성을 높이기 위해 목차를 추가하고, '제목 1~3'에 밑줄과 박스를 적용했습니다. CSS를 활용한 제목 글씨체 변경과 더불어 본문 소제목 개선 프로젝트도 계획 중입니다. 이번 포스트에서는 목차와 제목 서식 개선에 초점을 맞추었습니다.

< 목차 >
📍목차 쓰는 이유.
📍목차 서식 만들기.
- 목차 서식 응용 편
📍본문에 제목을 쓰는 이유.
📍티스토리 소제목 CSS 편집 방법.
- 소제목 꾸미기 CSS 코드 분석

목차 쓰는 이유

목차를 쓰는 이유는 독자가 보기 편하기 때문이다

독자가 보기 편해야 블로그 유입량이 많아집니다. 구글의 유입량이 많은 블로그 글을 우선순위로 두기 때문입니다.

다만, 목차를 넣어야 우선순위로 올라가는 것은 아니니, 블로그를 시작하시는분이거나 운영중이신 분들은 본인의 블로그 개념에 맞게 운영하면 됩니다.

목차 서식 만들기

우선 티스토리 관리에 들어갑니다. 글쓰기가 아닌 '서식'을 클릭하여 작성합니다. 서식으로 쓰는 이유는 글을 쓸 때마다 불러와서 작성할 수 있기 때문입니다. 방법이 쉬운 대신에 글 쓸 때마다 서식을 불러와야 하는 번거로움은 감수해야 합니다.

아직 HTML 초보라면 서식을 이용하는 것을 추천합니다.

티스토리 관리➡️서식 작성➡️기본 모드에 아래 문구 작성➡️HTML 변화하여 코드 넣어주기➡️끝!

[기본 모드에서 아래 문구 작성 내용]

상위 네모 박스 '인용문구'를 사용하거나, 리스트를 이용해서 목차를 작성해줍니다.

1번 리스트
2번 리스트
3번 리스트

(제목 1 사용) 1번입니다.
(본문 2 사용) 1번 내용 작성

2번입니다.
2번 내용 작성.

3번입니다.
3번 내용 작성.

[HTML 모드로 변환 코드 넣기]

글쓰기 제목 위에 보면 '...' 세 개 있는 것 옆을 보면 '기본 모드'라고 되어 있습니다. '기본 모드'를 클릭

'HTML'를 클릭 해 주면 검은색 바탕화면에 코드와 함께 작성한 글이 보입니다. 'HTML'모드는 눈에 익혀 두는 게 좋습니다.

<ul style="list-style-type: disc;" data-ke-list-type="disc">
<li><a href="#no_1">1번 리스트</a></li>
<li><a href="#no_2">2번 리스트</a></li>
<li><a href="#no_3">3번 리스트</a></li>
</ul>
<p data-ke-size="size16"> </p>
<p id="no_1" data-ke-size="size16"> </p>
<h2 data-ke-size="size26">1번 입니다. (제목1)
</h2> <p data-ke-size="size16">1번 내용 작성. (본문2)</p>
<p data-ke-size="size16"> </p>
<p id="no_2" data-ke-size="size16"> </p>
<h2 data-ke-size="size26">2번 입니다. (제목1)</h2>
<p data-ke-size="size16">2번 내용 작성. (본문2)</p>
<p data-ke-size="size16"> </p>
<p id="no_3" data-ke-size="size16"> </p>
<h2 data-ke-size="size26">3번 입니다. (제목1)</h2>
<p data-ke-size="size16">3번 내용 작성. (본문2)</p>

목차 서식 넣기 응용 편

위에 핵심은 '1번 리스트'라고 작성한 것 앞 뒤로 보라색 밑줄 친 코드가 있어야 하고 1번입니다. 라고 작성한 글 앞 코드

부분에 [id="no_1"]이라는 코드가 들어가야합니다. 이 코드를 응용해서 인용 문구의 네모 박스를 이용해서 만들 수 있습니다. 표를 사용하거나 인용문구를 사용해서 리스트를 사용해서 링크 목차를 쉽게 만들어 볼 수 있습니다.

본문에 소제목을 쓰는 이유

소제목 작성 이유 및 CSS 코드 소개

본문 글의 소제목을 사용하면 정보를 수집하는 로봇들이 글을 파악하는 데 좋습니다.

정보 수집 로봇을 떠나, 제목을 사용하면 글이 더 전문적인 글처럼 보입니다.

제목으로 글을 나눠 주면 독자가 이해하고 보기 편리합니다.

그리고 제목으로 글을 나눠준 블로그 글을 보니 구글 애드센스 광고도 깔끔하게 들어가 있어서 광고가 글을 보는 데 있어 방해가 되지 않았습니다.

[본문 소제목 코드 소개]

h2은 제목 1입니다.
h3은 제목 2입니다.
h4는 제목 3입니다.

'h1'은 상단 본문 글 제목이기 때문에, 우리가 글을 작성할 때 쓰는 소제목 코드는 'h2'부터 시작합니다.

본문 소제목 꾸미기는 HTML 활용하는 법, CSS 활용하는 법, 서식 활용하는 법이 있습니다. 그중에서 CSS로 소제목을 꾸미는 법을 알아보겠습니다. 서식으로 하는 법도 굉장히 쉬우나 목차와 마찬가지로 매번 불러와서 작성해야 하는 번거로움도 있고 목차 서식과 같이 걸어야 하는 번거로움이 있어서 관련 글은 나중에 따로 작성할 예정입니다. 대신 서식을 이용한다면 매번 제목 서식을 다르게 작성하고 싶을 때 쓰기 좋습니다.

티스토리 소제목 CSS 편집 방법

티스토리 블로그 관리에서 스킨 편집을 들어갑니다. HTML 클릭 후, 상단에 CSS를 클릭합니다. 'Ctrl+F'로 'h2'를 검색하고, 아래 보라색 밑줄 친 코드를 넣어줍니다.

티스토리 블로그 관리➡️스킨 편집➡️HTML모드➡️CSS➡️'Ctrl+F'로 'h2' 검색
[코드 위치]
스킨마다 약간의 차이가 있습니다. 저는 티스토리 블로그 매거진 스킨을 이용했습니다.
.box_article .article_cont h2 {
font-size: 24px;
line-height: 1.38;
border-style: solid; 📍선모양
border-width : 0px 0px 1px 14px; 📍선 굵기/ 순서: 위, 오른쪽, 아래, 왼쪽
border-color: #c982f5; 📍선 색깔
background-color: #fff; 📍배경 색깔
padding: 10px; 📍간격
}

편집 적용하기 전에 새 로고 침해서 보려면, 제목 1~3으로 글을 작성하고 미리 보기 하면서 수정하는 걸 추천합니다.

아니면 크롬으로 오른쪽 마우스 클릭 누른 후, 검사를 이용해서 코드를 미리 보기 수정하고 사용해도 좋습니다.

색상은 'Google Colour picker' 이용해서 넣어주면 됩니다.

네모 박스를 만들고 싶다면,

'border-width'에 2px씩 동일하게 넣어주면 됩니다.

[소제목 꾸미기 다른 코드 소개]
마찬가지로 h2를 찾고 시작합니다.
코드가 들어가는 위치는 동일하나, 내용이 다릅니다.
저는 h3(본문 제목 2)에 적용해서 코드에 h3이 작성되어 있습니다.
.box_article .article_cont h3 {
font-size: 20px;
line-height: 1.4;
display: inline-block; /*글자 있는 것까지만 밑줄 설정*/
padding: 5px 10px; /*밑줄 간격*/
border-left: 20px solid #ffc2d0; /*왼쪽 선 두께 20px/ 선 스타일 solid 직선/ 칼라*/
border-bottom: 1px solid #ffc2d0; /*아래쪽 선*/
background-color: none; /*배경색 사용 안 함*/
}

소제목 꾸미기 CSS 코드 분석

solid CSS 코드를 검색하니 다른 선 스타일의 코드를 알려줘서 공유해 드립니다.

구글에 코드를 검색하면, CSS 코드나 HTML 코드를 알려주는 외국 사이트가 있어서 좋습니다.

직선: solid
네모 점선: dashed
동그란 점선: dotted
두 줄선: double

코드가 궁금해서 찾아보았는 데 <a href="#no_1">000 </a>과 <id="no_1">은 아래와 같다고 합니다.

href 속성은 링크가 이동하는 페이지의 URL을 지정합니다.
즉, 우리는 우리 본문 글의 제목에 링크를 걸게 되는 것입니다.
href 속성이 없으면 태크 <a>는 하이퍼링크가 아닙니다.
href="#top" 또는 href="#"를 사용해서 페이지 상단에 연결할 수 있습니다.
즉, 우리는 'href="#"를 사용해서 소제목으로 이동할 수 있게 만듭니다.
id 속성은 HTML 요소의 고유 ID를 지정하는 데 사용됩니다.
참고로 ID 이름은 대소문자를 구분하며, 이름은 하나 이상의 문자를 포함해야 하고 숫자로 시작할 수 없으며 공백(공백, 팁 등)을 포함할 수 없습니다.