티스토리 스킨 가이드 (참고용)

스마트플렉스 2025. 3. 23.

티스토리 스킨 개발에 대한 참고 사항 모음집 입니다

좀더 자세한 사용 방법은 티스토리  가이드를 참고합니다

티스토리 스킨 가이드 : https://tistory.github.io/document-tistory-skin/

그룹 치환자

**검색어:**
대분류 이름 소분류 요약
공통 <s_t3> 컨테이너 최상위 치환자
치환자 사용을 위한 최상위 컨테이너. <body> 최상위에 작성
홈 커버 <s_cover_group> 컨테이너 홈 커버 최상위 치환자
홈 커버 출력을 위한 최상위 컨테이너
홈 커버 <s_cover_rep> 컨테이너 홈 커버 표시 치환자
1개 이상의 홈 커버를 표시하기 위한 컨테이너
홈 커버 <s_cover> 컨테이너 개별 홈 커버 치환자
개별 홈 커버. name 속성으로 index.xml에 정의한 홈 커버와 연결
홈 커버 <s_cover_url> 조건문 개별 홈 커버에 URL이 있는 경우 표시되는 치환자
홈 커버 <s_cover_item> 아이템 개별 홈 커버의 게시물 치환자
개별 홈 커버에 보여질 게시물과 매칭. 홈 커버 아이템 UI 구현
홈 커버 <s_cover_item_not_article_info> 조건문 개별 홈 커버의 게시물이 글이 아닌 경우 표시되는 치환자
홈 커버 <s_cover_item_article_info> 조건문 개별 홈 커버의 게시물이 글인 경우 표시되는 치환자
홈 커버 <s_cover_item_thumbnail> 조건문 개별 홈 커버의 게시물이 썸네일이 있는 경우 표시되는 치환자
방명록 <s_guest> 컨테이너 방명록 최상위 치환자
방명록 출력을 위한 최상위 컨테이너
방명록 <s_guest_input_form> 컨테이너 방명록 입력 폼 치환자
방명록을 달기 위한 입력 폼을 구현하는 컨테이너
방명록 <s_guest_member> 조건문 로그인을 하지 않았을 경우 표시되는 치환자
방명록 <s_guest_form> 조건문 블로그 소유주가 아닐 경우 표시되는 치환자
방명록 <s_guest_container> 컨테이너 방명록 리스트 치환자
방명록 리스트 컨테이너. 방명록 리스트 UI 구현
방명록 <s_guest_rep> 아이템 방명록 게시물 치환자
방명록 아이템과 매칭. 방명록 아이템 UI 구현
방명록 <s_guest_reply_container> 컨테이너 방명록 답글 컨테이너를 정의하는 태그
방명록의 답글 컨테이너. 답글 리스트 UI 구현
방명록 <s_guest_reply_rep> 아이템 방명록 답글을 출력하는 태그
답글 아이템과 매칭. 답글 아이템 UI 구현
사이드바 <s_sidebar> 컨테이너 사이드바 그룹 치환자
사이드바 <s_sidebar_element> 컨테이너 사이드바 개별 요소 치환자
사이드바 개별 요소 그룹 치환자. 주석 <!-- {title} -->으로 사이드 바의 타이틀 지정.
검색 <s_search> 컨테이너 검색 입력 폼 치환
검색 입력 폼 UI 구현
최근 활동 <s_rct_notice> 컨테이너 최근 공지사항 리스트 치환자
최근 공지사항 리스트 컨테이너
최근 활동 <s_rct_notice_rep> 아이템 최근 공지사항의 개별 항목 치환자
개별 공지사항 아이템과 매칭. 개별 공지사항 아이템 UI 구현
최근 활동 <s_rctps_popular_rep> 컨테이너 인기 게시물 리스트 치환자
인기 게시물 리스트 컨테이너
최근 활동 <s_rctps_rep> 컨테이너 최근 게시물 리스트 치환자
최근 게시물 리스트 컨테이너
최근 활동 <s_rctps_rep_thumbnail> 조건문 최근 활동 게시물의 썸네일이 있는 경우
최근 활동 <s_rctrp_rep> 컨테이너 최근 댓글 리스트 치환자
최근 댓글 리스트 컨테이너
리스트 <s_list> 컨테이너 리스트 그룹 치환자
카테고리, 검색, 태그의 게시물 리스트를 위한 최상위 컨테이너
리스트 <s_list_rep> 아이템 리스트 아이템을 반복 출력하는 치환자
리스트에 표시되는 게시물 아이템 UI 구현
리스트 <s_list_empty> 조건문 리스트가 비어있을 경우 표시되는 치환자
리스트 <s_list_image> 조건문 리스트의 게시물이 썸네일이 있을 경우 표시되는 치환자
페이징 <s_paging> 컨테이너 페이지 네비게이션 치환자
페이지 네이게이션 출력을 위한 최상위 치환자
페이징 <s_paging_rep> 아이템 네비게이션에서 각 페이지(숫자)를 반복 표시하는 치환자
태그 <s_tag> 컨테이너 태그 클라우드 그룹 치환자
태그 클라우드 사용을 위한 최상위 컨테이너
태그 <s_tag_rep> 아이템 개별 태그 치환자
개별 태그와 매칭. 태그 아이템 UI 구현
태그 <s_tag_label> 컨테이너 현재 게시물의 태그 치환자
현재 게시글의 태그를 출력하는 컨테이너
태그 <s_random_tags> 아이템 무작위 태그 치환자
무작위 태그와 매칭. 태그 아이템 UI 구현
글(일반) <s_article_rep> 컨테이너 게시물 그룹 치환자
게시물의 디자인을 위한 최상위 컨테이너
글(일반) <s_notice_rep_thumbnail> 조건문 게시물의 썸네일이 있을 경우 표시하는 치환자
글(공지) <s_notice_rep> 컨테이너 공지사항 게시물 그룹 치환자
공지사항 글의 디자인을 위한 컨테이너
글(공지) <s_notice_rep_thumbnail> 조건문 공지사항 게시물의 썸네일이 있을 경우 표시하는 치환자
글 <s_index_article_rep> 컨테이너 게시물 리스트 치환자
홈, 카테고리에서 게시물 리스트 디자인을 위한 컨테이너
글 <s_permalink_article_rep> 컨테이너 게시물 포스트 치환자
게시물 포스트 디자인을 위한 컨테이너
글 <s_page_rep> 컨테이너 페이지 게시물 포스트 치환자
페이지 글의 디자인을 위한 컨테이너. 페이지치환자가 존재하지 않는 경우 글 치환자에 표시.
글 <s_article_protected> 컨테이너 보호글 게시물 포스트 치환자
보호 글의 디자인을 위한 컨테이너
글 <s_article_rep_thumbnail> 조건문 게시물의 썸네일이 있는 경우 표시하는 치환자
글 <s_rp_count> 조건문 댓글 기능이 있는 게시물인 경우 표시하는 치환자
글 <s_ad_div> 조건문 글 관리 권한이 있는 경우 표시하는 치환자
이전/다음 글 <s_article_next> 조건문 다음 게시물이 존재하면 표시되는 치환자
이전/다음 글 <s_article_next_thumbnail> 조건문 게시물의 썸네일이 있는 경우 표시하는 치환자
이전/다음 글 <s_article_prev> 조건문 이전 게시물이 존재하면 표시되는 치환자
이전/다음 글 <s_article_prev_thumbnail> 조건문 게시물의 썸네일이 있는 경우 표시하는 치환자
글(관련) <s_article_related> 컨테이너 관련 게시물 그룹 치환자
관련 게시물의 그룹 디자인을 위한 컨테이너
글(관련) <s_article_related_rep> 아이템 관련 게시물의 아이템 치환자
글(관련) <s_article_related_rep_thumbnail> 조건문 게시물의 썸네일이 있을 경우 표시하는 치환자
댓글 <s_rp> 컨테이너 댓글 최상위 치환자
댓글 입출력을 위한 최상위 컨테이너
댓글 <s_rp_input_form> 컨테이너 댓글 입력 폼 치환자
댓글 입력 폼을 구현하기 위한 컨테이너
댓글 <s_rp_guest> 조건문 로그인을 하지 않았을 경우 표시되는 치환자
댓글 <s_rp_member> 조건문 블로그 소유주가 아닐 경우 표시되는 치환자
댓글 <s_rp_container> 컨테이너 게시물의 댓글 리스트 컨테이너 치환자
게시물 댓글 리스트를 구현하기 위한 컨테이너
댓글 <s_rp_rep> 아이템 댓글 리스트의 아이템 치환자
댓글 아이템의 디자인을 위한 컨테이너
댓글 <s_rp2_container> 컨테이너 댓글의 답글 리스트 컨테이너 치환자
댓글의 답글 리스트를 구현하기 위한 컨테이너
댓글 <s_rp2_rep> 아이템 답글 리스트의 아이템 치환자
답글 아이템의 디자인을 위한 컨테이너
스킨 옵션 <s_if_var_{VARIABLE_NAME}> 조건문 옵션의 값이 있거나 True일 경우 표시하는 치환자
스킨 옵션 <s_not_var_{VARIABLE_NAME}> 조건문 옵션의 값이 없거나 False일 경우 표시하는 치환자

 

