태터데스크 제목,요약글 폰트 다르게 적용하기

티스토리 블로그 옵션 기능인 테터데스크(Tatter Desk)는 아주 유용한 플러그인(Plug-in)입니다. 활용하기에 따라 자신의 블로그를 웹진 스타일과 개성 넘치는 블로그로 멋지게 디자인 할 수도 있습니다. 운영자가 애써 블로그 스킨 디자인을 고민하지 않아도 블로그 첫 화면을 장식할 수 있는 부가기능으로 생각하면 됩니다.

태터데스크를 구성하는 것은 티스토리의 태터데스크 가이드를 참고하면 그렇게 어렵지 않게 구성할 수 있지만 자신의 입 맛에 맞도록 자유롭게 장식할 수 있는 세부적인 가이드라인은 제공하고 있지 않습니다. 그러나 제공하고 있는 태터데스크 치환자를 바탕으로 CSS 다룰 줄 아는 블로거라면 조금만 관심을 가지고 살펴보면 블로그를 다양하게 표현할 수도 있습니다.

최근 디자인로그 블로그에 웹폰트 '우리새봄'체를 적용하면서 태터데스크의 부제목과 요약글이 웹폰트가 볼드타입인 관계로 눈의 피로감을 더하고 가독성을 떨어뜨린다는 의견들이 접수 되었고, 그 개선방법을 고민하던 중 부제목과 요약글의 폰트를 다르게 구현하면 타브라우저와의 호환성도 어느 정도 반영할 수 있고 또한 가독성과 블로그 디자인 면에서도 어느 정도 부합할 수 있겠다는 생각을 하게 되었습니다.

물론 폰트의 컬러 속성을 활용해서 구분지을 수 있겠지만, 제목서체와 본문 또는 요약글의 서체를 다르게 구분시키거나, 폰트의 굵기를 달리하는 것이 가독성도 높이고 눈의 피로감도 덜 수 있다는 것이 일반적인 상식이기 때문입니다. 그런 이유에서 이번 글에서는 태터데스크의 디자인 편집을 통해서 제목과 요약글 폰트를 다르게 적용하는 방법을 한번 살펴 보기로 하겠습니다.

태터데스크 요약글 디자인 편집 이미지

먼저 위의 이미지는 태터데스크 디자인 편집을 통해 부제목의 서체는 웹폰트 '우리새봄'을 적용하고, 요약글은 '우리바탕'을 적용한 경우입니다.

이렇게 하기 위해서는 티스토리 블로그 관리자 모드 플러그인 탭에 있는 태터데스크 플러그인이 사용으로 활성화 되어 있어야 하며 아래 이미지와 같이 블로그 좌측 상단에 나타나는  태터데스크 관리자 메뉴의 디자인 편집을 클릭해 편집 창을 열어야 합니다.

태터데스크 관리자 메뉴

태터 데스크 디자인 편집창이 아래 이미지처럼 열리면 스타일시트 수정 영역 중간에 오렌지색 선으로 표기한 박스 안의 내용처럼 추가해 주시면 됩니다.

태터데스크 스타일시트 수정 창

적용원리를 살펴보면 요약글 치환자가 [ ##_item_summary_## ]이고, 태터데스크의 콘텐츠 Html에서 요약글 치환자의 CSS를 정의하는 클래스가 <TD class="summary">로 되어 있으므로 CSS 창에 위의 예문처럼 폰트 속성을 정의를 해주면 제목글은 블로그 기본 폰트를 따르고 요약글은 사용자가 정의한 폰트 속성을 따르게 되기 때문입니다.

참고로 좀 더 이해가 쉽도록 해당 CSS 속성에 대한 자세한 설명을 드리면 다음과 같습니다.

.TD_summary {   // 요약글 CSS 정의 
 color:#666;   // 요약글 폰트 색상값 정의
 font:12px/1.7 우리바탕, verdana;  // 폰트 크기, 줄 간격, 지정폰트, 대체폰트의 정의
}

이렇게 하면 이제는 태터데스크 부제목과 요약글의 폰트 및 컬러 그리고 크기를 여러분 마음대로 활용할 수 있어 세련된 티스토리 첫 화면을 구독자와 방문자에게 보여줄 수 있으며, 아울러 하나의 웹진에 버금가는 멋진 블로그를 꾸밀 수 있을 겁니다. 혹시 적용 시 어려운 점은 하나도 없을 것이라 생각되지만 혹시라도 이해가 되지 않는다면 댓글로 질문해 주시면 답변을 드리겠습니다.