태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

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

분류: Digitial News/Blogging Guide 작성일: 2008.10.06 04:22 Editor: 마루[maru]

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

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

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

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

태터데스크 편집

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

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

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

태터데스크 관리자 메뉴

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

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

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

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

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

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

저작자 표시 비영리 변경 금지
신고
※글에 대한 여러분 의견을 남겨 주십시오. 감사합니다!
  1. Favicon of http://applejadore.tistory.com/ BlogIcon 사과벌뢰 2008.10.06 05:03 신고  댓글주소  수정/삭제  댓글 남기기

    저두 테터데스크 해봤었는데 그닥 볼만한 야기거리가 없어서 그냥 사용안하고있어요
    잘하는 사람들 보면 부럽더라구요

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2008.10.06 11:38 신고  댓글주소  수정/삭제

      초기 서비스 시기에 비해서 지금은 사용하는 분들이 많지 않은 것 같습니다.
      하지만 중간 중간 태터데스크에 대해서 질문을 해오시는 분들이 있어서 조금이나마 도움이 될까해서 올려 보았습니다.^^
      다음에라도 참고하실 일이 있으시면 활용하시길 바랍니다.

  2. Favicon of http://poem23.com BlogIcon 학주니 2008.10.06 09:22 신고  댓글주소  수정/삭제  댓글 남기기

    태터데스크를 사용하지 않기 때문시.. -.-;

  3. Favicon of http://whiteangel1004.tistory.com/ BlogIcon ★바바라 2009.03.25 22:38 신고  댓글주소  수정/삭제  댓글 남기기

    어!! 이거 제가 찾던 건데...감사합니다!

    • Favicon of http://whiteangel1004.tistory.com/ BlogIcon ★바바라 2009.03.25 22:49 신고  댓글주소  수정/삭제

      음...뭐가 잘못 된 걸까요;;;
      적용이 안 되네요;;;

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2009.03.26 10:07 신고  댓글주소  수정/삭제

      정확하게 어떻게 안되시는 건지, 아님 어떻게 구현하고 싶은 건지 참고사례를 이미지로 알려 주시면 방법을 알려 드리거나 제가 일시적으로 접속해 개선을 해드릴 수도 있습니다. 팀블로그에 초대를 해주셔야 하는 과정을 거치기도 하지만요.^^

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2009.03.26 10:07 신고  댓글주소  수정/삭제

      그렇셨습니까? 조금이나마 도움이 되시길 바랍니다.

    • Favicon of http://whiteangel1004.tistory.com/ BlogIcon ★바바라 2009.03.26 12:57 신고  댓글주소  수정/삭제

      음, 그러니까 요약글의 폰트 색상만 바꿀 수 있는 건가요?
      전, 제목과 부제목의 폰트 색상을 바꾸고 싶거든요.
      지금 설치되어 있는데, 글씨 색상이 파랗고 보라색이고..
      너무 마음에 안 들어서요.
      들러서 확인해주시겠어요~ ^^

  4. 2009.04.25 19:25  댓글주소  수정/삭제  댓글 남기기

    비밀댓글입니다

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2009.05.01 13:46 신고  댓글주소  수정/삭제

      댓글이 많아서 미처 확인을 못하고 이제서야 답변을 드립니다.
      궁금해 하시는 부분은 모두 TTDesk의 CSS수정과 추가 정의로 변경하실 수 있는 사항입니다.
      스타일시트를 확인하고 추가해 보시길 바랍니다.
      방문해 보니 지금은 아주 깔끔한 블로그 디자인을 구성하고 계시더군요.

  5. Favicon of http://econopy.tistory.com BlogIcon 이승욱 2009.05.01 05:16 신고  댓글주소  수정/삭제  댓글 남기기

    설명감사합니다.
    그런데 요약글제목 말고 그 위에
    카테고리 바에서(제껀 빨간색으로 되어있는데)
    그 바안에 텍스트 색깔을 바꿀려고 하는데 그게 너무 어려워요.
    좀 알려주시면 안될까요?^^

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2009.05.01 13:48 신고  댓글주소  수정/삭제

      태터데스크 타이틀 컬러와 폰트 컬러도 원하시는 대로 변경하실 수 있습니다. 기본 템플릿을 적용하신 다음 테터데스크 설정에 들어 가셔서 CSS 코드를 수정하시길 바랍니다.

  6. Favicon of http://namugnul.tistory.com/ BlogIcon 접이 2009.05.27 11:52 신고  댓글주소  수정/삭제  댓글 남기기

    아무리 해도 안되서 지식인도 검색도 영 답이 안 나오고
    돌아다니다 여기까지 왔어요
    혹시나 해서 글 올려봅니다
    테터데스크 설정 -요약글 폰트색이 바탕색과 같은지 드러나질 않네요
    위의 설명처럼 해 봤는데도 결과가 없어서..

  7. 김민수 2009.06.29 18:04 신고  댓글주소  수정/삭제  댓글 남기기

    저도 한참 찾던 정보인데 여기서 보는군요. 감사합니다. ^^;

    그런데, 카테고리 구분 제목은 어느 항목을 수정해야 할까요?

    그러니까...여기로 치자면 대문화면에서

    디자인 헤드라인 * Design Headline
    디지털 헤드라인 * Digital Headline
    Photoshop

    등등...이런 부분 말입니다.

    .TD_more_title 부분을 아무리 수정해봐도 안바뀌고 보기싫은 파란색이 계속 나타납니다.

  8. Favicon of http://7799.tistory.com BlogIcon 충story 2010.01.07 22:02 신고  댓글주소  수정/삭제  댓글 남기기

    제 블로그좀 한번 봐주세요~! 글자색상이 파란색으로 보이는데, 다른색으로 변경이 안되네요. CSS에 들어가서 color라고 스여있는부분의 #넘버를 다 변경해 봤는데도 도통 글자색이 변경이 안되네요.
    하도 답답해서 혹시나 하고 여쭈어 봅니다.T.T

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2010.01.08 11:12 신고  댓글주소  수정/삭제

      안녕하세요? 충story님
      CSS에서 제대로 정의해 주지 못해서 생긴 것 같습니다.
      관리자 모드 팀블로그 항목에서 maruzzang@gmail.com 제 메일을 팀블로그 관리자로 초대해주면 스타일시트를 제어할 수 있게 됩니다. 설정이 변경되면 그 다음 관리자 권한을 제거하심 됩니다.. 외부에서는 문제를 파악하기 힘들어요.

  9. Favicon of http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040205&docId=158273734 BlogIcon 왕갈매기 2012.09.12 22:16 신고  댓글주소  수정/삭제  댓글 남기기

    안녕하세요 태터데스크 대문을 꾸미고 있는데 태터데스크 관리자로 레이아웃을 설정할 수 있을까요?
    지식인에 글올렸는데 답이 없어서 여기서 여쭤봅니다. 수고하세요~

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2012.09.13 14:55 신고  댓글주소  수정/삭제

      제한적이긴 하지만 구성은 가능합니다.
      태터데스크로 대문페이지를 구성하기 위해서는 HTML과 CSS를 잘 아셔야하고 티스토리 치환자의 연동 개념을 충분히 이해하신 다음 작업하셔야 문제가 없습니다.
      보다 자세한 것은 티스토리 공식 블로그를 참조하시길 바랍니다.

    • Favicon of http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040205&docId=158273734 BlogIcon 왕갈매기 2012.09.15 21:12 신고  댓글주소  수정/삭제

      아 가능하다니 다행이네요 ㅎㅎ
      html은 나모로 끄적였던 게 전부라서 공부해야겠습니다
      답변감사드립니다

  10. Favicon of http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040205&docId=158273734 BlogIcon 왕갈매기 2012.09.12 22:16 신고  댓글주소  수정/삭제  댓글 남기기

    안녕하세요 태터데스크 대문을 꾸미고 있는데 태터데스크 관리자로 레이아웃을 설정할 수 있을까요?
    지식인에 글올렸는데 답이 없어서 여기서 여쭤봅니다. 수고하세요~


우드스