값 치환자

 

 

파일구조

SKIN ─┬─ index.xml
      ├─ skin.html
      ├─ style.css
      ├─ preview.gif
      ├─ preview256.jpg
      ├─ preview560.jpg
      ├─ preview1600.jpg
      └─ images ─┬─ script.js
                 ├─ background.jpg
                 ├─ background.jpg
                 └─ background.jpg

index.xml

스킨 정보 파일로 자세한 내용은 '스킨 정보 파일' 장에서 다룹니다.

skin.html

스킨의 메인 템플릿 파일로 치환자를 사용해 각 url에 해당하는 HTML 결과물로 치환됩니다.

style.css

css 분리를 위한 파일이며 skin.html과 마찬가지로 스킨에디터에서 편집할 수 있습니다.

preview

티스토리 각 영역에서 미리보기를 표시하기 위한 파일입니다.

  • preview.gif : 미리보기 기본 파일로 아래 파일이 없는 경우에 사용 (112x84)
  • preview256.jpg : 사용 중인 스킨 미리보기 (256x192)
  • preview560.jpg : 스킨 목록 미리보기 (560x420)
  • preview1600.jpg : 스킨 상세보기 미리보기 (1600x1200)

images

필수요소가 아닌 파일은 모두 images 아래에 위치하게 됩니다. image, script, css 등을 업로드하여 스킨에서 사용합니다.

