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

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

 

 

   1부에 이어서 2부에서는 사이드바 메뉴의 폰트를 수정하는 방법을 알아보도록 하겠습니다. 댓글 및 댓글창 폰트 수정과 사이드바 여백 현상 해결 방법은 1부에서 다룬 바 있으니 아래 링크를 클릭하시면 보실 수 있습니다.

 

 

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

 

 

  그럼 지금부터 본격적으로 사이드바 메뉴의 폰트 크기를 수정하는 방법을 알아보겠습니다. 먼저 ‘HTML/CSS 편집’ 메뉴를 누른 후 Skin.html 에서 폰트 크기를 수정하고 싶은 사이드바 메뉴를 검색합니다. 저는 여기서 ‘블로그 설명’ 모듈과 ‘링크’, ‘공지사항’, ‘최근 포스트’, ‘최근 댓글’ 모듈을 수정해 보겠습니다.(단, 1부에서도 말씀 드렸다시피 Life in Mono 기반의 티비 스킨을 기준으로 설명하기 때문에 다른 스킨에서는 적용이 불가능할 수도 있습니다.)

 

 

1. 블로그 설명 모듈 폰트 수정하기

 

  Ctrl + F 를 누른 후, ‘블로그 설명 모듈’ 을 검색합니다.

 

 

<!-- 블로그 설명 모듈 -->

<div class="boxMidR">

<div id="blogImage"><img src="https://t1.daumcdn.net/cfile/tistory/2741154F5288712429" alt="블로그 이미지" /></div>

<div id="blogDesc">아이스포그의 리드&리뷰는 책, 영화, 드라마를 전문적으로 리뷰하는 블로그입니다.</div>

</div>

<div class="boxBtmR"><div class="boxBtm-left"></div>

<div class="boxBtm-mid"></div><div class="boxBtm-right"></div></div>

</s_sidebar_element>

 

 

 

 

  ‘블로그 설명 모듈’ 은 소스 자체에 폰트를 정의하고 있는 부분이 없으므로 소스를 약간 바꿔줘야 합니다.

 

  굵은 글씨로 표시된 <div id="blogDesc"> 부분을

 

<div id="blogDesc" FONT style="FONT-FAMILY: 돋움, Dotum, sans-serif; FONT-SIZE: 9pt" color=#666666> 로 바꿔줍니다.

 

  그리고 붉은 글씨로 표시된 9pt가 바로 폰트 크기입니다. 원하는 크기의 숫자로 수정하도록 합니다. 개인적으로 11pt가 알맞은 것 같습니다. (‘FONT-FAMILY’ 부분은 글씨체이니 기호에 따라 원하는 글씨체로 수정하셔도 됩니다.)

 

  드래그 방지가 되어 있으니 아래 메모장 파일을 다운 받아서 설명대로 하세요.

 

 

  블로그 모듈 폰트 수정 방법.txt

 

 

 

2. 링크 모듈 폰트 수정하기

 

  다음은 ‘링크 모듈’ 입니다. Ctrl + F 를 눌러 검색하도록 합니다. 

 

<!-- 링크 모듈 -->

 

<div class="boxMidR2">

<img src="./images/favor.gif"></div>

<div class="boxMidR">

<div id="link">

<ul>

<s_link_rep>

<li>

<a href="" onclick="window.open(this.href); return false">

.</a>

 

 

  ‘링크 모듈’ 또한 블로그 설명 모듈과 마찬가지입니다.

 

  굵은 글씨로 표시된

<a href="" onclick="window.open(this.href); return false"> 부분을

 

<a href="" onclick="window.open(this.href); return false" FONT style="FONT-FAMILY: 돋움, Dotum, sans-serif; FONT-SIZE: 9pt" color=#666666>

로 바꿔 주시면 됩니다.

 

  그리고 붉은색 부분의 폰트 크기를 적당히 고쳐주도록 합니다. 개인적으로 11pt를 추천합니다. 역시 폰트 스타일을 바꾸는 법은 위에서 언급한 바와 같습니다.

 

 

링크 모듈 폰트 수정 방법.txt

 

 

 

