티스토리 블로그를 운영하다 보면 본문 내용에 있어 글을 작성할 때 마다 편집이 필요한 경우가 있습니다. 티스토리 시작 전 css 편집을 한번 해 놓으면 추후 글을 작성할 때 편집 없이 css에서 설정해 놓은 데로 사용할 수 있습니다.
목차
1. 티스토리 시작 전 css 편집 – 제목 폰트 크기 설정
티스토리 시작 전 ccs 편집을 하지 않으면 티스토리에서 기본 세팅 된 폰트 크기로 제목 및 본문 내용을 작성해야 합니다.
티스토리 글 작성 화면에 보면 폰트 크기를 일부 수정할 수 있습니다. 제목1, 제목2, 제목3 으로 제목 폰트 크기를 설정할 수 있으며, 문단은 본문1, 본문2, 본문3 으로 본문 폰트 크기를 설정할 수 있습니다.
제목의 경우 h태그가 적용되므로 제목 순서에 맞게 배정해야 됩니다. 본인의 취향에 따라 다르지만 제목의 경우 폰트 크기를 똑같이 맞추는 분들도 있습니다. 저도 제목은 h태그 순서와 상관없이 제목의 폰트 크기는 모두 똑같이 지정을 합니다.
제목의 폰트 크기를 다르게 설정하시는 경우에도 티스토리에서 기본으로 제공되는 폰트 크기가 만족스럽지 않은 경우 폰트 크기를 각각 다르게 설정할 수 있습니다.
위 그림은 티스토리에서 블로그 글을 작성할 때 나타나는 제목과 본문의 폰트 크기를 보여줍니다. 위와 같이 글을 작성하고 난 후 실제 화면에서는 아래와 같이 폰트 크기가 출력됩니다.
글을 쓸 때 화면과 글 작성을 마무리 한 후 화면에서 보여지는 폰트 크기가 메인 제목을 제외하면 글 쓸 때 화면에서 표현되는 폰트 크기와 거의 유사한 것을 확인 할 수 있습니다.
이렇게 글을 쓸 때마다 폰트 사이즈를 조절하는 것보다 티스토리 시작 전 css 편집을 통해 미리 폰트 크기를 설정해 놓으면 편리하게 글을 쓸 수 있습니다. 그러면 어떻게 폰트 사이즈를 설정하는지 알아보겠습니다.
1-1. 제목 폰트 사이즈 설정 방법
티스토리 시작 전 css 편집을 통해 제목 및 본문 폰트 사이즈 설정을 하기 위해서는 먼저 블로그 관리 홈에서 꾸미기 섹션의 스킨 편집을 클릭해 줍니다.
스킨편집을 클릭한 후 스킨편집 화면에서 html 편집을 클릭해 줍니다.
html 편집을 클릭한 후 CSS를 클릭해 주면 아래와 같은 화면이 나타나게 됩니다.
이제 CSS화면에서 우리가 설정하고자 하는 제목 및 분문 폰트를 수정할 수 있는 곳을 찾아야 합니다. 우리가 찾고자 하는 곳으로 가기 위해서 CSS화면에서 Ctrl + F키(애플 Command + F)를 눌러서 검색창을 열어 Entry Content 라고 검색해 주면 Entry Content 글이 있는 곳으로 이동하게 됩니다.
이제 여기서 각 제목에 대한 폰트 크기를 변경 해 주면 됩니다. 위 화면에서 Entry Content 아래를 보게되면 entry- content h1, entry- content h2, entry- content h3, entry- content h4 를 확인할 수 있습니다. 이는 순서대로 h1 : 메인 제목, h2 : 제목1, h3 : 제목2, h4 : 제목3 입니다. 여기서 우리가 수정할 부분은 font-size에서 숫자 부분만 변경해 주면 됩니다. 숫자 부분을 변경하고 위 그름의 우측 상단 적용 버튼을 클릭하게 되면 화면에서 바로 폰트 크기를 확인할 수 있습니다.
entry- content h1의 font-size : 1.6em, 그리고 나머지 h2~h3 의 font-size : 1.4em 으로 설정해서 사용하고 있습니다. 폰트 크기는 본인이 원하는 크기로 수정해서 사용하시면 됩니다.
1-2. 본문 폰트 사이즈 설정 방법
티스토리 시작 전 css 편집을 통해 제목에 대한 폰트 사이즈 변경을 알아봤습니다. 제목 폰트 변경 화면의 entry- content h4 에서 조금 더 아래로 이동해 보면 entry-content p 아래 font-size 에서 숫자 부분을 변경하면 본문 폰트 사이즈를 변경할 수 있습니다.
폰트 변경 후 적용을 클릭하시면 화면에서 바로 본문 폰트 사이즈를 확인 할 수 있습니다. 개인적으로 저는 본문 폰트 사이즈를 font-size : 1.2em 으로 설정해서 사용하고 있습니다. 본인이 원하는 폰트 사이즈로 변경해서 확인해 본 후 가장 적합한 사이즈로 변경해서 사용하시면 됩니다.
1-3. 본문 리스트 및 표 폰트 사이즈 설정 방법
본문을 작성하다 보면 리스트 및 표를 작성하는 경우가 발생합니다. 그러나 본문 폰트를 적합한 사이즈로 조정을 하셨다고 하더라도 리스트 및 표에 대한 폰트는 변경되지 않습니다. 그래서 리스트 및 본문에 대한 폰트 크기도 조정을 해 주셔야 됩니다.
위 그림과 같이 본문 작성 중 리스트나 표를 사용하는 경우가 발생됩니다. 리스트 및 표의 폰트 크기를 본인의 취향에 맞춰 조정하시면 됩니다. 초기 세팅 값은 본문 폰트 크기와 동일하게 설정되어 있으며, 저 또한 본문 폰트 크기와 동일한 크기로 조정하여 사용하고 있습니다.
본문 폰트 수정 화면의 entry-content p 에서 조금 아래로 내려오면 entry-content ul li 및 entry-content ol li 를 확인할 수 있습니다.
entry-content ul li의 font-size에서 리스트의 폰트 사이즈를 변경할 수 있으며, entry-content ol li의 font-size에서 표의 폰트 사이즈를 변경 할 수 있습니다. 본인이 원하는 사이즈로 변경 가능하며, 저는 본문과 똑같은 font-size : 1.2em 으로 변경해서 사용하고 있습니다.
티스토리 시작 전 css 편집 만으로도 제목 및 본문 내용에 대한 폰트 크기를 사전 세팅을 하게 되면 추후 글 작성 시 아주 편리하게 사용할 수 있습니다. 많은 분들이 티스토리 시작 전 css 편집이 어렵다고 생각합니다. 그러나 천천히 따라 하면 쉽게 수정이 가능합니다.
이번 글에서는 티스토리 시작 전 css 편집을 통해 제목 및 본문에 대한 폰트 크기 조절하는 방법에 대해 알아봤습니다. 그러나 줄 간격, 폰트 색상 등 모두 css 편집을 통해 할 수 있습니다. 위 그림에서 line-height, color 에서 수정해 보시기 바랍니다.
내가 원하는 폰트 크기, 폰트 색상 등 모두 티스토리 시작 전 css 편집을 통해 얼마든지 수정해서 사용할 수 있습니다. 두려워 마시고 하나씩 도전해 보시기 바랍니다.