스킨 정보 파일(index.xml)

스킨에 필요한 정보를 담고 있는 xml 파일로 이 파일이 변경되면 스킨의 모든 설정이 초기화됩니다.

<?xml version="1.0" encoding="utf-8"?>
<skin>
  <information>
    <name>기본 스킨</name>
    <version>1.1</version>
    <description>
      <![CDATA[웹표준을 준수한 XHTML 기반의 Tistory 기본 스킨입니다.]]>
    </description>
    <license>
      <![CDATA[자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.]]>
    </license>
  </information>
  <author>
    <name>tistory</name>
    <homepage>http://notice.tistory.com</homepage>
    <email>tistoryblog@daum.net</email>
  </author>
  <default>
    <recentEntries>5</recentEntries>
    <recentComments>5</recentComments>
    <recentTrackbacks>5</recentTrackbacks>
    <itemsOnGuestbook>10</itemsOnGuestbook>
    <tagsInCloud>30</tagsInCloud>
    <sortInCloud>3</sortInCloud>
    <expandComment>0</expandComment>
    <expandTrackback>0</expandTrackback>
    <lengthOfRecentNotice>25</lengthOfRecentNotice>
    <lengthOfRecentEntry>27</lengthOfRecentEntry>
    <lengthOfRecentComment>30</lengthOfRecentComment>
    <lengthOfRecentTrackback>30</lengthOfRecentTrackback>
    <lengthOfLink>30</lengthOfLink>
    <showListOnCategory>1</showListOnCategory>
    <showListOnArchive>1</showListOnArchive>
    <commentMessage>
      <none>댓글이 없습니다.</none>
      <single>댓글 &lt;span class="cnt"&gt;하나&lt;/span&gt; 달렸습니다.</single>
    </commentMessage>
    <trackbackMessage>
      <none>받은 트랙백이 없고</none>
      <single>트랙백이 &lt;span class="cnt"&gt;하나&lt;/span&gt;이고</single>
    </trackbackMessage>
    <tree>
      <color>000000</color>
      <bgColor>ffffff</bgColor>
      <activeColor>000000</activeColor>
      <activeBgColor>eeeeee</activeBgColor>
      <labelLength>27</labelLength>
      <showValue>1</showValue>
    </tree>
    <contentWidth>500</contentWidth>
  </default>
