fast boot 스킨에서 강제로 글자 크기 바꾸기

 티스토리 블로그를 하면서 아쉬운 점이 몇 가지 있는데요. 그 중에서 하나가 아무래도 글자의 크기 변경이 아닌가 싶습니다. 1페이지부터 계획적으로 문단의 간격이나 제목, 본문 내용, 강조 등의 글씨 크기를 정했다면 나중에 글이 많이 쌓여도 크게 염려할 필요는 없지만 아무래도 티스토리 초창기에는 멋모르고 이것 저것 건들이다 뒤돌아 보면 글자체 및 폰트의 크기가 달라서 가독성이 떨어지는 것 같아 아쉬울 때가 있습니다.

 티스토리에는 일단 두 가지 타입의 글이 존재 하신다고 보면 됩니다. 

첫째로 티스토리 글쓰기 눌러서 바로 쓰는 글입니다. 사전에 설정에서 정해 놓은 폰트와 글자체로 써집니다. 둘째로는 위의 그림에서 18pt, 24pt로 글자의 크기를 임의로 바꾼 경우 입니다. 위의 두 가지 타입의 글을 HTML모드에서 보게 되면

 기본 글꼴에는 좌우로 붙는 HTML은 <p>와</p> 뿐인데요. 임으로 글자의 크기를 바꾸면 다른 언어가 앞뒤로 <span style="font-size: 18pt;>및 </span>이 첨부 된 걸 알 수 있습니다.

 본인의 티스토리 블로그에 포스팅 갯 수가 얼마 없다면 일일이 수정해서 드래그 후에 글자 크기를 조정해 주면 되지만, 포스팅의 숫자가 100개가 넘어 간다면 쉽지 않은 일입니다. 그런데 티스토리가 좋은 것은 자유도가 있다는 것이지요. fast boot 반응형 스킨에서 쉽게 글자체를 바꿀 수 있습니다. 

 설정창에서 HTML/CSS 모드를 눌러서 스킨편집으로 들어 가셔서 CSS를 누른 후에 검색으로 *@post-body-font-size* 라고 찾습니다. 그러면 아래와 같은 구문이 나오는데요. 

.article {   color:#000;   font-size:/*@post-body-font-size*/12px/*@*/;   word-break:break-all;   word-wrap:break-word;   overflow:hidden; }

 문자열 중에 12px에 있는 숫자를 바꾸면 일괄적으로 전체 본문의 폰트 크기가 바뀌어 집니다. 

이렇게 잘 정리 되면 좋습니다만, 위에서 먼저 언급한 '임의로 바꾼 폰트'가 문제가 됩니다. 크기가 바뀌지 않습니다. 위의 방법으로 폰트 크기를 바꾸면 아래 와 같이 처음 글쓰기 때 티스토리에서 제공되는 기본 폰트의 크기만 바뀌게 됩니다. 

폰트 크기는 기본으로 fast foot에는 12px로 되어 있습니다.

 이것을 아래처럼 20px로 바꾸어도

 임의로 글자 크기를 바꾼 것은 꿋꿋하게 자신의 길을 가며 크기의 변화가 없습니다. 

 저도 초창기에 <span style= ..... 이 들어간 글의 크기를 바꾸려고 무던히도 노력을 해봤는데, HTML 1도 모르는 사람으로 약 20여 일은 그냥 보내고 시간이 날 때마다 수정으로 들어가서 전체 글자를 드래그 한 후에 고쳐 주곤 했습니다. 그런데, 수정하면서도 안타까운 것이 티스토리의 폰트 크기 단위는 6>9>10>12>14>18>24>36의 단위로 바뀐 다는 것입니다. 저의 눈에는 12보다는 크고 14보다 작은 13pt가 딱 좋아 보이는데 없으니 울며 겨자 먹기 식으로 12pt로 바꾸었습니다. 

(한 때는 광고 욕심이 나서 14pt에 자간을 180~200으로 벌려서 중간에 광고를 꾸겨 넣었는데, 좀 반성하고 돌려 놨습니다.)

 그러던 중에 어떻게 운이 좋게 검색을 하다가 'Sonylove'님이라는 분의 블로그 포스팅 을 찾았습니다. 그런데 말입니다. 또 문제가 생기더군요. 분명히 그분이 말하는대로 한 거 같은데 글자의 크기는 같았습니다. 정독을 몇번 해보니까 반응형 스킨이더라도 CSS문구에서 본문을 가르키는 글이 다르더군요. 그제서야 문구를 알맞게 고치니까 아래 처럼 '임의로 바꾼 글도 원하는 크기로 바뀌는 것을 확인 했습니다. 

 여러분도 Sonylove님 블로그 링크 에 가셔서 찬찬히 읽어 보시고 도움 받아 보시길 바랍니다. CSS 구문을 바로 복사해서 쓰실 수 있습니다. 

 빨간 선 위가 아까 검색으로 찾았던 구문의 끝이고 빨간선 밑이 sonylove님이 올려 놓으신 CSS파일을 붙여 넣은 것입니다. 다만 한 가지 말씀 드리고 싶은 것은 그분 블로그에 가시면 노랙색으로 칠해진 .article 가 .post-content 라고 씌여 있는데 그분 반응형 스킨의 본문에 해당하는 것이니 fast boot 반응형 스킨 쓰시는 님들은 위의 그림 처럼 .article 이라고 변경 하신 후에 붙여 넣기 후 저장 하시면 전체 블로그 포스팅의 기본 글자 또는 임의로 변경한 글자 상관 없이 크기를 통일 시킬 수 있습니다. 

 또한 제가 알아낸 거 하나만 더 말씀 드리자면 위 그림에서 하트가 있는 부분의 숫자 2개는 스마트폰 등의 작은 화면에서의 폰트 크기 입니다. 2개만 바꾸시면 컴퓨터 화면에서의 폰트 크기는 변하지 않고 스마트폰에서만 폰트 크기를 바꿀 수 있습니다. 저의 경우에는 스마트폰 가독성이 18px가 좋더라고요. 테스트 해보시고 좋은 크기를 찾으시길 바랍니다. 

(불편 하시겠지만 sonolove님 블로그 찾아가서 CSS 구문을 복사해서 사용 하시길 바랍니다. 제가 복사해서 텍스트 파일 올려 드리는 것은 일도 아니지만, 저 또한 정말 안타까울 때 그 분의 블로그 도움을 받아서 이 정도 선에서 글을 맺겠습니다.)