[티스토리] 글쓰기 중 기본 크기 이외의 글자(폰트) 크기 조절하기

 

안녕하세요?

코딩하는 모주부 입니다!

 

이번에는 구독자님의 요청이 있어서

티스토리에서 글자(폰트) 크기를 조절하는 방법을 알아볼 거에요!

 

기본적으로, 티스토리에서 제공되는 글씨의 크기는

아래와 같이 총 6가지가 있는 것으로 보입니다.

 

또한, 제목의 글자 속성에는 다음 글자와의

상하 자간 길이도 포함되어 있는 것으로 보입니다.

 

 

 

---

> 실제 크기 <

제목1 [ABC]

제목2 [ABC]

제목3 [ABC]

본문1

본문2

본문3

---

티스토리 상단에서

기본모드 --> HTML로 변경했을 때,

위의 텍스트 들은 다음과 같이 정의되어 있습니다.

 

각 텍스트들의 HTML 코드

 

일단, "제목" 이라고 되어있는 항목들은 <h> tag,

"본문" 이라고 되어있는 항목들은 <p> tag로

이루어 진 것을 확인할 수 있습니다!

(<h> tag는 head, <p> tag는 paragraph의 약어로써,

각각 제목과 본문을 의미한다고 보시면 됩니다.)

---

1. 제목 글자(폰트) 크기 변경

1.1 <h> tag 내부의 data-ke-size를 변경 해보자

h2-size26 [ABC]

h2-size24 [ABC]

h2-size20 [ABC]

h2-size16 [ABC]

h2-size12 [ABC]

h2-size4 [ABC]

 

<h> tag 내부의 data-ke-size를 변경한 코드

 

▶ 폰트 크기의 유의미한 변화는 없습니다

 

h2 tag내부의 data-ke-size 는

HTML의 기본 attribute가 아닌,

티스토리에서 임의로 만든 것으로 보입니다.

이 때문에 임의로 size를 변경해도 변화가 없는 것 같아요.

---

1.2 다양한 <h> tag를 사용해 보자

h1-size26 [ABC]

h2-size26 [ABC]

h5-size26 [ABC]

h6-size26 [ABC]

 

여러 종류의 <h> tag를 사용한 코드

 

 

▶ 크기의 변화가 있습니다!

---

HTML에서 <h> tag는

h1 부터 h6까지 있으므로

원하시는 크기를 선택해서 사용하시면 될 것 같습니다.

---

2. 본문 글자(폰트) 크기 변경

2.1 <p> tag 내부의 data-ke-size를 변경 해보자

size6-100% = 본문2

size8-100% =본문2

size10-100% = 본문2

size12-100% = 본문2

size14-100% = 본문3

size16-100% = 본문2

size18-100% = 본문1

size20-100% = 본문2

size22-100% = 본문2

size24-100% = 본문2

 

<p> tag 내부의 data-ke-size 를 변경한 코드

 

size 12/14/18 을 제외하고는,

모두 size와 관계없이 본문2와 같은 크기로

rendering되는 것을 확인 할 수 있습니다.

따라서 size를 변경해서는 원하는 크기를 얻을 수 없습니다.

---

2.2 <p> tag 내부의 style에서 font-size를 변경 해보자

size18-60%

size18-80%

size18-100% = 본문1

size18-150%

size18-200%

size18-250%

size18-300%

size18-400%

 

size12-60%

size12-80%

size12-100% = 본문2

size12-150%

size12-200%

size12-250%

size12-300%

size12-400%

size14-40%

size14-60%

size14-80%

size14-100% = 본문3

size14-150%

size14-200%

size14-250%

size14-300%

size14-400%

 

<p> tag 내부의 style에서 font-size를 변경한 코드

 

이런 식으로, 크기를 원하는대로 변경할 수 있습니다!

하지만, 티스토리에서 기본적으로 만들어지는 본문에서는

<p> tag 내부의 style에는 font-size 항목이 존재하지 않습니다.

 

따라서, <p> tag 안에 아래의 코드를 삽입 해 보시기 바랍니다.

style="font-size:200%"

 

유익한 시간이 되었나요?

 

한 줄에 서로 다른 크기의 글자를 섞는 방법은 다음 포스팅에서알아보아요!

 

그럼 즐거운 포스팅 되세요 :)