티비 스킨 사이드바 여백 현상, 폰트 크기 수정하기 <1부>

티비 스킨 사이드바 여백 현상, 폰트 크기 수정하기 <1부>

  티비님이 만드신 티비 스킨, 또는 Life in mono 종결 스킨은 매우 유용한 스킨이지만 일부 불편한 점들도 있습니다. 바로 사이드바의 여백 현상과 사이드바와 댓글창의 폰트 크기이죠.

 

  때문에 먼저 1부에서는 티비 스킨 사이드바의 여백 현상과 댓글 폰트 크기를 수정하는 방법을 알아보고, 2부에서는 사이드바의 폰트 크기를 수정하는 법을 알아보도록 하겠습니다.

 

 

 

1. 스킨 사이드바 여백 현상 수정하기

 

 

 

  티비 스킨의 사이드바를 보면 사진처럼 이상하게도 글씨가 표시되지 않아 빈공간이 남은 메뉴들이 있습니다. 최근 포스트, 최근 댓글, 링크 등의 메뉴가 여기에 해당하죠. 특히 광고나 위젯 등을 달기 위해 사이드바 너비를 확장시킨 블로그에서는 이런 현상이 더욱 두드러집니다.

 

  하지만 이것을 고쳐보겠다고 ‘HTML/CSS 편집’에서 Skin.html과 Style.css의 설정을 열심히 바꿔 봐도 그대로입니다. 원인은 다른 곳에 있기 때문이죠.

 

 

 

 

  ‘HTML/CSS 편집’ 메뉴에서 3칸 내려와서 ‘화면설정’ 메뉴를 클릭합니다.  이제 오른쪽 화면으로 가면 위쪽에 3가지 탭이 있습니다. 이 중에서 ‘화면 출력’ 탭을 클릭합니다. 화면이 바뀌고 맨 아래쪽을 보면 ‘사이드바’ 메뉴가 보이는데 여기에 딸린 하위 메뉴들을 설정해주면 됩니다.

 

 

  처음에는 20글자가 좀 넘는 정도로 맞춰져 있을 텐데 40글자나 36글자 등으로 바꿔줍니다. 주의할 점은 폰트 크기에 따라서 적정 글자 수가 있다는 겁니다. 폰트 크기가 작고 사이드바가 넓은 경우에는 40글자로 설정해도 좋지만 그렇지 않고 사이드바가 좁거나 폰트 크기가 크다면 40글자 아래로 설정 하는 것이 좋습니다.

 

티비스킨 사이드바 글자 수 설정 수정 전(왼쪽)과 수정 후(오른쪽)  모습 

 

 

  이제 결과물을 보면 사이드바의 빈공간이 사라진 것을 볼 수 있죠.

 

 

 

 

 

2. 댓글창, 댓글 작성자, 댓글 내용 폰트 수정하기

 

  티비 스킨의 댓글창 크기 자체는 좋은 편이나 댓글 폰트 크기가 작다는 단점이 있습니다. 댓글창에 표시되는 폰트 크기와 아래 표시되는 댓글의 폰트 크기가 너무 작아서 눈이 피로감을 줄 때가 있죠. 하지만 티비 스킨 자체 CSS가 독특해서 다른 스킨에 적용되는 폰트 수정법 대로 했다간 낭패를 볼 수 있습니다.

 

  ‘HTML/CSS 편집’을 해야 하기 때문에 먼저 스킨 백업을 해줍니다. 여기서 수정할 부분은 모두 3곳입니다. 순서대로 댓글창에 표시되는 폰트 크기, 댓글 작성자 폰트 크기, 댓글 내용 폰트 크기이죠.

 

 

 

input {vertical-align: middle; }

textarea {padding:5px; font-size:12px; }

 

/* 태그 */

#taglog ul, #tagbox ul { }

 

 

  댓글창에 표시되는 폰트 크기는 Style.css 창에서 찾을 수 있습니다. Ctrl + F 를 눌러서 ‘/* 태그 */’ 를 검색하면 빠르게 찾을 수 있습니다. 위와 같은 부분을 찾았으면 ‘/* 태그 */’ 위쪽에 textarea 부분을 주목합니다. 괄호 사이의 두 번째 부분에 font-size 부분이 바로 폰트 크기를 조절해 주는 곳입니다. 여기에 마음에 드는 값을 입려하시면 됩니다. 개인적으로는 16px를 추천합니다.

 

 

 

  이제 댓글 작성자 폰트 크기와 댓글 내용 폰트 크기를 수정 해 보겠습니다. 아까와 마찬 가지로 Ctrl + F 를 눌러 ‘/* 방명록&댓글 */’ 검색해서 아래 부분을 찾아줍니다.

 

 

 

 

/* 방명록&댓글 */

#guestbook .container {padding:19px 20px 33px 20px; }

#guestList {margin-top:10px; }

 

#guestList .name, .commentList .name {float:left; width:200px; overflow: hidden; margin-right: 10px;}

#guestList .wrapper, .commentList .wrapper {float:left; }

#guestList .name, #guestList .name a, .commentList .name, .commentList .name a {color:#525252; font:bold 12px/16px dotum; }

#guestList .wrapper, #guestList .wrapper a, .commentList .wrapper, .commentList .wrapper a {color:#7B7B7B; }

#guestList p, .commentList p {padding-bottom:1px; font:12px/18px 'NanumGothic'; }.

#guestList .date, .commentList .date {font:10px/16px tahoma; }

#guestList .wrapper .control, #guestList .wrapper .control a, .commentList .wrapper .control, .commentList .wrapper .control a {color:#B8B8B8; font:12px/16px tahoma;

 

 

 

  여기서 굵은 글씨로 ‘#guestList .name, #guestList .name a’ 로 시작하는 부분이 댓글 작성자 폰트 크기를 결정하는 곳입니다. 해당 부분을 쭉 따라가다 보면 font;bold 다음에 숫자가 2개 나올 겁니다. 이 숫자들을 자신이 원하는 폰트 크기로 바꿔줍니다. 개인적으로는 16px/20px 또는 18px/22px 가 적당한 것 같습니다.(앞의 숫자가 폰트 크기 / 뒤에 숫자가 공간 크기이므로 두 숫자간 차이는 유지해 주는 것이 좋습니다.)

 

  다음 굵은 글씨로 ‘#guestList p, .commentList p’ 로 시작하는 부분이 댓글 내용의 폰트 크기를 결정하는 곳입니다. 여기도 역시 font 부분을 찾아줍니다. font 다음이 숫자로 되어 있는데 이 부분을 자신이 원하는 폰트 크기로 바꿔 줍니다. 16px/22px를 추천합니다.

 

 

  이제 결과물을 보실까요?

 

 

 

 

  댓글창, 댓글 작성자, 댓글 내용의 폰트 크기가 모두 커진 것을 볼 수 있습니다.

 

  이어지는 2부에서는 티비스킨 사이드바 메뉴의 폰트 크기를 수정하는 법을 알아보도록 하겠습니다. 가시기 전에 공감 버튼을 꾹! 눌러주시고 댓글을 달아 주세요.

 

 

 2014/11/30 - 티비 스킨 사이드바 여백 현상, 폰트 크기 수정하기 <2부>