</skin>

기본 정보

스킨 목록, 상세보기에서 표시되는 정보입니다.

  • name: 표시되는 이름
  • version: 스킨 버전
  • description: 스킨 상세 설명
  • license: 저작권

제작자

스킨 정보에서 표시할 제작자 정보입니다.

  • name: 표시되는 이름
  • homepage: 제작자 웹사이트 주소
  • email: 연락할 이메일 주소

설정 기본값

스킨의 설정 기본값입니다. 이를 통해 스킨 적용하면 제작자가 추천하는 설정을 제공할 수 있습니다.

  • recentEntries: 사이드바의 최근글 표시 갯수
  • recentComments: 사이드바의 최근 댓글 표시 갯수
  • recentTrackbacks: 사이드바의 최근 트랙백 표시 갯수
  • itemsOnGuestbook: 한페이지에 표시될 방명록 갯수 *
  • tagsInCloud: 사이드바에 표시될 태그 갯수
  • sortInCloud: 태그 클라우드 표현 방식 (1:인기도순, 2:이름순, 3:랜덤)
  • expandComment: 댓글영역 표현 방식 (0:감추기, 1:펼치기)
  • expandTrackback: 트랙백영역 표현 방식 (0:감추기, 1:펼치기)
  • lengthOfRecentNotice: 최근 공지 표현될 글자수
  • lengthOfRecentEntry: 최근 글 표현될 글자수
  • lengthOfRecentComment: 최근 댓글에 표현될 글자수
  • lengthOfRecentTrackback: 최근 트랙백에 표현될 글자수
  • lengthOfLink: 링크에 표현될 글자수
  • entriesOnPage: 홈 화면 글 수
  • entriesOnList: 글 목록 글 수
  • showListOnCategory: 커버 미사용 홈에서 글 목록 표현(0:내용만, 1:목록만, 2: 내용+목록)
  • showListLock : 홈 설정과 기본 설정에서 '목록 구성 요소' 항목의 노출 여부 결정 (0: 노출, 1: 노출 안 함)
  • tree: 카테고리
    • color: 카테고리 글자색
    • bgColor: 카테고리 배경색
    • activeColor: 선택시 글자색
    • activeBgColor: 선택시 배경색
    • labelLength: 표현될 카테고리 글자 수
    • showValue: 카테고리 글 수 표현(0:숨김, 1:보임)
    • contentWidth: 콘텐츠영역 가로 사이즈, 이 사이즈에 맞춰 에디터의 위지윅이 제대로 구현된다.
  • cover: 홈 커버 기본값

홈 커버

홈 커버에 사용한 아이템을 정의합니다.

스킨 옵션

스킨 옵션에서 제공할 옵션을 정의합니다.

리스트 스타일

사용할 수 있는 글 목록 스타일을 정의합니다.

toc open

저작자표시