본문 바로가기
`
티스토리 블로그 팁/블로그 작성 팁 (기능)

CSS에서 티스토리 제목 크기 동일하게 바꾸기

by 그린핑거스 2022. 11. 28.

블로그에 글을 쓰다 보면 글 제목을 제외한 '소제목의 크기가 같았으면 좋겠다'라는 생각을 누구나 한번쯤을 해보셨을 겁니다.  저는 북클럽 스킨을 사용하고 있는데, 제목 1부터 제목 3까지 총 세 개의 제목을 문단 모양에서 선택해 사용할 수 있습니다. 

티스토리-문단모양

 

문단 모양의 제목이 어떻게 보이는지, 어떻게 하면 크기를 동일하게 바꿀 수 있는지 함께 살펴보도록살펴보도록 하겠습니다.

 

 

글쓰기의 제목

원하는 제목으로 설정하려면 문단모양 (첨부 아이콘 오른쪽)을 선택 후 원하는 제목(본문 2로 기본 세팅)을 선택하면 됩니다. 본문모양을 보여주는 곳에서도 제목 1,2,3의 크기가 다른 것이 확인됩니다.

티스토리-문단모양의-제목-종류

 

각각의 제목 1,2,3을 글쓰기 창의 기본 모드에 적어놓았는데, h1 ~ h4의 크기가 모두 다릅니다.

티스토리-기본모드

 

기본 모드가 아닌 html 모드에서 살펴보니  h2는 26px, h3는 23px, h3는 20px입니다. html에서 아무리 글씨 크기를 변경한다 해도 바뀌지 않습니다. 제목의 크기는 html이 아닌 CSS에서 바꿔야 하니 경로를 함께 찾아가 보도록 할게요~!!

티스토리-html

 

 

CSS에서 글씨 크기 바꾸기

 

설정⚙ > 꾸미기 > 스킨 편집 > HTML 편집 > CSS > Entry Content의 h1, h2, h3, h4의 폰트 사이즈가 다른 것을 알 수 있습니다. (h4는 생략)

티스토리-CSS-다른-글자크기

 

h1은 글 제목이므로 그대로 두고, h2 ~ h4까지 본인이 적당하다고 생각되는 크기로 동일하게 바꿔줍니다. 저는 h3의 글씨 크기가 적당해 보여 1.3em으로 바꿔줬습니다. 익숙한 px(픽셀)에 비해 em이라는 단위가 생소할 텐데, em은 반응형에 적용되는 단위라고 생각하면 됩니다.

티스토리-CSS-같은-글자크기

 

제목 h2 ~ h4의 폰트 크기를 1.3em으로 동일하게 바꾼 것을 미리보기로 본모습입니다. 바꾸지 않는 글 제목(h1)의 크기는 크고 h2 ~ h4의 크기는 동일한 것이 확인됩니다.

변경된-소제목-크기

 

간단하게 정리하자면 아래와 같은 크기입니다.

CSS에서 변경 기존 폰트 사이즈 변경한 폰트 사이즈
h1 (글제목) 1.67875em 그대로
h2 (소제목1) 1.5em 1.3em
h3 (소제목2) 1.3125em 1.3em
h4 (소제목3) 1.125em 1.3em

 

각 제목을 구분하기 위해 글씨 크기를 다르게 해 놓았을 텐데, 제 정서에는 글 제목을 제외한 소제목의 크기는 동일한 것이 보기 좋습니다. 저처럼 html에서 글씨 크기 바꾸고 답답해하는 분들이 계실 듯싶어 간단히 올려봤습니다.


제 경험이

작은 도움이 되길 바랍니다.


댓글