티스토리 블로그 제목(h1~h4) 및 본문(p) 폰트 사이즈 조절

티스토리 블로그 에디터에서 포스팅을 작성하는 과정에서 폰트 사이즈(제목 1, 제목 2, 제목 3, 본문 1, 본문 2, 본문 3)를 활용하여 글을 작성하고 계실 겁니다. 여기서 각각의 폰트 사이즈를 조절하는 방법에 대해서 알아보겠습니다. 

 

■ 제목(h1~h4) 폰트 사이즈 조절하기

에디터 우측 상단을 보시면 기본적으로 '본문 2'로 세팅되어 있는 부분이 보이실 텐데, 이 부분을 눌러주시면 '제목 1, 제목 2, 제목 3, 본문 1, 본문 2, 본문 3'과 같이 폰트 사이즈를 조절할 수 있도록 되어 있는 부분이 보이실 겁니다.

티스토리 에디터 폰트사이즈 조절 메뉴

 

아마 다들 글을 작성하실 때 이미 사용하고 계실 것 같은데요. 여기서 선택되는 항목에 따라 정해진 폰트 크기로 글이 작성됩니다. 그런데, 이 크기가 마음에 들지 않아 수정하고 싶은 경우 수정하는 방법에 대해서 알아보고자 합니다.

 

위에서 보이는 '제목 1, 제목 2, 제목 3'은 HTML 태그에서 'h2, h3, h4'입니다. 그리고 'h1'은 바로 글의 전체 제목입니다. 따라서 CSS에서 h1, h2, h3, h4 부분을 수정해주면 되겠지요.

 

일단, HTML 편집으로 들어가서 CSS 편집 화면으로 갑니다. 

CSS파일 대략 1406번 열 부근부터 'Entry Content' 내용이 시작됩니다. 이 부분을 수정해주면 됩니다. 

CSS 파일 폰트 사이즈 수정부분

 

위에서부터 쭉 보시면 'entry-content h1', 'entry-content h2', 'entry-content h3', 'entry-content h4'가 보입니다. 여기서 각각의 font-size, line-height, margin, color 등의 속성을 알맞게 수정해주시면 됩니다. 

 

저는 제목들 간의 크기를 일정하게 유지해주고 싶어서 h2, h3, h4의 font-size를 모두 1.3em으로 통일하여 주었습니다. 

그 결과 아래 그림과 같이 제목 1, 제목 2, 제목 3의 폰트 사이즈가 모두 같게 변경되었음을 확인할 수 있습니다. 

폰트사이즈 변경 적용 결과

 

※ 참고로 위와 같이 폰트 사이즈를 변경하는 경우, 작성 완료된 글에서는 변경된 크기로 잘 변경되어 보이지만, 글을 작성 중일 때에는 에디터에서는 여전히 원래 상태 그대로 보입니다.

 

실제 작성된 글에서는 정상적으로 폰트 사이즈가 변경 적용되어 보일 테니, 글 작성 중에 왜 변경 폰트 사이즈가 적용되지 않는 건지 너무 혼란스러워하지 마시기 바랍니다.

 

■ 본문(p) 폰트 사이즈 조절하기

앞에서 제목의 폰트 사이즈를 변경한 것과 마찬가지로, 본문(p)의 글씨 크기가 너무 크거나 작아서 수정하고 싶다면 CSS파일 약 1439번 열부터 시작하는 entry-content p 부분에서 font-size를 수정해주면 됩니다.

 

초기 설정은 '0.9375em'으로 되어 있는데요, 저는 1.1em으로 수정하였습니다. 

 

 

이상으로 포스팅 작성 시 제목 및 본문의 폰트 사이즈를 조절하는 방법에 대해서 알아보았습니다. 

 

그 외에도 CSS 파일에서 필요한 항목의 여러 속성들을 수정하여 원하는 모습으로 설정해줄 수 있으니 Trial & Error를 통해서 원하는 모습으로 설정해보시기 바랍니다. 

감사합니다.