블로그 운영/블로그 고급설정

티스토리 글자크기 및 폰트 조절하는 방법 알아보자

Oliviamy 2023. 4. 3.
반응형

실제적으로 티스토리 글자 크기 및 폰트를 그러면 어떻게 조정할 수 있는지 간단히 알아보도록 하겠습니다. 우리가 사실 블로그를 운영 하면서 HTML , 또는 CSS를 정확히 알고 배우면 좋겠지만, 모든 것을 다 알 필요는 없는 것이니 여기서는 최소한으로 알아야 할 것만 공유해 보도록 하겠습니다.

 

1.글자크기 폰트


1.1. 폰트조절 영역

 

티스토리에서 기본적으로 글자 크기는 좌측 상단의 본문 1, 본문 2, 본문 3을 사용하면서 크기를 조정하여 사용할수는 있습니다. 하지만 우리는 기본적인 폰트 자체를 수정하고 싶은 것인데요. 이렇게 기본적인 서식에서의 폰트 자체 크기를 변경하기 위해서는 각 선택하고 사용하고 계신 '스킨(SKIN) ' 에 따라서 조금씩 다르게 편집될 수 있습니다.

 

1.2. 고래스킨 폰트, 줄간격

모든 스킨의 폰트 나 줄간격 변경은 방법은 같습니다. 다만 스킨에 따라서 본문 글자 크기나 줄간격을 찾을때 조금씩 'control + F' 하는 영문장이 달라져야 하는데요. 고래스킨의 경우에는 'e-content.post-content p'를 찾으시면 됩니다. 스킨편집에 들어 가는 방법은 티스토리 관리 - 스킨편집 - html 편집 - css 클릭 - 으로 들어가면 됩니다.

티스토리_스킨편집


스킨편집 클릭시 html편집- css로 들어가게 됩니다.

폰트사이즈_폰트크기_줄간격_조정
폰트조정 , 줄간격 조정

여기서 폰트사이즈 , 크기나 줄간격 조정을 하게 됩니다. 가장 적당한 크기는 보통 폰트 사이즈가 16px에서 18px 정도로 사용되는 편인데, 언론사나 인터넷 매체에서 가장 많이 쓴는 크기가 18px 정도이고 , 크게 사용한다면 20px 정도 사용하실 수
있습니다.

 

2.줄간격

 

줄간격의 경우에도 보통 1.6에서 높게 잡으면 1.9까지 사용하게 됩니다. 따라서 적절하게 줄간격을 사용하시되 , 가시성이 좋게 적용하시는 정도라면 1.8 정도가 적정합니다. 저 같은 경우에도 1.8을 적용하여 많이 사용합니다. 보통 줄간격을 찾으시는 경우에는 영문으로 'line-height'로 검색하신다면 , 본문글자의 줄간격을 찾으실 수 있으실 겁니다. 검색 시에는 'control + F'를 사용하시는 것은 모두 아시리라 생각합니다.


 

3. 스퀘어 (Square) 스킨 및 북클럽 스킨


 

3.1. 스퀘어 스킨 글자폰트 조정 및 줄간격

우선 글자폰트 조정을 위해서 '스킨편집'으로 들어가는 방법은 동일합니다. 티스토리 관리 - 꾸미기 - 스킨편집 - HTML편집 - CSS로 들어가면 됩니다.

블로그_글자폰트_em_px

스퀘어 (Square) 스킨에서는 'CSS'에 들어가셔서 'entry'로 검색하게 됩니다. 검색은 동일하게 control + F를 통해서 찾으실 수 있습니다. 여기에 나오는 font-size: 18px 정도 설정 하시면 너무 작지 않고 , 언론매체에서 많이 사용하시는 폰트 크기가 됩니다. 일반적으로 기본 설정 되어있는 폰트 크기는 15px정도입니다. 줄간격 조정은 다른 스킨과 마찬가지로 line-height를 찾으시어서 1.8 정도로 세팅 하시면 적당하며, 좀 더 넓게 넓게 사용하시려면 2.0 정도로 세팅하실 수 있습니다.

 

3.2. 북클럽 (Book Club) 스킨 글자폰트 및 줄간격

 

