티스토리 에디터 제목1~3, 본문1~3은 무엇일까?

수성비전자방입니다. 티스토리 글을 쓸 때 에디터의 왼쪽 위에서 제목1~3, 본문1~3 중에서 하나를 선택하실 수 있습니다. 글자 크기를 선택하는 것이 아니라 제목1~3, 본문1~3으로 나온 것 중 하나를 고르는 게 어색하신 분들도 있을 것입니다. 어떤 분들은 이것을 잘 이해하지 못해서 잘 활용 못하시는 분도 있더라고요. 오늘 제가 설명해 드리겠습니다.

목차

1. 티스토리 에디터 기본모드
2. 마크다운
3. ★필독★HTML
4. 제대로 활용하려면 스킨의 CSS를 수정해야 합니다.

티스토리 에디터 기본모드에서의 사용법을 알려드리고, 그것들이 마크다운 모드, HTML 모드에서 각각 어떻게 나타나는지 보겠습니다.
마크다운에서 제목1~3을 고르는 방법 또한 2번 문단에서 소개합니다.

1. 티스토리 에디터 기본모드

1.1. 티스토리에서 글쓰기를 하면 에디터의 왼쪽 위에 본문2라고 적힌 버튼이 보일 것입니다. 그 버튼을 클릭해 보세요.

1.2. 이러한 목록들이 나올 것입니다.

1.3. 에디터에서는 각각 이런 모습으로 나옵니다. 그러나 글을 올리고 보면 모습이 다를 것입니다. 왜 다른지는 3번 문단에서 HTML 소스 코드를 보면 알 수 있습니다. 그리고 이 문제에 대한 해결책은 4번 문단에서 알려드리겠습니다.

HTML 코드를 보기 전 마크다운부터 보겠습니다.

에디터의 오른쪽 위 '기본모드'를 클릭하면 마크다운 또는 HTML로 모드를 전환하실 수 있습니다.

2. 마크다운

위의 1번 문단과 같이 제목1~3, 본문1~3으로 글을 쓴 뒤, 마크다운 모드로 보면

## 제목1
 
### 제목2
 
#### 제목3
 
본문1
 
본문2
 
본문3

이렇게 나옵니다. 마크다운 문법을 아시는 분들은 이제 제목1~3은 어떤 의미인지 아시겠죠?
더 정확히 알기 위해서는 HTML 모드에서 어떻게 나오는지 봐야 합니다.
그리고 티스토리에서 마크다운으로 글을 쓰면서 왜 ##, ###, ####이 적용 안 되냐고 하시는 분도 있던데 이 글의 3~4번 문단을 꼭 읽어 보시기 바랍니다.

3. ★필독★HTML

<h2 data-ke-size="size26">제목1</h2>
<h3 data-ke-size="size23">제목2</h3>
<h4 data-ke-size="size20">제목3</h4>
<p data-ke-size="size18">본문1</p>
<p data-ke-size="size16">본문2</p>
<p data-ke-size="size14">본문3</p>

여기서 제목1~3은 각각 h2, h3, h4 태그가 적용된 것을 알 수 있습니다. 그리고 제목1부터 본문3까지 data-ke-size로 size26, size23, size20, size18, size16, size14가 적용된 것을 알 수 있습니다. 이것이 핵심입니다.

4. 제대로 활용하려면 스킨의 CSS를 수정해야 합니다.

기본모드에서 제목1~3, 본문1~3을 선택하든, 마크다운을 쓰든 제대로 활용하려면 스킨의 소스코드가 잘 구성되어 있어야 합니다.

4.1. 제목1은 왜 h1이 아니라 h2인가? h1 태그는 글 제목(posting)에만 딱 한 번 쓰는 것이 SEO 최적화에 도움이 됩니다. 스킨 제작자가 SEO 최적화에 관심이 있으면 이미 해줬을 거예요.
안 되어 있더라도 이건 사실 index.html에서 를 찾아서 그 양 옆을 <h1>과 </h1>로 감싸주시면 됩니다. 다만, 그러면 글 제목이 너무 커질 것입니다. 이제 style.css를 들어가셔서 h1 속성에서 font-size를 조정하시면 됩니다.

4.2. 제목1~3의 글꼴을 지정하려면 style.css에서 h2~h4의 속성을 변경하시면 됩니다.
블로그마다 스킨이 달라서 예시 코드를 넣기가 애매한데 4.1~4.2번은 수성비전자방 2022 스킨 수정기록 3편에서 다루었으니 해당 링크를 아래에 걸어드리겠습니다.
https://toopyo.tistory.com/entry/ssb2022skin-3-summary-thumbnail-article#s-3.3

4.3. 본문1~3의 글자 크기를 지정할 수도 있다고 합니다. 본문2의 글자 크기를 바꾸려면 p[data-ke-size]의 속성에서 font-size를 지정해 주면 된다고 하는데, 저는 해본 적이 없어서 다른 블로그의 글 링크를 아래에 걸어드리겠습니다. 퀴즈다모아 블로그의 글입니다.
https://sidongblog.tistory.com/627

제 글을 읽어 주셔서 감사합니다.

다음에 만나요!

수성비의 2in1 노트북은 갤럭시 북 Flex2입니다.(Windows 11)