3. 공지사항 모듈 폰트 수정하기

 

 

  다음은 ‘공지사항 모듈’ 입니다. Ctrl + F 를 눌러 검색하도록 합니다.

 

<!-- 공지사항 모듈 -->

<s_sidebar_element>

<s_rct_notice>

<div class="boxMidR2">

<img src="./images/gongji.gif"></div>

<div class="boxMidR"><div id="notice">

<ul>

<s_rct_notice_rep>

<li><a href=""><FONT style="FONT-FAMILY: 돋움, Dotum, sans-serif; FONT-SIZE: 9pt" color=#666666><img src="*.*">

</font></a></li>

 

 

 

  공지사항 모듈부터는 폰크 크기를 수정하기 쉬운 편입니다. 굵은색 글씨로 된 부분이 이미 있어서 추가할 필요가 없기 때문이죠. 붉은색 9pt 부분을 원하는 폰트 크기로 지정해 줍니다. 역시 11pt를 추천합니다.

 

 

 

4. 최근 포스트 모듈 폰트 수정하기

 

 

  다음은 ‘최근 포스트 모듈’ 입니다. Ctrl + F 를 눌러 검색하도록 합니다.

 

 

<!-- 최근 포스트 모듈 -->

<div class="boxMidR2">

<img src="./images/recent.gif"></div>

<div class="boxMidR">

<div id="recentPost">

<ul>

<s_rctps_rep>

<li><a href=""><FONT style="FONT-FAMILY: 돋움, Dotum, sans-serif; FONT-SIZE: 9pt" color=#666666><img src="*.*">

</font></a>

 

 

  역시 붉은색 9pt 부분을 원하는 폰트로 지정해 줍니다. 감이 안잡히면 11pt로 수정해줍니다.

 

 

 

5. 최근 댓글 모듈 폰트 수정하기

 

  다음은 ‘최근 댓글 모듈’ 입니다. Ctrl + F 를 눌러 검색하도록 합니다.

 

 

<!-- 최근 댓글 모듈 -->

<div class="boxMidR2">

<img src="./images/reply.gif"></div>

<div class="boxMidR">

 

<div id="recentComment">

<ul id="recentComments">

<s_rctrp_rep>

<li><a href=""><FONT style="FONT-FAMILY: 돋움, Dotum, sans-serif; FONT-SIZE: 9pt" color=#666666><img src="*.*“>

</font></a>

 

 

  붉은색 9pt 부분을 원하는 폰트로 지정해 줍니다. 개인적으로는 11pt를 추천합니다.

 

 

6. 카테고리 모듈 폰트 수정하기

 

  다음은 사이드바 ‘카테고리’ 모듈 폰트를 수정하는 방법입니다. ‘카테고리’는 Skin.html이 아닌 Style.css에서 수정해야 합니다. Style.css에서 Ctrl + F 를 눌러 ‘body {’ 를 검색해 아래 내용을 찾습니다.

 

  

body {

background-color:/*@background-color=*/#FFFFFF/*@*/;

background-image:/*@background-image=*/none/*@*/;

background-repeat:/*@background-image-repeat=*/repeat-y/*@*/;

background-position:/*@background-image-position=*/left top/*@*/;

font-family: '돋움', 돋움, Dotum, sans-serif;

font-size:12px;

border-top:0px solid #5C5C5C;

}

 

  여기에서 붉은 글씨로 표시된 12px를 원하는 폰트 크기로 지정해 줍니다. 개인적으로는 16px를 추천합니다.

 

 

  이제 모든 작업의 결과물을 보겠습니다.

 

 

 

  왼쪽은 폰트를 수정하기 전 사이드바 메뉴의 모습이고 오른쪽은 폰트를 수정하고 난 이후의 모습입니다. 수정하기 이전보다 폰트 크기가 훨씬 커진 것을 볼 수 있습니다. 그럼 이것으로 <티비스킨 사이드바 여백 현상. 폰트 크기 수정하기> 1, 2부를 모두 마치도록 하겠습니다. 가시기 전에 공감 버튼을 꾹! 눌러주시고 댓글을 달아주세요.