스킨이 다르지만, 관리 - 꾸미기 - 스킨편집 - HTML편집 - CSS 들어가는 것은 동일합니다. 다만 , 검색하셔야 하는 단어는 'entry'가 아니고 'entry-content p'로 검색을 하셔야 합니다.  또 하나 다른 점은 북클럽 스킨에서는 글자 폰트 크기를 px로 표현하지 않고 'em'으로 표현합니다.

 

대체적으로 북클럽 스킨의 글자 크기는 더욱 작아 보이는 편입니다. 기본 글자폰트 사이즈는 '0.9375'로 설정되어 있는 편입니다.  우선은 이 글자폰트 사이즈를 '1.1em'으로 바꾸어 주시면 글자 폰트가 커집니다. 그러면 참고로 글자 폰트를 표시하는 'em'과 'px'에 대해서만 간략히 정리해 두겠습니다.

 

4. 글자폰트


4.1. 글자 크기, 폰트 표시 방법

이것은 보통 CSS 공부하시면 기본이라고 하는데 , 표시 단위가 px, em, rem, %로 나타내게 됩니다. 이중 가장 기본적으로 표현하는 것이 px 단위입니다.

 

4.2. 절대표현 vs 상대표현

em

px와 em 은 사실 절대 단위와 상대 단위이 차이입니다. 즉, px는 절대 단위이고 em은 상대 단위입니다. 물론 이외에도 상대단위가 있지만, 브라우저에서의 기본 세팅되는 폰트 값은 16pt, 1em, 100% 라고 보실 수 있답니다.

 

px

반응형 에서는 적절하지 않은 것이 픽셀(px)이라고 보는데요. 이는 모니터에 따라서 크기가 상대적이라고 합니다. em 은 보통 basic, 부모 요소의 글꼴 크기를 의미한다고 합니다.

 

percent (%) 표시

퍼센트의 경우에는 박스 길이를 화면 크기에 맞추어서 사용하는 경우에 사용합니다. 이는 px로 표현하게 된다면 , 절대적인 수치로 공간이 모자라거나 남게 될 수 있으니 화면에 맞게 설정하기 위해서는 퍼센트 (%) 단위를 사용할 수 있습니다. 이상으로 티스토리 블로그 운영시 설정해야 하는 글자 크기나 폰트 조정에 대해 가장 필수적인 것만 잠깐 알아보았습니다.

 

글자 크기는 사실 '가시성, 가독성' 문제와 직결되기 때문에 블로그 운영수익에 영향이 없다고 할 수 없는 요소이기 때문에 , 블로그 안정화를 시키는 단계에서 한 번쯤 고민해 보셔야 할 요소 중 하나라 볼 수 있습니다. 티스토리 블로그 운영에 대해 궁금하시다면 아래 관련들들을 참고해 보시기 바랍니다.

2023.03.25 - [블로그 운영/블로그 고급설정] - CDN적용법, 워드프레스 웹하드 용량 줄이는 방법

 

CDN적용법, 워드프레스 웹하드 용량 줄이는 방법

CDN적용법, CDN서비스가 어떤 것이고 , 우리 블로거에게 필요한 것일까요? 워드프레스 블로그 운영 시에는 사실 대부분 웹하드 용량에 따라 이미지가 쌓이다 보면 용량이 쉽게 꽉차게 되고 , 더 용

knowledge.cat-dreaminvestment.com

2023.03.31 - [블로그 운영/블로그 고급설정] - 백링크 개념을 이해하기 위한 4가지

 

백링크 개념을 이해하기 위한 4가지

백링크 개념은 Website resource (웹상 리소스) 말하는데, 쉽게 말해서 다른 웹사이트를 가리키는 웹사이트 링크를 표현합니다 다른 사이트에서 우리의 웹사이트에 대한 언급과 주소가 남겨져 있다

knowledge.cat-dreaminvestment.com

2023.03.24 - [블로그 운영/블로그 고급설정] - 애드센스 고수익 비법_내부링크를 현재 창으로 열게 설정

 

애드센스 고수익 비법_내부링크를 현재 창으로 열게 설정

블로그를 운영하시다 보면, 내부링크 및 외부링크 설정이 블로그 최적화 지수에 많은 영향을 준다는 것을 배우게 됩니다. 개념이 조금 헷갈릴 수는 있지만, 기본적으로 블로그 지수에 영향을 주

knowledge.cat-dreaminvestment.com

 

반응형

댓글

💲 추천 글