티스토리에서는 스킨을 통해서 사이트를 자유롭게 디자인할 수 있습니다. 스킨은 치환자를 사용하여 제작되고 사용된 치환자에는 티스토리의 데이터가 대입되어 티스토리의 디자인이 완성됩니다.
이 문서는 스킨에서 사용하는 치환자에 대해 설명합니다.
파일구조
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 등을 업로드하여 스킨에서 사용합니다.
스킨 정보 파일
스킨에 필요한 정보를 담고 있는 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>댓글 <span class="cnt">하나</span> 달렸습니다.</single>
</commentMessage>
<trackbackMessage>
<none>받은 트랙백이 없고</none>
<single>트랙백이 <span class="cnt">하나</span>이고</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: 내용+목록)
- tree: 카테고리
- color: 카테고리 글자색
- bgColor: 카테고리 배경색
- activeColor: 선택시 글자색
- activeBgColor: 선택시 배경색
- labelLength: 표현될 카테고리 글자 수
- showValue: 카테고리 글 수 표현(0:숨김, 1:보임)
- contentWidth: 콘텐츠영역 가로 사이즈, 이 사이즈에 맞춰 에디터의 위지윅이 제대로 구현된다.
- cover: 홈 커버 기본값으로 자세한 내용은 '홈 커버 > 기본값' 장에서 설명합니다.
홈 커버
홈 커버에 사용한 아이템을 정의합니다. 자세한 내용은 '홈 커버 > 정의' 장에서 설명합니다.
스킨 옵션
스킨 옵션에서 제공할 옵션을 정의합니다. 자세한 내용은 '스킨 옵션 > 옵션 정의' 장에서 설명합니다.
리스트 스타일
사용할 수 있는 글 목록 스타일을 정의합니다. 자세한 내용은 '리스트 > 리스트 스타일' 장에서 설명합니다.
치환자 구조
티스토리의 치환자는 그룹치환자, 값치환자의 2가지 형태를 가지고 있습니다. 그룹치환자는 내부에 스킨 데이터를 포함하며 렌더링된 값으로 변환됩니다. 값치환자는 해당하는 값으로 변환됩니다.
예
<s_tag>
<div class="taglog">
<h3>태그</h3>
<ul>
<s_tag_rep>
<li><a href="" class=""></a></li>
</s_tag_rep>
</ul>
</div>
</s_tag>
- 그룹치환자:
<s_tag>
, <s_tag_rep>
- 값치환자:
,
,
그룹치환자
<s_NAME>VALUE</s_NAME>
값치환자
공통 치환자
스킨 치환자 그룹
<s_t3>
: 티스토리 공통 javascript 삽입 (필수)
<!-- 치환 전 -->
<body>
<s_t3>
...
</s_t3>
</body>
<!-- 치환 후 -->
<body>
<script type="text/javascript" src="https://t1.daumcdn.net/tistory_admin/blogs/script/blog/common.js"></script>
<div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div>
...
</body>
기본 정보
블로그 정보
라이브러리 브랜드
: 블로그 제목
https://tistory1.daumcdn.net/tistory/3045799/attach/03a32db2cebe41198c9508d7c20b4ff1
: 블로그 대표 이미지 url
: 블로그 대표 이미지를 포함한 IMG 태그
라이브러리는 인간이 지닌 위대한 능력인 상상력을 기반으로 하여 여러가지 콘텐츠를 다루고자 합니다.
: 블로그 설명
라이브러리 브랜드
: 블로그 소유자의 필명
블로그 URL
https://creativestudio.kr/
: 블로그 url
https://stylus.tistory.com/rss
: rss feed 주소
https://stylus.tistory.com/tag
: 태그로그 url
https://stylus.tistory.com/guestbook
: 방명록 url
기타
티스토리 스킨 가이드
: 페이지 제목
: 블로그 메뉴 리스트
tt-body-page
: 페이지 타입에 따른 id
페이지 타입 |
body_id |
홈화면 |
tt-body-index |
글화면 |
tt-body-page |
카테고리 글 리스트 |
tt-body-category |
보관함 글 리스트 |
tt-body-archive |
태그 리스트 |
tt-body-tag |
검색결과 리스트 |
tt-body-search |
방명록 |
tt-body-guestbook |
지역로그 |
tt-body-location |
사용 예
<html>
<head>
<title>티스토리 스킨 가이드</title>
</head>
<body id='tt-body-page'>
<s_t3>
<header>
<h1><a href="https://creativestudio.kr/">라이브러리 브랜드</a></h1>
<!-- blog_menu사용 -->
<!-- 메뉴 직접 구성 -->
<ul class="blogMenu">
<li><a href="https://stylus.tistory.com/rss">RSS구독</a></li>
<li><a href="https://stylus.tistory.com/tag">태그</a></li>
<li><a href="https://stylus.tistory.com/guestbook">방명록</a></li>
</ul>
</header>
<section class="sidebar">
<!-- blog_image 사용 -->
<div class="blogInfo">
<div class="blogImage"> </div>
<div class="blogDesc">라이브러리는 인간이 지닌 위대한 능력인 상상력을 기반으로 하여 여러가지 콘텐츠를 다루고자 합니다. <span class="userID">라이브러리 브랜드</span></div>
</div>
<!-- image 사용 -->
<div class="blogInfo">
<div class="blogImage"><img src="https://tistory1.daumcdn.net/tistory/3045799/attach/03a32db2cebe41198c9508d7c20b4ff1"></div>
<div class="blogDesc">라이브러리는 인간이 지닌 위대한 능력인 상상력을 기반으로 하여 여러가지 콘텐츠를 다루고자 합니다. <span class="userID">라이브러리 브랜드</span></div>
</div>
</section>
</s_t3>
</body>
</html>
홈 커버
홈 커버는 홈화면을 꾸미기 위해 제공되는 치환자입니다.
<s_cover_group>
: 커버 그룹 치환자
<s_cover_rep>
: 개별 커버 표시
<s_cover>
: 개별 커버. name 애트리뷰트로 이름을 지정한다. 정의되지 않은 이름의 커버는 사용되지 않는다.
: 개별 커버 타이틀
<s_cover_url>
: 커버 url이 있는 경우에만 치환
<s_cover_item>
: 개별 커버 컨텐츠
<s_cover_item_not_article_info>
: 컨텐츠가 글이 아닌 경우에만 치환 (내부 치환자는 s_cover_item에 직접 사용 가능)
: 컨텐츠 타이틀
: 컨텐츠 요약/내용
: 컨텐츠 url
<s_cover_item_thumbnail>
: 컨텐츠 이미지가 있는 경우에만 치환
<s_cover_item_article_info>
: 컨텐츠가 글인 경우에만 치환
: 컨텐츠 타이틀
: 컨텐츠 요약/내용
: 컨텐츠 url
<s_cover_item_thumbnail>
: 컨텐츠 이미지가 있는 경우에만 치환
: 카테고리 명
: 카테고리 url
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 댓글 수
치환자 사용 예
<s_cover_group>
<s_cover_rep>
<s_cover name='featured'>
<div class='featured'>
<s_cover_item>
<div class='featured-item'>
<s_cover_item_thumbnail>
<img class="image" src="">
</s_cover_item_thumbnail>
<strong class="title"></strong>
<a href="" class="action">자세히 보기</a>
</div>
</s_cover_item>
<button class='btn-prev'><</button>
<button class='btn-next'>></button>
</div>
</s_cover>
<s_cover name='list'>
<div id="mArticle" class="article_skin">
<s_cover_item>
<s_cover_item_article_info>
<div class="list_content">
<s_cover_item_thumbnail>
<a href="" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C148x148/?fname="></a>
</s_cover_item_thumbnail>
<a href="" class="link_post">
<strong class="tit_post"></strong>
<p class="txt_post"></p>
</a>
<div class="detail_info">
<a href="" class="link_cate"></a>
<span class="txt_bar"></span>
</div>
</div>
</s_cover_item_article_info>
<s_cover_item_not_article_info>
<div class="list_content">
<s_cover_item_thumbnail>
<a href="" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C148x148/?fname="></a>
</s_cover_item_thumbnail>
<a href="" class="link_post">
<strong class="tit_post"></strong>
<p class="txt_post"></p>
</a>
</div>
</s_cover_item_not_article_info>
</s_cover_item>
<s_cover_url>
<a class="btn-more" href="">더보기</a>
</s_cover_url>
</div>
</s_cover>
</s_cover_rep>
</s_cover_group>
정의 (index.xml)
커버를 사용하기 위해서는 스킨 정보 파일에 커버 아이템을 정의해야 합니다.
<cover>
<item>
<name>커버 아이템 이름</name>
<label>사용자에게 표시할 이름</label>
<description>설명</description>
</item>
</cover>
정의 예
<cover>
<item>
<name>featured</name>
<label><![CDATA[Featured]]></label>
<description><![CDATA[강조할 글을 표시합니다.]]></description>
</item>
<item>
<name>list</name>
<label><![CDATA[리스트]]></label>
<description><![CDATA[글 리스트를 표시합니다.]]></description>
</item>
</cover>
기본값
스킨 적용 즉시 제작자가 추천하는 홈커버가 적용되도록 하기 위해서 기본값을 사용할 수 있습니다. 스킨 정보 파일의 기본값에 JSON 값을 string으로 설정합니다.
<default>
<cover>
<![CDATA[ 홈 커버 기본값 ]]>
</cover>
</default>
기본값 JSON 구조
[
{
"name": "정의된 커버 아이템 name",
"title": "커버 타이틀",
"dataType": "내용의 데이터 타입",
"data": "타입에 해당하는 데이터"
},
...
]
- name: 정의된 커버 아이템으로 없는 커버를 사용할 경우 무시됩니다.
- title: 커버타이틀로 사용할 string 입니다.
- dataType: 내용유형으로 스킨 에디터에서 제공하는 유형 중 '최신 글', '직접 입력' 만 사용할 수 있습니다.
- RECENT: 최신 글
- CUSTOM: 직접 입력
- data: 커버 내용으로 유형별로 형태가 다릅니다.
- RECENT: 카테고리와 개수를 설정할 수 있습니다.
{
"category": "ALL",
"size": 5
}
- category: 사용자의 카테고리를 알 수 없으므로 전체(ALL), 공지사항(NOTICE)만 사용할 수 있습니다.
- size: 표시될 개수를 설정합니다. 1-100 까지 설정할 수 있습니다.
- CUSTOM: 표시될 내용을 모두 설정
{
"title": "컨텐츠 타이틀",
"summary": "컨텐츠 타이틀",
"url": "컨텐츠 요약/내용",
"thumbnail": "컨텐츠 이미지"
}
기본값 예
[
{
"name": "featured",
"title": "",
"dataType": "CUSTOM",
"data": [
{
"title": "첫번째 항목",
"summary": "첫번째 항목의 summary",
"url": "https://www.tistory.com",
"thumbnail": "https://www.tistory.com/sample.png"
},
{
"title": "두번째 항목",
"summary": "두번째 항목의 summary",
"url": "https://www.tistory.com",
"thumbnail": "https://www.tistory.com/sample.png"
}
]
},
{
"name": "list",
"title": "",
"dataType": "LIST",
"data": {
"category": "ALL",
"size": 5
}
}
]
스킨 옵션
<s_if_var_{VARIABLE_NAME}>
: 옵션의 값이 있으면 (bool 타입인 경우 true이면) 치환
<s_not_var_{VARIABLE_NAME}>
: 옵션의 값이 없으면 (bool 타입인 경우 false이면) 치환
: 옵션의 값
<style>
.wrap_sub {
background-image: url('');
}
</style>
<s_if_var_scroll-load>
<style>
.article_skin .area_paging .inner_paging.scroll_spinner {
width:48px; height:48px;
background:url('./images/spinner.gif') no-repeat;
height: 48px;
width: 48px;
margin: 0 auto;
}
.article_skin .area_paging .inner_paging.scroll_spinner * {
display:none
}
</style>
<script src="./images/scroll-load.js"></script>
</s_if_var_scroll-load>
옵션 정의 (index.xml)
<variables>
<variablegroup name="그룹이름">
<variable>
<name>치환자에서 사용할 이름</name>
<label>사용자에게 표시할 이름</label>
<description>설명 (optional)</description>
<type>타입</type>
<option>max, min, select option등 값을 설정하는데 사용되는 정보 (optional: SELECT타입의 경우 필수)</option>
<default>설정하지 않은 경우 기본 값</default>
</variable>
</variablegroup>
</variables>
type
- STRING: 문자 입력
- SELECT: 옵션 선택 (옵션은 name, label, value 값을 가진 json객체로 정의)
- option 예
<option><![CDATA[
[
{"name":"light", "label":"밝은색", "value":"light"},
{"name":"dark", "label":"어두운색", "value":"dark"}
]
]]></option>
- IMAGE: 이미지 url
- BOOL: true/false
- COLOR: 컬러값 (#000000)
옵션 정의 사용 예
<variables>
<variablegroup>
<variable>
<name>scroll-load</name>
<label>
<![CDATA[ 무한스크롤 ]]>
</label>
<type>BOOL</type>
<option />
<default>true</default>
<description>
<![CDATA[ 글 리스트 끝에 다다르면 다음 페이지를 불러옵니다. ]]>
</description>
</variable>
</variablegroup>
<variablegroup name="디자인">
<variable>
<name>cover-image</name>
<label>
<![CDATA[ 커버이미지 ]]>
</label>
<type>IMAGE</type>
<option />
<default>
<![CDATA[ https://t1.daumcdn.net/tistory/0/Ray2/images/header_default.jpg ]]>
</default>
<description>
<![CDATA[ 커버 이미지를 변경합니다. ]]>
</description>
</variable>
<variable>
<name>point-color</name>
<label>
<![CDATA[ 대표 색 ]]>
</label>
<type>COLOR</type>
<option />
<default><![CDATA[#6bacce]]></default>
<description>
<![CDATA[대표 색을 사용합니다.]]>
</description>
</variable>
</variablegroup>
</variables>
태그 클라우드 치환자
태그 클라우드는 사용한 태그 리스트를 출력합니다.
태그 그룹
태그 정보
<s_tag_rep>
: 개별태그 그룹치환자
: 태그가 포함된 글을 출력하기 위한 URL
: 총 5단계가 있는데 자주 사용한 순서로 cloud1
-cloud5
가 표시됩니다.
: 태그의 이름
예
<!-- 스킨 -->
<s_tag>
<div class="taglog">
<h3>태그</h3>
<ul>
<s_tag_rep>
<li>
<a href="" class=""></a>
</li>
</s_tag_rep>
</ul>
</div>
</s_tag>
<!-- 변환 예 -->
<div class="taglog">
<h3>태그</h3>
<ul>
<li>
<a href="/tag/tistory" class="cloud1">tistory</a>
</li>
<li>
<a href="/tag/kakao" class="cloud4">kakao</a>
</li>
<li>
<a href="/tag/blog" class="cloud5">blog</a>
</li>
</ul>
</div>
방명록
방명록 그룹
<s_guest>
<div class="guestbook">
<h3>방명록</h3>
<div class="guestWrite">입력 폼</div>
<div class="guestList">리스트</div>
</div>
</s_guest>
입력 폼
<s_guest_input_form>
: 방명록을 달기 위한 입력폼을 출력합니다
: 글 내용 입력박스 이름
: 입력 완료 온클릭 이벤트
<s_guest_member>
: 로그인을 하지 않았거나 블로그 소유자가 아닌경우 보여지는 영역
<s_guest_form>
: 로그인을 하지 않았을경우 보여지는 영역
: 이름입력 박스 이름
: 이름
: 비밀번호 입력 박스 이름
: 비밀번호
: 홈페이지 입력 박스 이름
: 홈페이지
<s_guest_input_form>
<div class="guestWrite">
<s_guest_member>
<s_guest_form>
<div>
<input type="text" name="" value="" />
<label for="name"> : 이름 </label>
</div>
<div>
<input type="password" maxlength="8" name="" value="" />
<label for="password"> : 패스워드 </label>
</div>
<div>
<input type="text" name="" value="" />
<label for="homepage"> : 홈페이지 </label>
</div>
</s_guest_form>
</s_guest_member>
<div>
<textarea name="" cols="50" rows="6"></textarea>
</div>
<div>
<input type="submit" value="안부 남기기" onclick=""/>
</div>
</div>
</s_guest_input_form>
리스트
<s_guest_container>
: 방명록 리스트 그룹치환자
<s_guest_rep>
: 방명록 정보 그룹치환자
<s_guest_reply_container>
: '방명록'의 댓글 리스트를 출력할 영역입니다.
<s_guest_reply_rep>
: '방명록' 댓글 리스트의 반복열입니다
내용 (rep 내부)
: 방명록의 고유 ID
: 방명록의 글의 목록에 반복되는 스타일 + admin 아이디 앞에 아이콘
: 글쓴사람 이름
: 글쓴 날짜
: 글 내용
: 답글 삭제 온클릭 이벤트
: 답글 수정 온클릭 이벤트
<s_guest_container>
<div class="guestList">
<ol>
<s_guest_rep>
<li id=''>
<div class="">
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="#" onclick="">MODIFY/DELETE</a>
<a href="#" onclick="">REPLY</a>
</span>
<p></p>
</div>
<s_guest_reply_container>
<ul>
<s_guest_reply_rep>
<li id=''>
<div class="">
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="#" onclick="">MODIFY/DELETE </a>
</span>
<p></p>
</div>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ol>
</div>
</s_guest_container>
글 치환자
글 정보
<s_article_rep>
: 글 그룹 치환자
/1463
: 블로그 글의 고유 주소
티스토리 스킨 가이드
: 블로그 글의 제목
/category/Tistory/Tistory%20Skin
: 카테고리 링크
Tistory/Tistory Skin
: 카테고리 명
2020. 6. 3. 05:08
: 글쓴 날짜/시간 (yyyy. m. d. HH:MM)
2020. 6. 3.
: 글쓴 날짜 (yyyy. m. d.)
2020
: 글쓴 세부시간 - 연도 (yyyy)
06
: 글쓴 세부시간 - 월 (mm)
03
: 글쓴 세부시간 - 일 (dd)
05
: 글쓴 세부시간 - 시 (HH)
08
: 글쓴 세부시간 - 분 (MM)
14
: 글쓴 세부시간 - 초 (SS)
라이브러리 브랜드
: 작성자 이름 (*팀블로그용 치환자)
티스토리에서는 스킨을 통해서 사이트를 자유롭게 디자인할 수 있습니다. 스킨은 치환자를 사용하여 제작되고 사용된 치환자에는 티스토리의 데이터가 대입되어 티스토리의 디자인이 완성됩니다.
이 문서는 스킨에서 사용하는 치환자에 대해 설명합니다.
파일구조
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 등을 업로드하여 스킨에서 사용합니다.
스킨 정보 파일
스킨에 필요한 정보를 담고 있는 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>댓글 <span class="cnt">하나</span> 달렸습니다.</single>
</commentMessage>
<trackbackMessage>
<none>받은 트랙백이 없고</none>
<single>트랙백이 <span class="cnt">하나</span>이고</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: 내용+목록)
- tree: 카테고리
- color: 카테고리 글자색
- bgColor: 카테고리 배경색
- activeColor: 선택시 글자색
- activeBgColor: 선택시 배경색
- labelLength: 표현될 카테고리 글자 수
- showValue: 카테고리 글 수 표현(0:숨김, 1:보임)
- contentWidth: 콘텐츠영역 가로 사이즈, 이 사이즈에 맞춰 에디터의 위지윅이 제대로 구현된다.
- cover: 홈 커버 기본값으로 자세한 내용은 '홈 커버 > 기본값' 장에서 설명합니다.
홈 커버
홈 커버에 사용한 아이템을 정의합니다. 자세한 내용은 '홈 커버 > 정의' 장에서 설명합니다.
스킨 옵션
스킨 옵션에서 제공할 옵션을 정의합니다. 자세한 내용은 '스킨 옵션 > 옵션 정의' 장에서 설명합니다.
리스트 스타일
사용할 수 있는 글 목록 스타일을 정의합니다. 자세한 내용은 '리스트 > 리스트 스타일' 장에서 설명합니다.
치환자 구조
티스토리의 치환자는 그룹치환자, 값치환자의 2가지 형태를 가지고 있습니다. 그룹치환자는 내부에 스킨 데이터를 포함하며 렌더링된 값으로 변환됩니다. 값치환자는 해당하는 값으로 변환됩니다.
예
<s_tag>
<div class="taglog">
<h3>태그</h3>
<ul>
<s_tag_rep>
<li><a href="" class=""></a></li>
</s_tag_rep>
</ul>
</div>
</s_tag>
- 그룹치환자:
<s_tag>
, <s_tag_rep>
- 값치환자:
,
,
그룹치환자
<s_NAME>VALUE</s_NAME>
값치환자
공통 치환자
스킨 치환자 그룹
<s_t3>
: 티스토리 공통 javascript 삽입 (필수)
<!-- 치환 전 -->
<body>
<s_t3>
...
</s_t3>
</body>
<!-- 치환 후 -->
<body>
<script type="text/javascript" src="https://t1.daumcdn.net/tistory_admin/blogs/script/blog/common.js"></script>
<div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div>
...
</body>
기본 정보
블로그 정보
라이브러리 브랜드
: 블로그 제목
https://tistory1.daumcdn.net/tistory/3045799/attach/03a32db2cebe41198c9508d7c20b4ff1
: 블로그 대표 이미지 url
: 블로그 대표 이미지를 포함한 IMG 태그
라이브러리는 인간이 지닌 위대한 능력인 상상력을 기반으로 하여 여러가지 콘텐츠를 다루고자 합니다.
: 블로그 설명
라이브러리 브랜드
: 블로그 소유자의 필명
블로그 URL
https://creativestudio.kr/
: 블로그 url
https://stylus.tistory.com/rss
: rss feed 주소
https://stylus.tistory.com/tag
: 태그로그 url
https://stylus.tistory.com/guestbook
: 방명록 url
기타
티스토리 스킨 가이드
: 페이지 제목
: 블로그 메뉴 리스트
tt-body-page
: 페이지 타입에 따른 id
페이지 타입 |
body_id |
홈화면 |
tt-body-index |
글화면 |
tt-body-page |
카테고리 글 리스트 |
tt-body-category |
보관함 글 리스트 |
tt-body-archive |
태그 리스트 |
tt-body-tag |
검색결과 리스트 |
tt-body-search |
방명록 |
tt-body-guestbook |
지역로그 |
tt-body-location |
사용 예
<html>
<head>
<title>티스토리 스킨 가이드</title>
</head>
<body id='tt-body-page'>
<s_t3>
<header>
<h1><a href="https://creativestudio.kr/">라이브러리 브랜드</a></h1>
<!-- blog_menu사용 -->
<!-- 메뉴 직접 구성 -->
<ul class="blogMenu">
<li><a href="https://stylus.tistory.com/rss">RSS구독</a></li>
<li><a href="https://stylus.tistory.com/tag">태그</a></li>
<li><a href="https://stylus.tistory.com/guestbook">방명록</a></li>
</ul>
</header>
<section class="sidebar">
<!-- blog_image 사용 -->
<div class="blogInfo">
<div class="blogImage"> </div>
<div class="blogDesc">라이브러리는 인간이 지닌 위대한 능력인 상상력을 기반으로 하여 여러가지 콘텐츠를 다루고자 합니다. <span class="userID">라이브러리 브랜드</span></div>
</div>
<!-- image 사용 -->
<div class="blogInfo">
<div class="blogImage"><img src="https://tistory1.daumcdn.net/tistory/3045799/attach/03a32db2cebe41198c9508d7c20b4ff1"></div>
<div class="blogDesc">라이브러리는 인간이 지닌 위대한 능력인 상상력을 기반으로 하여 여러가지 콘텐츠를 다루고자 합니다. <span class="userID">라이브러리 브랜드</span></div>
</div>
</section>
</s_t3>
</body>
</html>
홈 커버
홈 커버는 홈화면을 꾸미기 위해 제공되는 치환자입니다.
<s_cover_group>
: 커버 그룹 치환자
<s_cover_rep>
: 개별 커버 표시
<s_cover>
: 개별 커버. name 애트리뷰트로 이름을 지정한다. 정의되지 않은 이름의 커버는 사용되지 않는다.
: 개별 커버 타이틀
<s_cover_url>
: 커버 url이 있는 경우에만 치환
<s_cover_item>
: 개별 커버 컨텐츠
<s_cover_item_not_article_info>
: 컨텐츠가 글이 아닌 경우에만 치환 (내부 치환자는 s_cover_item에 직접 사용 가능)
: 컨텐츠 타이틀
: 컨텐츠 요약/내용
: 컨텐츠 url
<s_cover_item_thumbnail>
: 컨텐츠 이미지가 있는 경우에만 치환
<s_cover_item_article_info>
: 컨텐츠가 글인 경우에만 치환
: 컨텐츠 타이틀
: 컨텐츠 요약/내용
: 컨텐츠 url
<s_cover_item_thumbnail>
: 컨텐츠 이미지가 있는 경우에만 치환
: 카테고리 명
: 카테고리 url
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 댓글 수
치환자 사용 예
<s_cover_group>
<s_cover_rep>
<s_cover name='featured'>
<div class='featured'>
<s_cover_item>
<div class='featured-item'>
<s_cover_item_thumbnail>
<img class="image" src="">
</s_cover_item_thumbnail>
<strong class="title"></strong>
<a href="" class="action">자세히 보기</a>
</div>
</s_cover_item>
<button class='btn-prev'><</button>
<button class='btn-next'>></button>
</div>
</s_cover>
<s_cover name='list'>
<div id="mArticle" class="article_skin">
<s_cover_item>
<s_cover_item_article_info>
<div class="list_content">
<s_cover_item_thumbnail>
<a href="" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C148x148/?fname="></a>
</s_cover_item_thumbnail>
<a href="" class="link_post">
<strong class="tit_post"></strong>
<p class="txt_post"></p>
</a>
<div class="detail_info">
<a href="" class="link_cate"></a>
<span class="txt_bar"></span>
</div>
</div>
</s_cover_item_article_info>
<s_cover_item_not_article_info>
<div class="list_content">
<s_cover_item_thumbnail>
<a href="" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C148x148/?fname="></a>
</s_cover_item_thumbnail>
<a href="" class="link_post">
<strong class="tit_post"></strong>
<p class="txt_post"></p>
</a>
</div>
</s_cover_item_not_article_info>
</s_cover_item>
<s_cover_url>
<a class="btn-more" href="">더보기</a>
</s_cover_url>
</div>
</s_cover>
</s_cover_rep>
</s_cover_group>
정의 (index.xml)
커버를 사용하기 위해서는 스킨 정보 파일에 커버 아이템을 정의해야 합니다.
<cover>
<item>
<name>커버 아이템 이름</name>
<label>사용자에게 표시할 이름</label>
<description>설명</description>
</item>
</cover>
정의 예
<cover>
<item>
<name>featured</name>
<label><![CDATA[Featured]]></label>
<description><![CDATA[강조할 글을 표시합니다.]]></description>
</item>
<item>
<name>list</name>
<label><![CDATA[리스트]]></label>
<description><![CDATA[글 리스트를 표시합니다.]]></description>
</item>
</cover>
기본값
스킨 적용 즉시 제작자가 추천하는 홈커버가 적용되도록 하기 위해서 기본값을 사용할 수 있습니다. 스킨 정보 파일의 기본값에 JSON 값을 string으로 설정합니다.
<default>
<cover>
<![CDATA[ 홈 커버 기본값 ]]>
</cover>
</default>
기본값 JSON 구조
[
{
"name": "정의된 커버 아이템 name",
"title": "커버 타이틀",
"dataType": "내용의 데이터 타입",
"data": "타입에 해당하는 데이터"
},
...
]
- name: 정의된 커버 아이템으로 없는 커버를 사용할 경우 무시됩니다.
- title: 커버타이틀로 사용할 string 입니다.
- dataType: 내용유형으로 스킨 에디터에서 제공하는 유형 중 '최신 글', '직접 입력' 만 사용할 수 있습니다.
- RECENT: 최신 글
- CUSTOM: 직접 입력
- data: 커버 내용으로 유형별로 형태가 다릅니다.
- RECENT: 카테고리와 개수를 설정할 수 있습니다.
{
"category": "ALL",
"size": 5
}
- category: 사용자의 카테고리를 알 수 없으므로 전체(ALL), 공지사항(NOTICE)만 사용할 수 있습니다.
- size: 표시될 개수를 설정합니다. 1-100 까지 설정할 수 있습니다.
- CUSTOM: 표시될 내용을 모두 설정
{
"title": "컨텐츠 타이틀",
"summary": "컨텐츠 타이틀",
"url": "컨텐츠 요약/내용",
"thumbnail": "컨텐츠 이미지"
}
기본값 예
[
{
"name": "featured",
"title": "",
"dataType": "CUSTOM",
"data": [
{
"title": "첫번째 항목",
"summary": "첫번째 항목의 summary",
"url": "https://www.tistory.com",
"thumbnail": "https://www.tistory.com/sample.png"
},
{
"title": "두번째 항목",
"summary": "두번째 항목의 summary",
"url": "https://www.tistory.com",
"thumbnail": "https://www.tistory.com/sample.png"
}
]
},
{
"name": "list",
"title": "",
"dataType": "LIST",
"data": {
"category": "ALL",
"size": 5
}
}
]
스킨 옵션
<s_if_var_{VARIABLE_NAME}>
: 옵션의 값이 있으면 (bool 타입인 경우 true이면) 치환
<s_not_var_{VARIABLE_NAME}>
: 옵션의 값이 없으면 (bool 타입인 경우 false이면) 치환
: 옵션의 값
<style>
.wrap_sub {
background-image: url('');
}
</style>
<s_if_var_scroll-load>
<style>
.article_skin .area_paging .inner_paging.scroll_spinner {
width:48px; height:48px;
background:url('./images/spinner.gif') no-repeat;
height: 48px;
width: 48px;
margin: 0 auto;
}
.article_skin .area_paging .inner_paging.scroll_spinner * {
display:none
}
</style>
<script src="./images/scroll-load.js"></script>
</s_if_var_scroll-load>
옵션 정의 (index.xml)
<variables>
<variablegroup name="그룹이름">
<variable>
<name>치환자에서 사용할 이름</name>
<label>사용자에게 표시할 이름</label>
<description>설명 (optional)</description>
<type>타입</type>
<option>max, min, select option등 값을 설정하는데 사용되는 정보 (optional: SELECT타입의 경우 필수)</option>
<default>설정하지 않은 경우 기본 값</default>
</variable>
</variablegroup>
</variables>
type
- STRING: 문자 입력
- SELECT: 옵션 선택 (옵션은 name, label, value 값을 가진 json객체로 정의)
- option 예
<option><![CDATA[
[
{"name":"light", "label":"밝은색", "value":"light"},
{"name":"dark", "label":"어두운색", "value":"dark"}
]
]]></option>
- IMAGE: 이미지 url
- BOOL: true/false
- COLOR: 컬러값 (#000000)
옵션 정의 사용 예
<variables>
<variablegroup>
<variable>
<name>scroll-load</name>
<label>
<![CDATA[ 무한스크롤 ]]>
</label>
<type>BOOL</type>
<option />
<default>true</default>
<description>
<![CDATA[ 글 리스트 끝에 다다르면 다음 페이지를 불러옵니다. ]]>
</description>
</variable>
</variablegroup>
<variablegroup name="디자인">
<variable>
<name>cover-image</name>
<label>
<![CDATA[ 커버이미지 ]]>
</label>
<type>IMAGE</type>
<option />
<default>
<![CDATA[ https://t1.daumcdn.net/tistory/0/Ray2/images/header_default.jpg ]]>
</default>
<description>
<![CDATA[ 커버 이미지를 변경합니다. ]]>
</description>
</variable>
<variable>
<name>point-color</name>
<label>
<![CDATA[ 대표 색 ]]>
</label>
<type>COLOR</type>
<option />
<default><![CDATA[#6bacce]]></default>
<description>
<![CDATA[대표 색을 사용합니다.]]>
</description>
</variable>
</variablegroup>
</variables>
태그 클라우드 치환자
태그 클라우드는 사용한 태그 리스트를 출력합니다.
태그 그룹
태그 정보
<s_tag_rep>
: 개별태그 그룹치환자
: 태그가 포함된 글을 출력하기 위한 URL
: 총 5단계가 있는데 자주 사용한 순서로 cloud1
-cloud5
가 표시됩니다.
: 태그의 이름
예
<!-- 스킨 -->
<s_tag>
<div class="taglog">
<h3>태그</h3>
<ul>
<s_tag_rep>
<li>
<a href="" class=""></a>
</li>
</s_tag_rep>
</ul>
</div>
</s_tag>
<!-- 변환 예 -->
<div class="taglog">
<h3>태그</h3>
<ul>
<li>
<a href="/tag/tistory" class="cloud1">tistory</a>
</li>
<li>
<a href="/tag/kakao" class="cloud4">kakao</a>
</li>
<li>
<a href="/tag/blog" class="cloud5">blog</a>
</li>
</ul>
</div>
방명록
방명록 그룹
<s_guest>
<div class="guestbook">
<h3>방명록</h3>
<div class="guestWrite">입력 폼</div>
<div class="guestList">리스트</div>
</div>
</s_guest>
입력 폼
<s_guest_input_form>
: 방명록을 달기 위한 입력폼을 출력합니다
: 글 내용 입력박스 이름
: 입력 완료 온클릭 이벤트
<s_guest_member>
: 로그인을 하지 않았거나 블로그 소유자가 아닌경우 보여지는 영역
<s_guest_form>
: 로그인을 하지 않았을경우 보여지는 영역
: 이름입력 박스 이름
: 이름
: 비밀번호 입력 박스 이름
: 비밀번호
: 홈페이지 입력 박스 이름
: 홈페이지
<s_guest_input_form>
<div class="guestWrite">
<s_guest_member>
<s_guest_form>
<div>
<input type="text" name="" value="" />
<label for="name"> : 이름 </label>
</div>
<div>
<input type="password" maxlength="8" name="" value="" />
<label for="password"> : 패스워드 </label>
</div>
<div>
<input type="text" name="" value="" />
<label for="homepage"> : 홈페이지 </label>
</div>
</s_guest_form>
</s_guest_member>
<div>
<textarea name="" cols="50" rows="6"></textarea>
</div>
<div>
<input type="submit" value="안부 남기기" onclick=""/>
</div>
</div>
</s_guest_input_form>
리스트
<s_guest_container>
: 방명록 리스트 그룹치환자
<s_guest_rep>
: 방명록 정보 그룹치환자
<s_guest_reply_container>
: '방명록'의 댓글 리스트를 출력할 영역입니다.
<s_guest_reply_rep>
: '방명록' 댓글 리스트의 반복열입니다
내용 (rep 내부)
: 방명록의 고유 ID
: 방명록의 글의 목록에 반복되는 스타일 + admin 아이디 앞에 아이콘
: 글쓴사람 이름
: 글쓴 날짜
: 글 내용
: 답글 삭제 온클릭 이벤트
: 답글 수정 온클릭 이벤트
<s_guest_container>
<div class="guestList">
<ol>
<s_guest_rep>
<li id=''>
<div class="">
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="#" onclick="">MODIFY/DELETE</a>
<a href="#" onclick="">REPLY</a>
</span>
<p></p>
</div>
<s_guest_reply_container>
<ul>
<s_guest_reply_rep>
<li id=''>
<div class="">
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="#" onclick="">MODIFY/DELETE </a>
</span>
<p></p>
</div>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ol>
</div>
</s_guest_container>
글 치환자
글 정보
<s_article_rep>
: 글 그룹 치환자
: 블로그 글의 고유 주소
: 블로그 글의 제목
: 카테고리 링크
: 카테고리 명
: 글쓴 날짜/시간 (yyyy. m. d. HH:MM)
: 글쓴 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 작성자 이름 (*팀블로그용 치환자)
: 블로그 본문 내용
<s_article_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
: 댓글을 열고 닫는 온클릭 이벤트
<s_rp_count>
: 댓글의 갯수를 출력하는 영역
<s_article_rep>
<div class="titleWrap">
<h2><a href=""></a></h2>
<div class="category">
<a href=""></a>
</div>
<div class="date"></div>
</div>
<div class="article">
</div>
</s_article_rep>
관리기능
<s_ad_div>
: 글 관리기능 그룹치환자 (관리 권한 있는 경우만 표시)
: 수정
: 수정 온클릭 이벤트
: 글의 현재 상태
: 상태 변경 온클릭 이벤트
: 이후 상태
: 트랙백 온클릭 이벤트
: 삭제 온클릭 이벤트
<s_ad_div>
<div class="admin">
<a href="">수정</a> :
<a href="#" onclick="">수정(창으로)</a> |
()→<a href="#" onclick=""></a> |
<a href="#" onclick="">관련글(트랙백)</a> |
<a href="#" onclick="">삭제</a>
</div>
</s_ad_div>
태그
<s_tag_label>
: 글과 관련된 태그가 출력되는 영역입니다.
<s_tag_label>
<div class="tagTrail">
<span class="tagText">TAG </span>
</div>
</s_tag_label>
퍼머링크 / 인덱스
퍼머링크 페이지에서와 인덱스 페이지에서 표시될 내용을 구분할 수 있습니다.\ (퍼머링크 페이지/인덱스 페이지 영역 밖에서 사용되는 치환자는 둘 모두에서 표시됩니다)
퍼머링크
<s_permalink_article_rep>
: 퍼머링크 페이지일 때만 표시되는 영역입니다 (내부에서 사용하는 치환자는 <s_article_rep>
내부에서 사용하는 치환자와 동일합니다)
인덱스
<s_index_article_rep>
: 인덱스 페이지일 때만 표시되는 영역입니다
: 블로그 글의 고유 주소
: 블로그 글의 제목
: 카테고리 주소
: 카테고리 이름
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 작성자 이름
: 글 내용 요약
<s_article_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
<s_rp_count>
: 댓글의 갯수를 출력하는 영역
<s_index_article_rep>
<div class="list_content">
<s_article_rep_thumbnail>
<img src="">
</s_article_rep_thumbnail>
<a href="" class="link_post">
<strong class="tit_post"></strong>
<p class="txt_post"></p>
</a>
<div class="detail_info">
<a href="" class="link_cate">
</a>
<span class="txt_bar"></span>
</div>
</div>
</s_index_article_rep>
카테고리의 다른 글
글이 속한 카테고리의 다른 글을 보여줄 수 있습니다.\ 카테고리에 속하지 않은 글에는 표시되지 않습니다.
<s_article_related>
: 카테고리 글 더보기 영역
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 발행시간
<s_article_related_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
<s_article_related>
<div class="area_related">
<strong class="tit_related">'' Related Articles</strong>
<ul class="list_related">
<s_article_related_rep>
<li class="">
<a href="" class="link_related">
<s_article_related_rep_thumbnail>
<span class="thumb_related">
<img src="" class="img_related" alt="">
</span>
</s_article_related_rep_thumbnail>
<span class="txt_related"></span>
<span class="date_related"></span>
<span class="frame_related"></span>
</a>
</li>
</s_article_related_rep>
</ul>
<a href="" class="link_more">more</a>
</div>
</s_article_related>
이전 글 / 다음 글
글의 이전 글과 다음 글을 보여줍니다. 페이징 치환자의 이전/다음 페이지 url과 동일한 글입니다.
<s_article_prev>
: 이전 글 그룹치환자. 이전 글이 있는 경우 사용됩니다.
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 작성시간
<s_article_prev_thumbnail>
: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
<s_article_next>
: 다음 글 그룹치환자. 다음 글이 있는 경우 사용됩니다.
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 작성시간
<s_article_next_thumbnail>
: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
댓글
댓글 그룹
<s_rp>
: 댓글으로 접근시 이 영역 내부의 치환자가 출력됩니다.
<s_rp>
<div class="comment">
<h3>댓글을 달아 주세요 </h3>
<div class="commentList">18-6-1 리스트 </div>
<div class="commentWrite">18-6-2 글쓰기 </div>
</div>
</s_rp>
입력 폼
<s_rp_input_form>
: 댓글을 달기 위한 입력폼을 출력합니다
: 댓글주소. 댓글들을 구분하기위해 사용합니다. 한 화면에 있는 댓글들은 각각 고유의 값을 가지고 있습니다.
: 댓글 입력 박스 이름
: 댓글 입력 온클릭 이벤트
<s_rp_member>
: 로그인을 하지 않았거나 블로그 소유자가 아닌경우 보여지는 영역
: 비밀글 체크박스 이름
<s_rp_guest>
: 로그인을 하지 않았을경우 보여지는 영역
: 이름입력 박스 이름
: 이름
: 비밀번호 입력 박스 이름
: 비밀번호
: 홈페이지 입력 박스 이름
: 홈페이지
<s_rp_input_form>
<div class="commentWrite">
<s_rp_member>
<s_rp_guest>
<p>
<input type="text" name="" value="" />
<label for="name"> : 이름 </label>
</p>
<p>
<input type="password" maxlength="8" name="" value="" />블로그 관리자일 경우 password field에 미리 비밀번호를 넣어놓기 위해 만들어 놓았던 치환자였으나, 지금은 사용되지 않음.. (현재는 블로그 관리자일 경우 password field가 나타나지
않음.)
<label for="password"> : 패스워드 </label>
</p>
<p>
<input type="text" class="homepage" name="" value="" />
<label for="homepage"> : 홈페이지 </label>
</p>
</s_rp_guest>
<p class="secretWrap">
<input type="checkbox" name="" class="checkbox" />
<label for="secret"> 비밀글 </label>
</p>
</s_rp_member>
<p>
<textarea name="" rows="10" cols="50"></textarea>
</p>
<p>
<input type="submit" value="댓글 달기" onclick="" />
</p>
</div>
</s_rp_input_form>
댓글 리스트 구조
<s_rp_container>
: 등록된 '댓글' 리스트를 출력할 영역입니다
<s_rp_rep>
: '댓글' 리스트의 반복열입니다
<s_rp2_container>
: '댓글'의 댓글 리스트를 출력할 영역입니다.
<s_rp2_rep>
: '댓글' 댓글 리스트의 반복열입니다
댓글 내용 (rep 내부)
: 댓글의 고유 ID
: 댓글의 글의 목록에 반복되는 스타일 + admin 아이디 앞에 아이콘
: 글쓴사람 이름
: 댓글작성자의 프로필 이미지
: 글쓴 날짜
: 글 내용
: 댓글 주소
: 답글 삭제 온클릭 이벤트
: 답글 수정 온클릭 이벤트
<div class="commentList">
<s_rp_container>
<ol>
<s_rp_rep>
<li id=''>
<div class="">
<span class="image"></span>
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="" class="address">
<span>댓글주소</span>
</a>
<a href="#" onclick="" class="modify">
<span>수정/삭제</span>
</a>
<a href="#" onclick="" class="write">
<span>댓글쓰기</span>
</a>
</span>
<p></p>
</div>
<s_rp2_container>
<ul>
<s_rp2_rep>
<li id=''>
<div class="">
<span class="image"></span>
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="" class="address">
<span>댓글주소</span>
</a>
<a href="#" onclick="" class="modify">
<span>수정/삭제</span>
</a>
</span>
<p></p>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ol>
</s_rp_container>
</div>
공지사항 치환자
<s_notice_rep>
: 공지사항 그룹 치환자
: '공지사항'에 등록된 글의 고유 주소
: 글 제목
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 본문 내용
: 작성자 이름 (*팀블로그용 치환자)
<s_notice_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
<s_notice_rep>
<div class="entryNotice">
<div class="titleWrap">
<h2><a href=""></a></h2>
<span class="date"> </span>
</div>
<div class="article">
</div>
</div>
</s_notice_rep>
퍼머링크 / 인덱스
퍼머링크 페이지에서와 인덱스 페이지에서 표시될 내용을 구분할 수 있습니다.\ (퍼머링크 페이지/인덱스 페이지 영역 밖에서 사용되는 치환자는 둘 모두에서 표시됩니다)
퍼머링크
<s_permalink_article_rep>
: 퍼머링크 페이지일 때만 표시되는 영역입니다 (내부에서 사용하는 치환자는 <s_article_rep>
내부에서 사용하는 치환자와 동일합니다)
인덱스
<s_index_article_rep>
: 인덱스 페이지일 때만 표시되는 영역입니다
: '공지사항'에 등록된 글의 고유 주소
: 글 제목
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 본문 내용
: 작성자 이름 (*팀블로그용 치환자)
: 글 내용 일부
<s_notice_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
<s_index_article_rep>
<div class="list_content">
<s_notice_rep_thumbnail>
<img src="">
</s_notice_rep_thumbnail>
<a href="" class="link_post">
<strong class="tit_post"></strong>
<p class="txt_post"></p>
</a>
<div class="detail_info">
<a href="" class="link_cate">
</a>
<span class="txt_bar"></span>
</div>
</div>
</s_index_article_rep>
보호글 치환자
<s_article_protected>
: 보호글 그룹치환자
: 보호글의 고유 주소
: 보호글의 제목
: 카테고리 링크
: 카테고리 명
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 보호글의 비밀번호 텍스트 박스의 Id값(label 사용 용도)
: 보호글의 비밀번호를 입력하고 엔터키나 확인버튼을 눌렀을 때 실행될 자바스크립트 코드가 들어갑니다.
: 작성자 이름 (*팀블로그용 치환자)
<s_article_protected>
<div class="entryProtected">
<h2><a href=""></a></h2>
<span class="date"></span>
<p>보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.</p>
<p>
<label for="">비밀번호 ::</label>
<input type="password" maxlength="16" id="" name="" value="" onkeydown="if (event.keyCode == 13)" />
<input type="button" class="submit" value="submit" onclick="" />
</p>
</div>
</s_article_protected>
공지사항 치환자
<s_page_rep>
: '페이지'가 출력되는 영역입니다.\ (스킨에 페이지치환자가 존재하지 않는 경우 글 치환자에 페이지가 표시됩니다.)
: 고유 주소
: 제목
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 본문 내용
: 작성자 이름 (*팀블로그용 치환자)
<s_page_rep>
<div>
<h2><a href=""></a></h2>
<div>
</div>
</div>
</s_page_rep>
리스트 치환자
리스트 치환자는 카테고리, 검색, 태그의 글 리스트를 표시합니다.
리스트 그룹
<s_list>
: 리스트 그룹 치환자
: 카테고리 이름, 검색어, 태그명
: 글의 총 개수
: 리스트 설명 (카테고리인 경우 카테고리 설명, 그외 블로그 설명)
: 리스트 스타일 값 (class attribute로 활용 가능)
<s_list_image>
: 리스트 대표 이미지가 있는 경우 동작
: 리스트 대표 이미지 (카테고리인 경우 카테고리 대표이미지, 그외 블로그 대표이미지)
아이템 반복 그룹
<s_list_empty>
: 리스트에 글이 없는 경우 보이는 영역
<s_list_rep>
: 리스트 아이템이 반복되는 영역
: 글의 고유 주소
: 글 작성 날짜 (yyyy.mm.dd)
: 글 작성 세부시간 - 연도 (yyyy)
: 글 작성 세부시간 - 월 (mm)
: 글 작성 세부시간 - 일 (dd)
: 글 작성 세부시간 - 시 (HH)
: 글 작성 세부시간 - 분 (MM)
: 글 작성 세부시간 - 초 (SS)
: 글의 제목
: 글이 속한 카테고리 이름
: 글이 속한 카테고리 글 목록 url
: 댓글 수
: 작성자 이름
: 글 내용 요약
<s_list_rep_thumbnail>
: 대표 이미지가 있는 경우 치환
리스트 스타일
리스트 스타일을 사용하기 위해서는 스킨 정보 파일에 리스트 스타일 아이템을 정의해야 합니다. 리스트 스타일을 정의하면 카테고리 관리화면에서 리스트 스타일이 표시되고 사용자가 선택할 수 있습니다. 이를 사용하여 카테고리별로 다른 스타일을 적용할 때 사용할 수 있습니다.
<liststyle>
<item>
<label>표시할 이름</label>
<value>사용될 값</value>
</item>
</liststyle>
사용 예
<!-- 스킨 예 -->
<s_list>
<div class="searchList ">
<div <s_list_image>style="background-image:url('')"</s_list_image>>
<h3>''에 해당되는 글 건</h3>
<p></p>
</div>
<ol>
<s_list_rep>
<li>
<span class="date"></span>
<a href=""></a>
<span class="cnt"></span>
<s_list_rep_thumbnail>
<img src="">
</s_list_rep_thumbnail>
</li>
</s_list_rep>
</ol>
</div>
</s_list>
<!-- 변환 예 -->
<div class="searchList grid">
<div style="background-image:url('https://sample.com/image.jpg')">
<h3>'업데이트 소식'에 해당되는 글 2건</h3>
<p>새롭게 업데이트되는 내용을 알려드립니다.</p>
</div>
<ol>
<li>
<span class="date">2016.01.25</span>
<a href="/2289">1월 초대장이 배포되었습니다.</a>
<span class="cnt">8</span>
<img src="https://s1.daumcdn.net/cfile/tistory/1234">
</li>
<li>
<span class="date">2015.12.22</span>
<a href="/2283">12월 초대장이 배포되었습니다.</a>
<span class="cnt">19</span>
<img src="https://s1.daumcdn.net/cfile/tistory/5678">
</li>
</ol>
</div>
페이징
리스트, 글, 방명록에서 공통으로 사용하는 페이징 치환자
<s_paging>
: 페이지가 출력되는 영역입니다
<s_paging_rep>
: 페이지가 반복 출력됩니다
: 이전 페이지 링크
: 페이지 링크
: 페이지 번호
: 다음 페이지 링크
<s_paging>
<div class="paging">
<a class="">◀ PREV </a>
<span class="numbox">
<s_paging_rep>
<a class="num">[]</a>
</s_paging_rep>
</span>
<a class="">NEXT ▶</a>
</div>
</s_paging>
사이드바 구조
<s_sidebar>
: 사이드바 그룹치환자
<s_sidebar_element>
: 사이드바 개별 엘리먼트 그룹치환자\ 첫번째 줄의 주석 <!-- TITLE -->
은 사이드바의 타이틀로 사용됩니다.
<div id="sidebar">
<s_sidebar>
<!-- 오른쪽 사이드바 -->
<s_sidebar_element>
<!-- 카테고리 -->
...
</s_sidebar_element>
<s_sidebar_element>
<!--최근에 올라온 글 -->
...
</s_sidebar_element>
<s_sidebar_element>
<!-- 카운터 -->
...
</s_sidebar_element>
</s_sidebar>
<s_sidebar>
<!-- 배너 삽입 사이드바 -->
<s_sidebar_element>
<!-- 배너 모듈 - 태터툴즈 -->
...
</s_sidebar_element>
<s_sidebar_element>
<!-- 배너모듈 - 올린 -->
...
</s_sidebar_element>
<s_sidebar_element>
<!-- 배너모듈 - RSS Feed -->
...
</s_sidebar_element>
</s_sidebar>
</div>
최근 공지사항
<s_rct_notice>
: 공지사항 리스트를 출력할 영역입니다
<s_rct_notice_rep>
: 공지사항 리스트를 반복 출력합니다
: 공지사항의 고유 주소
: 공지사항의 글 제목
<s_sidebar_element>
<!-- 공지사항 -->
<s_rct_notice>
<div class="notice">
<ul>
<s_rct_notice_rep>
<li>
<a href=""></a>
</li>
</s_rct_notice_rep>
</ul>
</div>
</s_rct_notice>
</s_sidebar_element>
최근 글
<s_rctps_rep>
: 최근에 올라온 글을 반복 출력합니다
: 글 주소
: 글 제목
: 글 댓글 갯수
: 작성자 이름 (*팀블로그용 치환자)
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
<s_rctps_rep_thumbnail>
: 대표 이미지가 있는 경우 치환
: 카테고리 이름
: 카테고리 리스트 url
<s_sidebar_element>
<!-- 최근에 올라온 글 -->
<div class="recentPost">
<h3>최근에 올라온 글 </h3>
<ul>
<s_rctps_rep>
<li>
<a href=""></a>
<span class="cnt"></span>
<s_rctps_rep_thumbnail>
<img src=""/>
</s_rctps_rep_thumbnail>
<a href=""></a>
</li>
</s_rctps_rep>
</ul>
</div>
</s_sidebar_element>
인기글
<s_rctps_popular_rep>
: 인기글을 반복 출력합니다
: 글 주소
: 글 제목
: 글 댓글 갯수
: 작성자 이름 (*팀블로그용 치환자)
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
<s_rctps_rep_thumbnail>
: 대표 이미지가 있는 경우 치환
: 카테고리 이름
: 카테고리 리스트 url
<s_sidebar_element>
<!-- 이 블로그 인기글 -->
<div class="popularPost">
<h3>이 블로그 인기글 </h3>
<ul>
<s_rctps_popular_rep>
<li>
<a href=""></a>
<span class="cnt"></span>
<s_rctps_rep_thumbnail>
<img src=""/>
</s_rctps_rep_thumbnail>
<a href=""></a>
</li>
</s_rctps_popular_rep>
</ul>
</div>
</s_sidebar_element>
최근 댓글
<s_rctrp_rep>
: 댓글을 반복 출력합니다
: 댓글로 이동할 주소
: 댓글의 본문 일부
: 댓글을 쓴 사람 이름
: 댓글을 쓴 시간
<s_sidebar_element>
<!-- 최근에 달린 댓글 -->
<div class="recentComment">
<h3>최근에 달린 댓글</h3>
<ul id="recentComments">
<s_rctrp_rep>
<li>
<a href="">.</a>
<span class="info_wrap">
<span class="name"></span>
<span class="date"></span>
</span>
</li>
</s_rctrp_rep>
</ul>
</div>
</s_sidebar_element>
카테고리
|
ALL (5658)
|
|
|
Google Search Console (4)
|
|
|
Persona (554)
|
|
|
Advanced Management Program (1)
|
|
|
: 폴더 형식의 카테고리
: 리스트 형식의 카테고리
<s_sidebar_element>
<!-- 카테고리 -->
<div class="category">
<h3>카테고리</h3>
|
ALL (5658)
|
|
|
Google Search Console (4)
|
|
|
Persona (554)
|
|
|
Advanced Management Program (1)
|
|
|
</div>
<div class="category">
<h3>카테고리</h3>
</div>
</s_sidebar_element>
랜덤태그
<s_random_tags>
: 태그를 반복 출력합니다
: 태그에 해당되는 주소
: Tag Cloud 의 크기나 색깔을 설정 (총 5단계의 레벨을 가지고 있으며, cloud1 ~ cloud5 까지 큰 것에서 작은 순서를 나타냅니다. 이 기능을 가지고 style 을 조정하시여 원하시는 스타일의 Tag Cloud 를 만드실 수 있습니다)
: 태그의 이름
<s_sidebar_element>
<!-- 태그 클라우드 -->
<div class="tagbox">
<h3>태그목록</h3>
<ul>
<s_random_tags>
<li>
<a href="" class=""> </a>
</li>
</s_random_tags>
</ul>
</div>
</s_sidebar_element>
방문자 수
: 총 방문자수
: 오늘 방문자수
: 어제 방문자수
<s_sidebar_element>
<!-- 방문자수 -->
<div class="counter">
<span class="total">Total : </span>
<span class="today">Today : </span>
<span class="yesterday">Yesterday : </span>
</div>
</s_sidebar_element>
검색
<s_search>
: 검색 입력폼을 출력할 영역입니다
: 검색어 입력 박스 이름
: 검색어
: 검색 온클릭 이벤트
<s_sidebar_element>
<!-- 검색 -->
<div class="search">
<s_search>
<input type="text" name="" value="" onkeypress="if (event.keyCode == 13) { }"
/>
<input value="검색" type="button" onclick="" class="submit" />
</s_search>
</div>
</s_sidebar_element>
: 블로그 본문 내용
<s_article_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcIzeQ8%2FbtqEBmXmaW4%2FsSNvY44HrIWmZ8HuVWI9T0%2Fimg.gif
: 대표 이미지 썸네일 주소
https://blog.kakaocdn.net/dn/cIzeQ8/btqEBmXmaW4/sSNvY44HrIWmZ8HuVWI9T0/img.gif
: 대표 이미지 원본 주소
: 댓글을 열고 닫는 온클릭 이벤트
<s_rp_count>
: 댓글의 갯수를 출력하는 영역
<s_article_rep>
<div class="titleWrap">
<h2><a href="/1463">티스토리 스킨 가이드</a></h2>
<div class="category">
<a href="/category/Tistory/Tistory%20Skin">Tistory/Tistory Skin</a>
</div>
<div class="date">2020. 6. 3. 05:08</div>
</div>
<div class="article">
티스토리에서는 스킨을 통해서 사이트를 자유롭게 디자인할 수 있습니다. 스킨은 치환자를 사용하여 제작되고 사용된 치환자에는 티스토리의 데이터가 대입되어 티스토리의 디자인이 완성됩니다.
이 문서는 스킨에서 사용하는 치환자에 대해 설명합니다.
파일구조
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 등을 업로드하여 스킨에서 사용합니다.
스킨 정보 파일
스킨에 필요한 정보를 담고 있는 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>댓글 <span class="cnt">하나</span> 달렸습니다.</single>
</commentMessage>
<trackbackMessage>
<none>받은 트랙백이 없고</none>
<single>트랙백이 <span class="cnt">하나</span>이고</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: 내용+목록)
- tree: 카테고리
- color: 카테고리 글자색
- bgColor: 카테고리 배경색
- activeColor: 선택시 글자색
- activeBgColor: 선택시 배경색
- labelLength: 표현될 카테고리 글자 수
- showValue: 카테고리 글 수 표현(0:숨김, 1:보임)
- contentWidth: 콘텐츠영역 가로 사이즈, 이 사이즈에 맞춰 에디터의 위지윅이 제대로 구현된다.
- cover: 홈 커버 기본값으로 자세한 내용은 '홈 커버 > 기본값' 장에서 설명합니다.
홈 커버
홈 커버에 사용한 아이템을 정의합니다. 자세한 내용은 '홈 커버 > 정의' 장에서 설명합니다.
스킨 옵션
스킨 옵션에서 제공할 옵션을 정의합니다. 자세한 내용은 '스킨 옵션 > 옵션 정의' 장에서 설명합니다.
리스트 스타일
사용할 수 있는 글 목록 스타일을 정의합니다. 자세한 내용은 '리스트 > 리스트 스타일' 장에서 설명합니다.
치환자 구조
티스토리의 치환자는 그룹치환자, 값치환자의 2가지 형태를 가지고 있습니다. 그룹치환자는 내부에 스킨 데이터를 포함하며 렌더링된 값으로 변환됩니다. 값치환자는 해당하는 값으로 변환됩니다.
예
<s_tag>
<div class="taglog">
<h3>태그</h3>
<ul>
<s_tag_rep>
<li><a href="" class=""></a></li>
</s_tag_rep>
</ul>
</div>
</s_tag>
- 그룹치환자:
<s_tag>
, <s_tag_rep>
- 값치환자:
,
,
그룹치환자
<s_NAME>VALUE</s_NAME>
값치환자
공통 치환자
스킨 치환자 그룹
<s_t3>
: 티스토리 공통 javascript 삽입 (필수)
<!-- 치환 전 -->
<body>
<s_t3>
...
</s_t3>
</body>
<!-- 치환 후 -->
<body>
<script type="text/javascript" src="https://t1.daumcdn.net/tistory_admin/blogs/script/blog/common.js"></script>
<div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div>
...
</body>
기본 정보
블로그 정보
라이브러리 브랜드
: 블로그 제목
https://tistory1.daumcdn.net/tistory/3045799/attach/03a32db2cebe41198c9508d7c20b4ff1
: 블로그 대표 이미지 url
: 블로그 대표 이미지를 포함한 IMG 태그
라이브러리는 인간이 지닌 위대한 능력인 상상력을 기반으로 하여 여러가지 콘텐츠를 다루고자 합니다.
: 블로그 설명
라이브러리 브랜드
: 블로그 소유자의 필명
블로그 URL
https://creativestudio.kr/
: 블로그 url
https://stylus.tistory.com/rss
: rss feed 주소
https://stylus.tistory.com/tag
: 태그로그 url
https://stylus.tistory.com/guestbook
: 방명록 url
기타
티스토리 스킨 가이드
: 페이지 제목
: 블로그 메뉴 리스트
tt-body-page
: 페이지 타입에 따른 id
페이지 타입 |
body_id |
홈화면 |
tt-body-index |
글화면 |
tt-body-page |
카테고리 글 리스트 |
tt-body-category |
보관함 글 리스트 |
tt-body-archive |
태그 리스트 |
tt-body-tag |
검색결과 리스트 |
tt-body-search |
방명록 |
tt-body-guestbook |
지역로그 |
tt-body-location |
사용 예
<html>
<head>
<title>티스토리 스킨 가이드</title>
</head>
<body id='tt-body-page'>
<s_t3>
<header>
<h1><a href="https://creativestudio.kr/">라이브러리 브랜드</a></h1>
<!-- blog_menu사용 -->
<!-- 메뉴 직접 구성 -->
<ul class="blogMenu">
<li><a href="https://stylus.tistory.com/rss">RSS구독</a></li>
<li><a href="https://stylus.tistory.com/tag">태그</a></li>
<li><a href="https://stylus.tistory.com/guestbook">방명록</a></li>
</ul>
</header>
<section class="sidebar">
<!-- blog_image 사용 -->
<div class="blogInfo">
<div class="blogImage"> </div>
<div class="blogDesc">라이브러리는 인간이 지닌 위대한 능력인 상상력을 기반으로 하여 여러가지 콘텐츠를 다루고자 합니다. <span class="userID">라이브러리 브랜드</span></div>
</div>
<!-- image 사용 -->
<div class="blogInfo">
<div class="blogImage"><img src="https://tistory1.daumcdn.net/tistory/3045799/attach/03a32db2cebe41198c9508d7c20b4ff1"></div>
<div class="blogDesc">라이브러리는 인간이 지닌 위대한 능력인 상상력을 기반으로 하여 여러가지 콘텐츠를 다루고자 합니다. <span class="userID">라이브러리 브랜드</span></div>
</div>
</section>
</s_t3>
</body>
</html>
홈 커버
홈 커버는 홈화면을 꾸미기 위해 제공되는 치환자입니다.
<s_cover_group>
: 커버 그룹 치환자
<s_cover_rep>
: 개별 커버 표시
<s_cover>
: 개별 커버. name 애트리뷰트로 이름을 지정한다. 정의되지 않은 이름의 커버는 사용되지 않는다.
: 개별 커버 타이틀
<s_cover_url>
: 커버 url이 있는 경우에만 치환
<s_cover_item>
: 개별 커버 컨텐츠
<s_cover_item_not_article_info>
: 컨텐츠가 글이 아닌 경우에만 치환 (내부 치환자는 s_cover_item에 직접 사용 가능)
: 컨텐츠 타이틀
: 컨텐츠 요약/내용
: 컨텐츠 url
<s_cover_item_thumbnail>
: 컨텐츠 이미지가 있는 경우에만 치환
<s_cover_item_article_info>
: 컨텐츠가 글인 경우에만 치환
: 컨텐츠 타이틀
: 컨텐츠 요약/내용
: 컨텐츠 url
<s_cover_item_thumbnail>
: 컨텐츠 이미지가 있는 경우에만 치환
: 카테고리 명
: 카테고리 url
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 댓글 수
치환자 사용 예
<s_cover_group>
<s_cover_rep>
<s_cover name='featured'>
<div class='featured'>
<s_cover_item>
<div class='featured-item'>
<s_cover_item_thumbnail>
<img class="image" src="">
</s_cover_item_thumbnail>
<strong class="title"></strong>
<a href="" class="action">자세히 보기</a>
</div>
</s_cover_item>
<button class='btn-prev'><</button>
<button class='btn-next'>></button>
</div>
</s_cover>
<s_cover name='list'>
<div id="mArticle" class="article_skin">
<s_cover_item>
<s_cover_item_article_info>
<div class="list_content">
<s_cover_item_thumbnail>
<a href="" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C148x148/?fname="></a>
</s_cover_item_thumbnail>
<a href="" class="link_post">
<strong class="tit_post"></strong>
<p class="txt_post"></p>
</a>
<div class="detail_info">
<a href="" class="link_cate"></a>
<span class="txt_bar"></span>
</div>
</div>
</s_cover_item_article_info>
<s_cover_item_not_article_info>
<div class="list_content">
<s_cover_item_thumbnail>
<a href="" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C148x148/?fname="></a>
</s_cover_item_thumbnail>
<a href="" class="link_post">
<strong class="tit_post"></strong>
<p class="txt_post"></p>
</a>
</div>
</s_cover_item_not_article_info>
</s_cover_item>
<s_cover_url>
<a class="btn-more" href="">더보기</a>
</s_cover_url>
</div>
</s_cover>
</s_cover_rep>
</s_cover_group>
정의 (index.xml)
커버를 사용하기 위해서는 스킨 정보 파일에 커버 아이템을 정의해야 합니다.
<cover>
<item>
<name>커버 아이템 이름</name>
<label>사용자에게 표시할 이름</label>
<description>설명</description>
</item>
</cover>
정의 예
<cover>
<item>
<name>featured</name>
<label><![CDATA[Featured]]></label>
<description><![CDATA[강조할 글을 표시합니다.]]></description>
</item>
<item>
<name>list</name>
<label><![CDATA[리스트]]></label>
<description><![CDATA[글 리스트를 표시합니다.]]></description>
</item>
</cover>
기본값
스킨 적용 즉시 제작자가 추천하는 홈커버가 적용되도록 하기 위해서 기본값을 사용할 수 있습니다. 스킨 정보 파일의 기본값에 JSON 값을 string으로 설정합니다.
<default>
<cover>
<![CDATA[ 홈 커버 기본값 ]]>
</cover>
</default>
기본값 JSON 구조
[
{
"name": "정의된 커버 아이템 name",
"title": "커버 타이틀",
"dataType": "내용의 데이터 타입",
"data": "타입에 해당하는 데이터"
},
...
]
- name: 정의된 커버 아이템으로 없는 커버를 사용할 경우 무시됩니다.
- title: 커버타이틀로 사용할 string 입니다.
- dataType: 내용유형으로 스킨 에디터에서 제공하는 유형 중 '최신 글', '직접 입력' 만 사용할 수 있습니다.
- RECENT: 최신 글
- CUSTOM: 직접 입력
- data: 커버 내용으로 유형별로 형태가 다릅니다.
- RECENT: 카테고리와 개수를 설정할 수 있습니다.
{
"category": "ALL",
"size": 5
}
- category: 사용자의 카테고리를 알 수 없으므로 전체(ALL), 공지사항(NOTICE)만 사용할 수 있습니다.
- size: 표시될 개수를 설정합니다. 1-100 까지 설정할 수 있습니다.
- CUSTOM: 표시될 내용을 모두 설정
{
"title": "컨텐츠 타이틀",
"summary": "컨텐츠 타이틀",
"url": "컨텐츠 요약/내용",
"thumbnail": "컨텐츠 이미지"
}
기본값 예
[
{
"name": "featured",
"title": "",
"dataType": "CUSTOM",
"data": [
{
"title": "첫번째 항목",
"summary": "첫번째 항목의 summary",
"url": "https://www.tistory.com",
"thumbnail": "https://www.tistory.com/sample.png"
},
{
"title": "두번째 항목",
"summary": "두번째 항목의 summary",
"url": "https://www.tistory.com",
"thumbnail": "https://www.tistory.com/sample.png"
}
]
},
{
"name": "list",
"title": "",
"dataType": "LIST",
"data": {
"category": "ALL",
"size": 5
}
}
]
스킨 옵션
<s_if_var_{VARIABLE_NAME}>
: 옵션의 값이 있으면 (bool 타입인 경우 true이면) 치환
<s_not_var_{VARIABLE_NAME}>
: 옵션의 값이 없으면 (bool 타입인 경우 false이면) 치환
: 옵션의 값
<style>
.wrap_sub {
background-image: url('');
}
</style>
<s_if_var_scroll-load>
<style>
.article_skin .area_paging .inner_paging.scroll_spinner {
width:48px; height:48px;
background:url('./images/spinner.gif') no-repeat;
height: 48px;
width: 48px;
margin: 0 auto;
}
.article_skin .area_paging .inner_paging.scroll_spinner * {
display:none
}
</style>
<script src="./images/scroll-load.js"></script>
</s_if_var_scroll-load>
옵션 정의 (index.xml)
<variables>
<variablegroup name="그룹이름">
<variable>
<name>치환자에서 사용할 이름</name>
<label>사용자에게 표시할 이름</label>
<description>설명 (optional)</description>
<type>타입</type>
<option>max, min, select option등 값을 설정하는데 사용되는 정보 (optional: SELECT타입의 경우 필수)</option>
<default>설정하지 않은 경우 기본 값</default>
</variable>
</variablegroup>
</variables>
type
- STRING: 문자 입력
- SELECT: 옵션 선택 (옵션은 name, label, value 값을 가진 json객체로 정의)
- option 예
<option><![CDATA[
[
{"name":"light", "label":"밝은색", "value":"light"},
{"name":"dark", "label":"어두운색", "value":"dark"}
]
]]></option>
- IMAGE: 이미지 url
- BOOL: true/false
- COLOR: 컬러값 (#000000)
옵션 정의 사용 예
<variables>
<variablegroup>
<variable>
<name>scroll-load</name>
<label>
<![CDATA[ 무한스크롤 ]]>
</label>
<type>BOOL</type>
<option />
<default>true</default>
<description>
<![CDATA[ 글 리스트 끝에 다다르면 다음 페이지를 불러옵니다. ]]>
</description>
</variable>
</variablegroup>
<variablegroup name="디자인">
<variable>
<name>cover-image</name>
<label>
<![CDATA[ 커버이미지 ]]>
</label>
<type>IMAGE</type>
<option />
<default>
<![CDATA[ https://t1.daumcdn.net/tistory/0/Ray2/images/header_default.jpg ]]>
</default>
<description>
<![CDATA[ 커버 이미지를 변경합니다. ]]>
</description>
</variable>
<variable>
<name>point-color</name>
<label>
<![CDATA[ 대표 색 ]]>
</label>
<type>COLOR</type>
<option />
<default><![CDATA[#6bacce]]></default>
<description>
<![CDATA[대표 색을 사용합니다.]]>
</description>
</variable>
</variablegroup>
</variables>
태그 클라우드 치환자
태그 클라우드는 사용한 태그 리스트를 출력합니다.
태그 그룹
태그 정보
<s_tag_rep>
: 개별태그 그룹치환자
: 태그가 포함된 글을 출력하기 위한 URL
: 총 5단계가 있는데 자주 사용한 순서로 cloud1
-cloud5
가 표시됩니다.
: 태그의 이름
예
<!-- 스킨 -->
<s_tag>
<div class="taglog">
<h3>태그</h3>
<ul>
<s_tag_rep>
<li>
<a href="" class=""></a>
</li>
</s_tag_rep>
</ul>
</div>
</s_tag>
<!-- 변환 예 -->
<div class="taglog">
<h3>태그</h3>
<ul>
<li>
<a href="/tag/tistory" class="cloud1">tistory</a>
</li>
<li>
<a href="/tag/kakao" class="cloud4">kakao</a>
</li>
<li>
<a href="/tag/blog" class="cloud5">blog</a>
</li>
</ul>
</div>
방명록
방명록 그룹
<s_guest>
<div class="guestbook">
<h3>방명록</h3>
<div class="guestWrite">입력 폼</div>
<div class="guestList">리스트</div>
</div>
</s_guest>
입력 폼
<s_guest_input_form>
: 방명록을 달기 위한 입력폼을 출력합니다
: 글 내용 입력박스 이름
: 입력 완료 온클릭 이벤트
<s_guest_member>
: 로그인을 하지 않았거나 블로그 소유자가 아닌경우 보여지는 영역
<s_guest_form>
: 로그인을 하지 않았을경우 보여지는 영역
: 이름입력 박스 이름
: 이름
: 비밀번호 입력 박스 이름
: 비밀번호
: 홈페이지 입력 박스 이름
: 홈페이지
<s_guest_input_form>
<div class="guestWrite">
<s_guest_member>
<s_guest_form>
<div>
<input type="text" name="" value="" />
<label for="name"> : 이름 </label>
</div>
<div>
<input type="password" maxlength="8" name="" value="" />
<label for="password"> : 패스워드 </label>
</div>
<div>
<input type="text" name="" value="" />
<label for="homepage"> : 홈페이지 </label>
</div>
</s_guest_form>
</s_guest_member>
<div>
<textarea name="" cols="50" rows="6"></textarea>
</div>
<div>
<input type="submit" value="안부 남기기" onclick=""/>
</div>
</div>
</s_guest_input_form>
리스트
<s_guest_container>
: 방명록 리스트 그룹치환자
<s_guest_rep>
: 방명록 정보 그룹치환자
<s_guest_reply_container>
: '방명록'의 댓글 리스트를 출력할 영역입니다.
<s_guest_reply_rep>
: '방명록' 댓글 리스트의 반복열입니다
내용 (rep 내부)
: 방명록의 고유 ID
: 방명록의 글의 목록에 반복되는 스타일 + admin 아이디 앞에 아이콘
: 글쓴사람 이름
: 글쓴 날짜
: 글 내용
: 답글 삭제 온클릭 이벤트
: 답글 수정 온클릭 이벤트
<s_guest_container>
<div class="guestList">
<ol>
<s_guest_rep>
<li id=''>
<div class="">
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="#" onclick="">MODIFY/DELETE</a>
<a href="#" onclick="">REPLY</a>
</span>
<p></p>
</div>
<s_guest_reply_container>
<ul>
<s_guest_reply_rep>
<li id=''>
<div class="">
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="#" onclick="">MODIFY/DELETE </a>
</span>
<p></p>
</div>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ol>
</div>
</s_guest_container>
글 치환자
글 정보
<s_article_rep>
: 글 그룹 치환자
: 블로그 글의 고유 주소
: 블로그 글의 제목
: 카테고리 링크
: 카테고리 명
: 글쓴 날짜/시간 (yyyy. m. d. HH:MM)
: 글쓴 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 작성자 이름 (*팀블로그용 치환자)
: 블로그 본문 내용
<s_article_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
: 댓글을 열고 닫는 온클릭 이벤트
<s_rp_count>
: 댓글의 갯수를 출력하는 영역
<s_article_rep>
<div class="titleWrap">
<h2><a href=""></a></h2>
<div class="category">
<a href=""></a>
</div>
<div class="date"></div>
</div>
<div class="article">
</div>
</s_article_rep>
관리기능
<s_ad_div>
: 글 관리기능 그룹치환자 (관리 권한 있는 경우만 표시)
: 수정
: 수정 온클릭 이벤트
: 글의 현재 상태
: 상태 변경 온클릭 이벤트
: 이후 상태
: 트랙백 온클릭 이벤트
: 삭제 온클릭 이벤트
<s_ad_div>
<div class="admin">
<a href="">수정</a> :
<a href="#" onclick="">수정(창으로)</a> |
()→<a href="#" onclick=""></a> |
<a href="#" onclick="">관련글(트랙백)</a> |
<a href="#" onclick="">삭제</a>
</div>
</s_ad_div>
태그
<s_tag_label>
: 글과 관련된 태그가 출력되는 영역입니다.
<s_tag_label>
<div class="tagTrail">
<span class="tagText">TAG </span>
</div>
</s_tag_label>
퍼머링크 / 인덱스
퍼머링크 페이지에서와 인덱스 페이지에서 표시될 내용을 구분할 수 있습니다.\ (퍼머링크 페이지/인덱스 페이지 영역 밖에서 사용되는 치환자는 둘 모두에서 표시됩니다)
퍼머링크
<s_permalink_article_rep>
: 퍼머링크 페이지일 때만 표시되는 영역입니다 (내부에서 사용하는 치환자는 <s_article_rep>
내부에서 사용하는 치환자와 동일합니다)
인덱스
<s_index_article_rep>
: 인덱스 페이지일 때만 표시되는 영역입니다
: 블로그 글의 고유 주소
: 블로그 글의 제목
: 카테고리 주소
: 카테고리 이름
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 작성자 이름
: 글 내용 요약
<s_article_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
<s_rp_count>
: 댓글의 갯수를 출력하는 영역
<s_index_article_rep>
<div class="list_content">
<s_article_rep_thumbnail>
<img src="">
</s_article_rep_thumbnail>
<a href="" class="link_post">
<strong class="tit_post"></strong>
<p class="txt_post"></p>
</a>
<div class="detail_info">
<a href="" class="link_cate">
</a>
<span class="txt_bar"></span>
</div>
</div>
</s_index_article_rep>
카테고리의 다른 글
글이 속한 카테고리의 다른 글을 보여줄 수 있습니다.\ 카테고리에 속하지 않은 글에는 표시되지 않습니다.
<s_article_related>
: 카테고리 글 더보기 영역
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 발행시간
<s_article_related_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
<s_article_related>
<div class="area_related">
<strong class="tit_related">'' Related Articles</strong>
<ul class="list_related">
<s_article_related_rep>
<li class="">
<a href="" class="link_related">
<s_article_related_rep_thumbnail>
<span class="thumb_related">
<img src="" class="img_related" alt="">
</span>
</s_article_related_rep_thumbnail>
<span class="txt_related"></span>
<span class="date_related"></span>
<span class="frame_related"></span>
</a>
</li>
</s_article_related_rep>
</ul>
<a href="" class="link_more">more</a>
</div>
</s_article_related>
이전 글 / 다음 글
글의 이전 글과 다음 글을 보여줍니다. 페이징 치환자의 이전/다음 페이지 url과 동일한 글입니다.
<s_article_prev>
: 이전 글 그룹치환자. 이전 글이 있는 경우 사용됩니다.
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 작성시간
<s_article_prev_thumbnail>
: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
<s_article_next>
: 다음 글 그룹치환자. 다음 글이 있는 경우 사용됩니다.
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 작성시간
<s_article_next_thumbnail>
: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
댓글
댓글 그룹
<s_rp>
: 댓글으로 접근시 이 영역 내부의 치환자가 출력됩니다.
<s_rp>
<div class="comment">
<h3>댓글을 달아 주세요 </h3>
<div class="commentList">18-6-1 리스트 </div>
<div class="commentWrite">18-6-2 글쓰기 </div>
</div>
</s_rp>
입력 폼
<s_rp_input_form>
: 댓글을 달기 위한 입력폼을 출력합니다
: 댓글주소. 댓글들을 구분하기위해 사용합니다. 한 화면에 있는 댓글들은 각각 고유의 값을 가지고 있습니다.
: 댓글 입력 박스 이름
: 댓글 입력 온클릭 이벤트
<s_rp_member>
: 로그인을 하지 않았거나 블로그 소유자가 아닌경우 보여지는 영역
: 비밀글 체크박스 이름
<s_rp_guest>
: 로그인을 하지 않았을경우 보여지는 영역
: 이름입력 박스 이름
: 이름
: 비밀번호 입력 박스 이름
: 비밀번호
: 홈페이지 입력 박스 이름
: 홈페이지
<s_rp_input_form>
<div class="commentWrite">
<s_rp_member>
<s_rp_guest>
<p>
<input type="text" name="" value="" />
<label for="name"> : 이름 </label>
</p>
<p>
<input type="password" maxlength="8" name="" value="" />블로그 관리자일 경우 password field에 미리 비밀번호를 넣어놓기 위해 만들어 놓았던 치환자였으나, 지금은 사용되지 않음.. (현재는 블로그 관리자일 경우 password field가 나타나지
않음.)
<label for="password"> : 패스워드 </label>
</p>
<p>
<input type="text" class="homepage" name="" value="" />
<label for="homepage"> : 홈페이지 </label>
</p>
</s_rp_guest>
<p class="secretWrap">
<input type="checkbox" name="" class="checkbox" />
<label for="secret"> 비밀글 </label>
</p>
</s_rp_member>
<p>
<textarea name="" rows="10" cols="50"></textarea>
</p>
<p>
<input type="submit" value="댓글 달기" onclick="" />
</p>
</div>
</s_rp_input_form>
댓글 리스트 구조
<s_rp_container>
: 등록된 '댓글' 리스트를 출력할 영역입니다
<s_rp_rep>
: '댓글' 리스트의 반복열입니다
<s_rp2_container>
: '댓글'의 댓글 리스트를 출력할 영역입니다.
<s_rp2_rep>
: '댓글' 댓글 리스트의 반복열입니다
댓글 내용 (rep 내부)
: 댓글의 고유 ID
: 댓글의 글의 목록에 반복되는 스타일 + admin 아이디 앞에 아이콘
: 글쓴사람 이름
: 댓글작성자의 프로필 이미지
: 글쓴 날짜
: 글 내용
: 댓글 주소
: 답글 삭제 온클릭 이벤트
: 답글 수정 온클릭 이벤트
<div class="commentList">
<s_rp_container>
<ol>
<s_rp_rep>
<li id=''>
<div class="">
<span class="image"></span>
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="" class="address">
<span>댓글주소</span>
</a>
<a href="#" onclick="" class="modify">
<span>수정/삭제</span>
</a>
<a href="#" onclick="" class="write">
<span>댓글쓰기</span>
</a>
</span>
<p></p>
</div>
<s_rp2_container>
<ul>
<s_rp2_rep>
<li id=''>
<div class="">
<span class="image"></span>
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="" class="address">
<span>댓글주소</span>
</a>
<a href="#" onclick="" class="modify">
<span>수정/삭제</span>
</a>
</span>
<p></p>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ol>
</s_rp_container>
</div>
공지사항 치환자
<s_notice_rep>
: 공지사항 그룹 치환자
: '공지사항'에 등록된 글의 고유 주소
: 글 제목
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 본문 내용
: 작성자 이름 (*팀블로그용 치환자)
<s_notice_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
<s_notice_rep>
<div class="entryNotice">
<div class="titleWrap">
<h2><a href=""></a></h2>
<span class="date"> </span>
</div>
<div class="article">
</div>
</div>
</s_notice_rep>
퍼머링크 / 인덱스
퍼머링크 페이지에서와 인덱스 페이지에서 표시될 내용을 구분할 수 있습니다.\ (퍼머링크 페이지/인덱스 페이지 영역 밖에서 사용되는 치환자는 둘 모두에서 표시됩니다)
퍼머링크
<s_permalink_article_rep>
: 퍼머링크 페이지일 때만 표시되는 영역입니다 (내부에서 사용하는 치환자는 <s_article_rep>
내부에서 사용하는 치환자와 동일합니다)
인덱스
<s_index_article_rep>
: 인덱스 페이지일 때만 표시되는 영역입니다
: '공지사항'에 등록된 글의 고유 주소
: 글 제목
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 본문 내용
: 작성자 이름 (*팀블로그용 치환자)
: 글 내용 일부
<s_notice_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
<s_index_article_rep>
<div class="list_content">
<s_notice_rep_thumbnail>
<img src="">
</s_notice_rep_thumbnail>
<a href="" class="link_post">
<strong class="tit_post"></strong>
<p class="txt_post"></p>
</a>
<div class="detail_info">
<a href="" class="link_cate">
</a>
<span class="txt_bar"></span>
</div>
</div>
</s_index_article_rep>
보호글 치환자
<s_article_protected>
: 보호글 그룹치환자
: 보호글의 고유 주소
: 보호글의 제목
: 카테고리 링크
: 카테고리 명
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 보호글의 비밀번호 텍스트 박스의 Id값(label 사용 용도)
: 보호글의 비밀번호를 입력하고 엔터키나 확인버튼을 눌렀을 때 실행될 자바스크립트 코드가 들어갑니다.
: 작성자 이름 (*팀블로그용 치환자)
<s_article_protected>
<div class="entryProtected">
<h2><a href=""></a></h2>
<span class="date"></span>
<p>보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.</p>
<p>
<label for="">비밀번호 ::</label>
<input type="password" maxlength="16" id="" name="" value="" onkeydown="if (event.keyCode == 13)" />
<input type="button" class="submit" value="submit" onclick="" />
</p>
</div>
</s_article_protected>
공지사항 치환자
<s_page_rep>
: '페이지'가 출력되는 영역입니다.\ (스킨에 페이지치환자가 존재하지 않는 경우 글 치환자에 페이지가 표시됩니다.)
: 고유 주소
: 제목
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 본문 내용
: 작성자 이름 (*팀블로그용 치환자)
<s_page_rep>
<div>
<h2><a href=""></a></h2>
<div>
</div>
</div>
</s_page_rep>
리스트 치환자
리스트 치환자는 카테고리, 검색, 태그의 글 리스트를 표시합니다.
리스트 그룹
<s_list>
: 리스트 그룹 치환자
: 카테고리 이름, 검색어, 태그명
: 글의 총 개수
: 리스트 설명 (카테고리인 경우 카테고리 설명, 그외 블로그 설명)
: 리스트 스타일 값 (class attribute로 활용 가능)
<s_list_image>
: 리스트 대표 이미지가 있는 경우 동작
: 리스트 대표 이미지 (카테고리인 경우 카테고리 대표이미지, 그외 블로그 대표이미지)
아이템 반복 그룹
<s_list_empty>
: 리스트에 글이 없는 경우 보이는 영역
<s_list_rep>
: 리스트 아이템이 반복되는 영역
: 글의 고유 주소
: 글 작성 날짜 (yyyy.mm.dd)
: 글 작성 세부시간 - 연도 (yyyy)
: 글 작성 세부시간 - 월 (mm)
: 글 작성 세부시간 - 일 (dd)
: 글 작성 세부시간 - 시 (HH)
: 글 작성 세부시간 - 분 (MM)
: 글 작성 세부시간 - 초 (SS)
: 글의 제목
: 글이 속한 카테고리 이름
: 글이 속한 카테고리 글 목록 url
: 댓글 수
: 작성자 이름
: 글 내용 요약
<s_list_rep_thumbnail>
: 대표 이미지가 있는 경우 치환
리스트 스타일
리스트 스타일을 사용하기 위해서는 스킨 정보 파일에 리스트 스타일 아이템을 정의해야 합니다. 리스트 스타일을 정의하면 카테고리 관리화면에서 리스트 스타일이 표시되고 사용자가 선택할 수 있습니다. 이를 사용하여 카테고리별로 다른 스타일을 적용할 때 사용할 수 있습니다.
<liststyle>
<item>
<label>표시할 이름</label>
<value>사용될 값</value>
</item>
</liststyle>
사용 예
<!-- 스킨 예 -->
<s_list>
<div class="searchList ">
<div <s_list_image>style="background-image:url('')"</s_list_image>>
<h3>''에 해당되는 글 건</h3>
<p></p>
</div>
<ol>
<s_list_rep>
<li>
<span class="date"></span>
<a href=""></a>
<span class="cnt"></span>
<s_list_rep_thumbnail>
<img src="">
</s_list_rep_thumbnail>
</li>
</s_list_rep>
</ol>
</div>
</s_list>
<!-- 변환 예 -->
<div class="searchList grid">
<div style="background-image:url('https://sample.com/image.jpg')">
<h3>'업데이트 소식'에 해당되는 글 2건</h3>
<p>새롭게 업데이트되는 내용을 알려드립니다.</p>
</div>
<ol>
<li>
<span class="date">2016.01.25</span>
<a href="/2289">1월 초대장이 배포되었습니다.</a>
<span class="cnt">8</span>
<img src="https://s1.daumcdn.net/cfile/tistory/1234">
</li>
<li>
<span class="date">2015.12.22</span>
<a href="/2283">12월 초대장이 배포되었습니다.</a>
<span class="cnt">19</span>
<img src="https://s1.daumcdn.net/cfile/tistory/5678">
</li>
</ol>
</div>
페이징
리스트, 글, 방명록에서 공통으로 사용하는 페이징 치환자
<s_paging>
: 페이지가 출력되는 영역입니다
<s_paging_rep>
: 페이지가 반복 출력됩니다
: 이전 페이지 링크
: 페이지 링크
: 페이지 번호
: 다음 페이지 링크
<s_paging>
<div class="paging">
<a class="">◀ PREV </a>
<span class="numbox">
<s_paging_rep>
<a class="num">[]</a>
</s_paging_rep>
</span>
<a class="">NEXT ▶</a>
</div>
</s_paging>
사이드바 구조
<s_sidebar>
: 사이드바 그룹치환자
<s_sidebar_element>
: 사이드바 개별 엘리먼트 그룹치환자\ 첫번째 줄의 주석 <!-- TITLE -->
은 사이드바의 타이틀로 사용됩니다.
<div id="sidebar">
<s_sidebar>
<!-- 오른쪽 사이드바 -->
<s_sidebar_element>
<!-- 카테고리 -->
...
</s_sidebar_element>
<s_sidebar_element>
<!--최근에 올라온 글 -->
...
</s_sidebar_element>
<s_sidebar_element>
<!-- 카운터 -->
...
</s_sidebar_element>
</s_sidebar>
<s_sidebar>
<!-- 배너 삽입 사이드바 -->
<s_sidebar_element>
<!-- 배너 모듈 - 태터툴즈 -->
...
</s_sidebar_element>
<s_sidebar_element>
<!-- 배너모듈 - 올린 -->
...
</s_sidebar_element>
<s_sidebar_element>
<!-- 배너모듈 - RSS Feed -->
...
</s_sidebar_element>
</s_sidebar>
</div>
최근 공지사항
<s_rct_notice>
: 공지사항 리스트를 출력할 영역입니다
<s_rct_notice_rep>
: 공지사항 리스트를 반복 출력합니다
: 공지사항의 고유 주소
: 공지사항의 글 제목
<s_sidebar_element>
<!-- 공지사항 -->
<s_rct_notice>
<div class="notice">
<ul>
<s_rct_notice_rep>
<li>
<a href=""></a>
</li>
</s_rct_notice_rep>
</ul>
</div>
</s_rct_notice>
</s_sidebar_element>
최근 글
<s_rctps_rep>
: 최근에 올라온 글을 반복 출력합니다
: 글 주소
: 글 제목
: 글 댓글 갯수
: 작성자 이름 (*팀블로그용 치환자)
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
<s_rctps_rep_thumbnail>
: 대표 이미지가 있는 경우 치환
: 카테고리 이름
: 카테고리 리스트 url
<s_sidebar_element>
<!-- 최근에 올라온 글 -->
<div class="recentPost">
<h3>최근에 올라온 글 </h3>
<ul>
<s_rctps_rep>
<li>
<a href=""></a>
<span class="cnt"></span>
<s_rctps_rep_thumbnail>
<img src=""/>
</s_rctps_rep_thumbnail>
<a href=""></a>
</li>
</s_rctps_rep>
</ul>
</div>
</s_sidebar_element>
인기글
<s_rctps_popular_rep>
: 인기글을 반복 출력합니다
: 글 주소
: 글 제목
: 글 댓글 갯수
: 작성자 이름 (*팀블로그용 치환자)
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
<s_rctps_rep_thumbnail>
: 대표 이미지가 있는 경우 치환
: 카테고리 이름
: 카테고리 리스트 url
<s_sidebar_element>
<!-- 이 블로그 인기글 -->
<div class="popularPost">
<h3>이 블로그 인기글 </h3>
<ul>
<s_rctps_popular_rep>
<li>
<a href=""></a>
<span class="cnt"></span>
<s_rctps_rep_thumbnail>
<img src=""/>
</s_rctps_rep_thumbnail>
<a href=""></a>
</li>
</s_rctps_popular_rep>
</ul>
</div>
</s_sidebar_element>
최근 댓글
<s_rctrp_rep>
: 댓글을 반복 출력합니다
: 댓글로 이동할 주소
: 댓글의 본문 일부
: 댓글을 쓴 사람 이름
: 댓글을 쓴 시간
<s_sidebar_element>
<!-- 최근에 달린 댓글 -->
<div class="recentComment">
<h3>최근에 달린 댓글</h3>
<ul id="recentComments">
<s_rctrp_rep>
<li>
<a href="">.</a>
<span class="info_wrap">
<span class="name"></span>
<span class="date"></span>
</span>
</li>
</s_rctrp_rep>
</ul>
</div>
</s_sidebar_element>
카테고리
|
ALL (5658)
|
|
|
Google Search Console (4)
|
|
|
Persona (554)
|
|
|
Advanced Management Program (1)
|
|
|
: 폴더 형식의 카테고리
: 리스트 형식의 카테고리
<s_sidebar_element>
<!-- 카테고리 -->
<div class="category">
<h3>카테고리</h3>
|
ALL (5658)
|
|
|
Google Search Console (4)
|
|
|
Persona (554)
|
|
|
Advanced Management Program (1)
|
|
|
</div>
<div class="category">
<h3>카테고리</h3>
</div>
</s_sidebar_element>
랜덤태그
<s_random_tags>
: 태그를 반복 출력합니다
: 태그에 해당되는 주소
: Tag Cloud 의 크기나 색깔을 설정 (총 5단계의 레벨을 가지고 있으며, cloud1 ~ cloud5 까지 큰 것에서 작은 순서를 나타냅니다. 이 기능을 가지고 style 을 조정하시여 원하시는 스타일의 Tag Cloud 를 만드실 수 있습니다)
: 태그의 이름
<s_sidebar_element>
<!-- 태그 클라우드 -->
<div class="tagbox">
<h3>태그목록</h3>
<ul>
<s_random_tags>
<li>
<a href="" class=""> </a>
</li>
</s_random_tags>
</ul>
</div>
</s_sidebar_element>
방문자 수
: 총 방문자수
: 오늘 방문자수
: 어제 방문자수
<s_sidebar_element>
<!-- 방문자수 -->
<div class="counter">
<span class="total">Total : </span>
<span class="today">Today : </span>
<span class="yesterday">Yesterday : </span>
</div>
</s_sidebar_element>
검색
<s_search>
: 검색 입력폼을 출력할 영역입니다
: 검색어 입력 박스 이름
: 검색어
: 검색 온클릭 이벤트
<s_sidebar_element>
<!-- 검색 -->
<div class="search">
<s_search>
<input type="text" name="" value="" onkeypress="if (event.keyCode == 13) { }"
/>
<input value="검색" type="button" onclick="" class="submit" />
</s_search>
</div>
</s_sidebar_element>
</div>
</s_article_rep>
관리기능
<s_ad_div>
: 글 관리기능 그룹치환자 (관리 권한 있는 경우만 표시)
: 수정
: 수정 온클릭 이벤트
: 글의 현재 상태
: 상태 변경 온클릭 이벤트
: 이후 상태
: 트랙백 온클릭 이벤트
: 삭제 온클릭 이벤트
<s_ad_div>
<div class="admin">
<a href="">수정</a> :
<a href="#" onclick="">수정(창으로)</a> |
()→<a href="#" onclick=""></a> |
<a href="#" onclick="">관련글(트랙백)</a> |
<a href="#" onclick="">삭제</a>
</div>
</s_ad_div>
태그
<s_tag_label>
: 글과 관련된 태그가 출력되는 영역입니다.
<s_tag_label>
<div class="tagTrail">
<span class="tagText">TAG </span>
</div>
</s_tag_label>
퍼머링크 / 인덱스
퍼머링크 페이지에서와 인덱스 페이지에서 표시될 내용을 구분할 수 있습니다.\ (퍼머링크 페이지/인덱스 페이지 영역 밖에서 사용되는 치환자는 둘 모두에서 표시됩니다)
퍼머링크
<s_permalink_article_rep>
: 퍼머링크 페이지일 때만 표시되는 영역입니다 (내부에서 사용하는 치환자는 <s_article_rep>
내부에서 사용하는 치환자와 동일합니다)
인덱스
<s_index_article_rep>
: 인덱스 페이지일 때만 표시되는 영역입니다
/1463
: 블로그 글의 고유 주소
티스토리 스킨 가이드
: 블로그 글의 제목
/category/Tistory/Tistory%20Skin
: 카테고리 주소
Tistory/Tistory Skin
: 카테고리 이름
2020. 6. 3. 05:08
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
2020. 6. 3.
: 글 발행 날짜 (yyyy. m. d.)
2020
: 글쓴 세부시간 - 연도 (yyyy)
06
: 글쓴 세부시간 - 월 (mm)
03
: 글쓴 세부시간 - 일 (dd)
05
: 글쓴 세부시간 - 시 (HH)
08
: 글쓴 세부시간 - 분 (MM)
14
: 글쓴 세부시간 - 초 (SS)
라이브러리 브랜드
: 작성자 이름
티스토리에서는 스킨을 통해서 사이트를 자유롭게 디자인할 수 있습니다. 스킨은 치환자를 사용하여 제작되고 사용된 치환자에는 티스토리의 데이터가 대입되어 티스토리의 디자인이 완성됩니다. 이 문서는 스킨에서 사용하는 치환자에 대해 설명합니다. 파일구조 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 스킨의 메인 템..
: 글 내용 요약
<s_article_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcIzeQ8%2FbtqEBmXmaW4%2FsSNvY44HrIWmZ8HuVWI9T0%2Fimg.gif
: 대표 이미지 썸네일 주소
https://blog.kakaocdn.net/dn/cIzeQ8/btqEBmXmaW4/sSNvY44HrIWmZ8HuVWI9T0/img.gif
: 대표 이미지 원본 주소
<s_rp_count>
: 댓글의 갯수를 출력하는 영역
<s_index_article_rep>
<div class="list_content">
<s_article_rep_thumbnail>
<img src="https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcIzeQ8%2FbtqEBmXmaW4%2FsSNvY44HrIWmZ8HuVWI9T0%2Fimg.gif">
</s_article_rep_thumbnail>
<a href="/1463" class="link_post">
<strong class="tit_post">티스토리 스킨 가이드</strong>
<p class="txt_post">티스토리에서는 스킨을 통해서 사이트를 자유롭게 디자인할 수 있습니다. 스킨은 치환자를 사용하여 제작되고 사용된 치환자에는 티스토리의 데이터가 대입되어 티스토리의 디자인이 완성됩니다. 이 문서는 스킨에서 사용하는 치환자에 대해 설명합니다. 파일구조 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 스킨의 메인 템..</p>
</a>
<div class="detail_info">
<a href="/category/Tistory/Tistory%20Skin" class="link_cate">
Tistory/Tistory Skin
</a>
<span class="txt_bar"></span>
2020. 6. 3. 05:08
</div>
</div>
</s_index_article_rep>
카테고리의 다른 글
글이 속한 카테고리의 다른 글을 보여줄 수 있습니다.\ 카테고리에 속하지 않은 글에는 표시되지 않습니다.
<s_article_related>
: 카테고리 글 더보기 영역
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 발행시간
<s_article_related_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
<s_article_related>
<div class="area_related">
<strong class="tit_related">'Tistory/Tistory Skin' Related Articles</strong>
<ul class="list_related">
<s_article_related_rep>
<li class="">
<a href="" class="link_related">
<s_article_related_rep_thumbnail>
<span class="thumb_related">
<img src="" class="img_related" alt="">
</span>
</s_article_related_rep_thumbnail>
<span class="txt_related"></span>
<span class="date_related"></span>
<span class="frame_related"></span>
</a>
</li>
</s_article_related_rep>
</ul>
<a href="/category/Tistory/Tistory%20Skin" class="link_more">more</a>
</div>
</s_article_related>
이전 글 / 다음 글
글의 이전 글과 다음 글을 보여줍니다. 페이징 치환자의 이전/다음 페이지 url과 동일한 글입니다.
<s_article_prev>
: 이전 글 그룹치환자. 이전 글이 있는 경우 사용됩니다.
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 작성시간
<s_article_prev_thumbnail>
: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
<s_article_next>
: 다음 글 그룹치환자. 다음 글이 있는 경우 사용됩니다.
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 작성시간
<s_article_next_thumbnail>
: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
댓글
댓글 그룹
<s_rp>
: 댓글으로 접근시 이 영역 내부의 치환자가 출력됩니다.
<s_rp>
<div class="comment">
<h3>댓글을 달아 주세요 </h3>
<div class="commentList">18-6-1 리스트 </div>
<div class="commentWrite">18-6-2 글쓰기 </div>
</div>
</s_rp>
입력 폼
<s_rp_input_form>
: 댓글을 달기 위한 입력폼을 출력합니다
1463
: 댓글주소. 댓글들을 구분하기위해 사용합니다. 한 화면에 있는 댓글들은 각각 고유의 값을 가지고 있습니다.
: 댓글 입력 박스 이름
: 댓글 입력 온클릭 이벤트
<s_rp_member>
: 로그인을 하지 않았거나 블로그 소유자가 아닌경우 보여지는 영역
: 비밀글 체크박스 이름
<s_rp_guest>
: 로그인을 하지 않았을경우 보여지는 영역
: 이름입력 박스 이름
: 이름
: 비밀번호 입력 박스 이름
: 비밀번호
: 홈페이지 입력 박스 이름
: 홈페이지
<s_rp_input_form>
<div class="commentWrite">
<s_rp_member>
<s_rp_guest>
<p>
<input type="text" name="" value="" />
<label for="name"> : 이름 </label>
</p>
<p>
<input type="password" maxlength="8" name="" value="" />블로그 관리자일 경우 password field에 미리 비밀번호를 넣어놓기 위해 만들어 놓았던 치환자였으나, 지금은 사용되지 않음.. (현재는 블로그 관리자일 경우 password field가 나타나지
않음.)
<label for="password"> : 패스워드 </label>
</p>
<p>
<input type="text" class="homepage" name="" value="" />
<label for="homepage"> : 홈페이지 </label>
</p>
</s_rp_guest>
<p class="secretWrap">
<input type="checkbox" name="" class="checkbox" />
<label for="secret"> 비밀글 </label>
</p>
</s_rp_member>
<p>
<textarea name="" rows="10" cols="50"></textarea>
</p>
<p>
<input type="submit" value="댓글 달기" onclick="" />
</p>
</div>
</s_rp_input_form>
댓글 리스트 구조
<s_rp_container>
: 등록된 '댓글' 리스트를 출력할 영역입니다
<s_rp_rep>
: '댓글' 리스트의 반복열입니다
<s_rp2_container>
: '댓글'의 댓글 리스트를 출력할 영역입니다.
<s_rp2_rep>
: '댓글' 댓글 리스트의 반복열입니다
댓글 내용 (rep 내부)
: 댓글의 고유 ID
: 댓글의 글의 목록에 반복되는 스타일 + admin 아이디 앞에 아이콘
: 글쓴사람 이름
: 댓글작성자의 프로필 이미지
: 글쓴 날짜
: 글 내용
: 댓글 주소
: 답글 삭제 온클릭 이벤트
: 답글 수정 온클릭 이벤트
<div class="commentList">
<s_rp_container>
<ol>
<s_rp_rep>
<li id=''>
<div class="">
<span class="image"></span>
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="" class="address">
<span>댓글주소</span>
</a>
<a href="#" onclick="" class="modify">
<span>수정/삭제</span>
</a>
<a href="#" onclick="" class="write">
<span>댓글쓰기</span>
</a>
</span>
<p></p>
</div>
<s_rp2_container>
<ul>
<s_rp2_rep>
<li id=''>
<div class="">
<span class="image"></span>
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="" class="address">
<span>댓글주소</span>
</a>
<a href="#" onclick="" class="modify">
<span>수정/삭제</span>
</a>
</span>
<p></p>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ol>
</s_rp_container>
</div>
공지사항 치환자
<s_notice_rep>
: 공지사항 그룹 치환자
: '공지사항'에 등록된 글의 고유 주소
: 글 제목
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 본문 내용
: 작성자 이름 (*팀블로그용 치환자)
<s_notice_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
<s_notice_rep>
<div class="entryNotice">
<div class="titleWrap">
<h2><a href=""></a></h2>
<span class="date"> </span>
</div>
<div class="article">
</div>
</div>
</s_notice_rep>
퍼머링크 / 인덱스
퍼머링크 페이지에서와 인덱스 페이지에서 표시될 내용을 구분할 수 있습니다.\ (퍼머링크 페이지/인덱스 페이지 영역 밖에서 사용되는 치환자는 둘 모두에서 표시됩니다)
퍼머링크
<s_permalink_article_rep>
: 퍼머링크 페이지일 때만 표시되는 영역입니다 (내부에서 사용하는 치환자는 <s_article_rep>
내부에서 사용하는 치환자와 동일합니다)
인덱스
<s_index_article_rep>
: 인덱스 페이지일 때만 표시되는 영역입니다
: '공지사항'에 등록된 글의 고유 주소
: 글 제목
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 본문 내용
: 작성자 이름 (*팀블로그용 치환자)
: 글 내용 일부
<s_notice_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
<s_index_article_rep>
<div class="list_content">
<s_notice_rep_thumbnail>
<img src="">
</s_notice_rep_thumbnail>
<a href="" class="link_post">
<strong class="tit_post"></strong>
<p class="txt_post"></p>
</a>
<div class="detail_info">
<a href="" class="link_cate">
</a>
<span class="txt_bar"></span>
</div>
</div>
</s_index_article_rep>
보호글 치환자
<s_article_protected>
: 보호글 그룹치환자
/1463
: 보호글의 고유 주소
티스토리 스킨 가이드
: 보호글의 제목
/category/Tistory/Tistory%20Skin
: 카테고리 링크
Tistory/Tistory Skin
: 카테고리 명
2020. 6. 3. 05:08
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
2020. 6. 3.
: 글 발행 날짜 (yyyy. m. d.)
2020
: 글쓴 세부시간 - 연도 (yyyy)
06
: 글쓴 세부시간 - 월 (mm)
03
: 글쓴 세부시간 - 일 (dd)
05
: 글쓴 세부시간 - 시 (HH)
08
: 글쓴 세부시간 - 분 (MM)
14
: 글쓴 세부시간 - 초 (SS)
entry1463password
: 보호글의 비밀번호 텍스트 박스의 Id값(label 사용 용도)
{reloadEntry(1463);return false;}
: 보호글의 비밀번호를 입력하고 엔터키나 확인버튼을 눌렀을 때 실행될 자바스크립트 코드가 들어갑니다.
라이브러리 브랜드
: 작성자 이름 (*팀블로그용 치환자)
<s_article_protected>
<div class="entryProtected">
<h2><a href="/1463">티스토리 스킨 가이드</a></h2>
<span class="date">2020. 6. 3. 05:08</span>
<p>보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.</p>
<p>
<label for="entry1463password">비밀번호 ::</label>
<input type="password" maxlength="16" id="entry1463password" name="entry1463password" value="" onkeydown="if (event.keyCode == 13){reloadEntry(1463);return false;}" />
<input type="button" class="submit" value="submit" onclick="{reloadEntry(1463);return false;}" />
</p>
</div>
</s_article_protected>
공지사항 치환자
<s_page_rep>
: '페이지'가 출력되는 영역입니다.\ (스킨에 페이지치환자가 존재하지 않는 경우 글 치환자에 페이지가 표시됩니다.)
/1463
: 고유 주소
티스토리 스킨 가이드
: 제목
2020. 6. 3. 05:08
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
2020. 6. 3.
: 글 발행 날짜 (yyyy. m. d.)
2020
: 글쓴 세부시간 - 연도 (yyyy)
06
: 글쓴 세부시간 - 월 (mm)
03
: 글쓴 세부시간 - 일 (dd)
05
: 글쓴 세부시간 - 시 (HH)
08
: 글쓴 세부시간 - 분 (MM)
14
: 글쓴 세부시간 - 초 (SS)
티스토리에서는 스킨을 통해서 사이트를 자유롭게 디자인할 수 있습니다. 스킨은 치환자를 사용하여 제작되고 사용된 치환자에는 티스토리의 데이터가 대입되어 티스토리의 디자인이 완성됩니다.
이 문서는 스킨에서 사용하는 치환자에 대해 설명합니다.
파일구조
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 등을 업로드하여 스킨에서 사용합니다.
스킨 정보 파일
스킨에 필요한 정보를 담고 있는 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>댓글 <span class="cnt">하나</span> 달렸습니다.</single>
</commentMessage>
<trackbackMessage>
<none>받은 트랙백이 없고</none>
<single>트랙백이 <span class="cnt">하나</span>이고</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: 내용+목록)
- tree: 카테고리
- color: 카테고리 글자색
- bgColor: 카테고리 배경색
- activeColor: 선택시 글자색
- activeBgColor: 선택시 배경색
- labelLength: 표현될 카테고리 글자 수
- showValue: 카테고리 글 수 표현(0:숨김, 1:보임)
- contentWidth: 콘텐츠영역 가로 사이즈, 이 사이즈에 맞춰 에디터의 위지윅이 제대로 구현된다.
- cover: 홈 커버 기본값으로 자세한 내용은 '홈 커버 > 기본값' 장에서 설명합니다.
홈 커버
홈 커버에 사용한 아이템을 정의합니다. 자세한 내용은 '홈 커버 > 정의' 장에서 설명합니다.
스킨 옵션
스킨 옵션에서 제공할 옵션을 정의합니다. 자세한 내용은 '스킨 옵션 > 옵션 정의' 장에서 설명합니다.
리스트 스타일
사용할 수 있는 글 목록 스타일을 정의합니다. 자세한 내용은 '리스트 > 리스트 스타일' 장에서 설명합니다.
치환자 구조
티스토리의 치환자는 그룹치환자, 값치환자의 2가지 형태를 가지고 있습니다. 그룹치환자는 내부에 스킨 데이터를 포함하며 렌더링된 값으로 변환됩니다. 값치환자는 해당하는 값으로 변환됩니다.
예
<s_tag>
<div class="taglog">
<h3>태그</h3>
<ul>
<s_tag_rep>
<li><a href="" class=""></a></li>
</s_tag_rep>
</ul>
</div>
</s_tag>
- 그룹치환자:
<s_tag>
, <s_tag_rep>
- 값치환자:
,
,
그룹치환자
<s_NAME>VALUE</s_NAME>
값치환자
공통 치환자
스킨 치환자 그룹
<s_t3>
: 티스토리 공통 javascript 삽입 (필수)
<!-- 치환 전 -->
<body>
<s_t3>
...
</s_t3>
</body>
<!-- 치환 후 -->
<body>
<script type="text/javascript" src="https://t1.daumcdn.net/tistory_admin/blogs/script/blog/common.js"></script>
<div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div>
...
</body>
기본 정보
블로그 정보
라이브러리 브랜드
: 블로그 제목
https://tistory1.daumcdn.net/tistory/3045799/attach/03a32db2cebe41198c9508d7c20b4ff1
: 블로그 대표 이미지 url
: 블로그 대표 이미지를 포함한 IMG 태그
라이브러리는 인간이 지닌 위대한 능력인 상상력을 기반으로 하여 여러가지 콘텐츠를 다루고자 합니다.
: 블로그 설명
라이브러리 브랜드
: 블로그 소유자의 필명
블로그 URL
https://creativestudio.kr/
: 블로그 url
https://stylus.tistory.com/rss
: rss feed 주소
https://stylus.tistory.com/tag
: 태그로그 url
https://stylus.tistory.com/guestbook
: 방명록 url
기타
티스토리 스킨 가이드
: 페이지 제목
: 블로그 메뉴 리스트
tt-body-page
: 페이지 타입에 따른 id
페이지 타입 |
body_id |
홈화면 |
tt-body-index |
글화면 |
tt-body-page |
카테고리 글 리스트 |
tt-body-category |
보관함 글 리스트 |
tt-body-archive |
태그 리스트 |
tt-body-tag |
검색결과 리스트 |
tt-body-search |
방명록 |
tt-body-guestbook |
지역로그 |
tt-body-location |
사용 예
<html>
<head>
<title>티스토리 스킨 가이드</title>
</head>
<body id='tt-body-page'>
<s_t3>
<header>
<h1><a href="https://creativestudio.kr/">라이브러리 브랜드</a></h1>
<!-- blog_menu사용 -->
<!-- 메뉴 직접 구성 -->
<ul class="blogMenu">
<li><a href="https://stylus.tistory.com/rss">RSS구독</a></li>
<li><a href="https://stylus.tistory.com/tag">태그</a></li>
<li><a href="https://stylus.tistory.com/guestbook">방명록</a></li>
</ul>
</header>
<section class="sidebar">
<!-- blog_image 사용 -->
<div class="blogInfo">
<div class="blogImage"> </div>
<div class="blogDesc">라이브러리는 인간이 지닌 위대한 능력인 상상력을 기반으로 하여 여러가지 콘텐츠를 다루고자 합니다. <span class="userID">라이브러리 브랜드</span></div>
</div>
<!-- image 사용 -->
<div class="blogInfo">
<div class="blogImage"><img src="https://tistory1.daumcdn.net/tistory/3045799/attach/03a32db2cebe41198c9508d7c20b4ff1"></div>
<div class="blogDesc">라이브러리는 인간이 지닌 위대한 능력인 상상력을 기반으로 하여 여러가지 콘텐츠를 다루고자 합니다. <span class="userID">라이브러리 브랜드</span></div>
</div>
</section>
</s_t3>
</body>
</html>
홈 커버
홈 커버는 홈화면을 꾸미기 위해 제공되는 치환자입니다.
<s_cover_group>
: 커버 그룹 치환자
<s_cover_rep>
: 개별 커버 표시
<s_cover>
: 개별 커버. name 애트리뷰트로 이름을 지정한다. 정의되지 않은 이름의 커버는 사용되지 않는다.
: 개별 커버 타이틀
<s_cover_url>
: 커버 url이 있는 경우에만 치환
<s_cover_item>
: 개별 커버 컨텐츠
<s_cover_item_not_article_info>
: 컨텐츠가 글이 아닌 경우에만 치환 (내부 치환자는 s_cover_item에 직접 사용 가능)
: 컨텐츠 타이틀
: 컨텐츠 요약/내용
: 컨텐츠 url
<s_cover_item_thumbnail>
: 컨텐츠 이미지가 있는 경우에만 치환
<s_cover_item_article_info>
: 컨텐츠가 글인 경우에만 치환
: 컨텐츠 타이틀
: 컨텐츠 요약/내용
: 컨텐츠 url
<s_cover_item_thumbnail>
: 컨텐츠 이미지가 있는 경우에만 치환
: 카테고리 명
: 카테고리 url
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 댓글 수
치환자 사용 예
<s_cover_group>
<s_cover_rep>
<s_cover name='featured'>
<div class='featured'>
<s_cover_item>
<div class='featured-item'>
<s_cover_item_thumbnail>
<img class="image" src="">
</s_cover_item_thumbnail>
<strong class="title"></strong>
<a href="" class="action">자세히 보기</a>
</div>
</s_cover_item>
<button class='btn-prev'><</button>
<button class='btn-next'>></button>
</div>
</s_cover>
<s_cover name='list'>
<div id="mArticle" class="article_skin">
<s_cover_item>
<s_cover_item_article_info>
<div class="list_content">
<s_cover_item_thumbnail>
<a href="" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C148x148/?fname="></a>
</s_cover_item_thumbnail>
<a href="" class="link_post">
<strong class="tit_post"></strong>
<p class="txt_post"></p>
</a>
<div class="detail_info">
<a href="" class="link_cate"></a>
<span class="txt_bar"></span>
</div>
</div>
</s_cover_item_article_info>
<s_cover_item_not_article_info>
<div class="list_content">
<s_cover_item_thumbnail>
<a href="" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C148x148/?fname="></a>
</s_cover_item_thumbnail>
<a href="" class="link_post">
<strong class="tit_post"></strong>
<p class="txt_post"></p>
</a>
</div>
</s_cover_item_not_article_info>
</s_cover_item>
<s_cover_url>
<a class="btn-more" href="">더보기</a>
</s_cover_url>
</div>
</s_cover>
</s_cover_rep>
</s_cover_group>
정의 (index.xml)
커버를 사용하기 위해서는 스킨 정보 파일에 커버 아이템을 정의해야 합니다.
<cover>
<item>
<name>커버 아이템 이름</name>
<label>사용자에게 표시할 이름</label>
<description>설명</description>
</item>
</cover>
정의 예
<cover>
<item>
<name>featured</name>
<label><![CDATA[Featured]]></label>
<description><![CDATA[강조할 글을 표시합니다.]]></description>
</item>
<item>
<name>list</name>
<label><![CDATA[리스트]]></label>
<description><![CDATA[글 리스트를 표시합니다.]]></description>
</item>
</cover>
기본값
스킨 적용 즉시 제작자가 추천하는 홈커버가 적용되도록 하기 위해서 기본값을 사용할 수 있습니다. 스킨 정보 파일의 기본값에 JSON 값을 string으로 설정합니다.
<default>
<cover>
<![CDATA[ 홈 커버 기본값 ]]>
</cover>
</default>
기본값 JSON 구조
[
{
"name": "정의된 커버 아이템 name",
"title": "커버 타이틀",
"dataType": "내용의 데이터 타입",
"data": "타입에 해당하는 데이터"
},
...
]
- name: 정의된 커버 아이템으로 없는 커버를 사용할 경우 무시됩니다.
- title: 커버타이틀로 사용할 string 입니다.
- dataType: 내용유형으로 스킨 에디터에서 제공하는 유형 중 '최신 글', '직접 입력' 만 사용할 수 있습니다.
- RECENT: 최신 글
- CUSTOM: 직접 입력
- data: 커버 내용으로 유형별로 형태가 다릅니다.
- RECENT: 카테고리와 개수를 설정할 수 있습니다.
{
"category": "ALL",
"size": 5
}
- category: 사용자의 카테고리를 알 수 없으므로 전체(ALL), 공지사항(NOTICE)만 사용할 수 있습니다.
- size: 표시될 개수를 설정합니다. 1-100 까지 설정할 수 있습니다.
- CUSTOM: 표시될 내용을 모두 설정
{
"title": "컨텐츠 타이틀",
"summary": "컨텐츠 타이틀",
"url": "컨텐츠 요약/내용",
"thumbnail": "컨텐츠 이미지"
}
기본값 예
[
{
"name": "featured",
"title": "",
"dataType": "CUSTOM",
"data": [
{
"title": "첫번째 항목",
"summary": "첫번째 항목의 summary",
"url": "https://www.tistory.com",
"thumbnail": "https://www.tistory.com/sample.png"
},
{
"title": "두번째 항목",
"summary": "두번째 항목의 summary",
"url": "https://www.tistory.com",
"thumbnail": "https://www.tistory.com/sample.png"
}
]
},
{
"name": "list",
"title": "",
"dataType": "LIST",
"data": {
"category": "ALL",
"size": 5
}
}
]
스킨 옵션
<s_if_var_{VARIABLE_NAME}>
: 옵션의 값이 있으면 (bool 타입인 경우 true이면) 치환
<s_not_var_{VARIABLE_NAME}>
: 옵션의 값이 없으면 (bool 타입인 경우 false이면) 치환
: 옵션의 값
<style>
.wrap_sub {
background-image: url('');
}
</style>
<s_if_var_scroll-load>
<style>
.article_skin .area_paging .inner_paging.scroll_spinner {
width:48px; height:48px;
background:url('./images/spinner.gif') no-repeat;
height: 48px;
width: 48px;
margin: 0 auto;
}
.article_skin .area_paging .inner_paging.scroll_spinner * {
display:none
}
</style>
<script src="./images/scroll-load.js"></script>
</s_if_var_scroll-load>
옵션 정의 (index.xml)
<variables>
<variablegroup name="그룹이름">
<variable>
<name>치환자에서 사용할 이름</name>
<label>사용자에게 표시할 이름</label>
<description>설명 (optional)</description>
<type>타입</type>
<option>max, min, select option등 값을 설정하는데 사용되는 정보 (optional: SELECT타입의 경우 필수)</option>
<default>설정하지 않은 경우 기본 값</default>
</variable>
</variablegroup>
</variables>
type
- STRING: 문자 입력
- SELECT: 옵션 선택 (옵션은 name, label, value 값을 가진 json객체로 정의)
- option 예
<option><![CDATA[
[
{"name":"light", "label":"밝은색", "value":"light"},
{"name":"dark", "label":"어두운색", "value":"dark"}
]
]]></option>
- IMAGE: 이미지 url
- BOOL: true/false
- COLOR: 컬러값 (#000000)
옵션 정의 사용 예
<variables>
<variablegroup>
<variable>
<name>scroll-load</name>
<label>
<![CDATA[ 무한스크롤 ]]>
</label>
<type>BOOL</type>
<option />
<default>true</default>
<description>
<![CDATA[ 글 리스트 끝에 다다르면 다음 페이지를 불러옵니다. ]]>
</description>
</variable>
</variablegroup>
<variablegroup name="디자인">
<variable>
<name>cover-image</name>
<label>
<![CDATA[ 커버이미지 ]]>
</label>
<type>IMAGE</type>
<option />
<default>
<![CDATA[ https://t1.daumcdn.net/tistory/0/Ray2/images/header_default.jpg ]]>
</default>
<description>
<![CDATA[ 커버 이미지를 변경합니다. ]]>
</description>
</variable>
<variable>
<name>point-color</name>
<label>
<![CDATA[ 대표 색 ]]>
</label>
<type>COLOR</type>
<option />
<default><![CDATA[#6bacce]]></default>
<description>
<![CDATA[대표 색을 사용합니다.]]>
</description>
</variable>
</variablegroup>
</variables>
태그 클라우드 치환자
태그 클라우드는 사용한 태그 리스트를 출력합니다.
태그 그룹
태그 정보
<s_tag_rep>
: 개별태그 그룹치환자
: 태그가 포함된 글을 출력하기 위한 URL
: 총 5단계가 있는데 자주 사용한 순서로 cloud1
-cloud5
가 표시됩니다.
: 태그의 이름
예
<!-- 스킨 -->
<s_tag>
<div class="taglog">
<h3>태그</h3>
<ul>
<s_tag_rep>
<li>
<a href="" class=""></a>
</li>
</s_tag_rep>
</ul>
</div>
</s_tag>
<!-- 변환 예 -->
<div class="taglog">
<h3>태그</h3>
<ul>
<li>
<a href="/tag/tistory" class="cloud1">tistory</a>
</li>
<li>
<a href="/tag/kakao" class="cloud4">kakao</a>
</li>
<li>
<a href="/tag/blog" class="cloud5">blog</a>
</li>
</ul>
</div>
방명록
방명록 그룹
<s_guest>
<div class="guestbook">
<h3>방명록</h3>
<div class="guestWrite">입력 폼</div>
<div class="guestList">리스트</div>
</div>
</s_guest>
입력 폼
<s_guest_input_form>
: 방명록을 달기 위한 입력폼을 출력합니다
: 글 내용 입력박스 이름
: 입력 완료 온클릭 이벤트
<s_guest_member>
: 로그인을 하지 않았거나 블로그 소유자가 아닌경우 보여지는 영역
<s_guest_form>
: 로그인을 하지 않았을경우 보여지는 영역
: 이름입력 박스 이름
: 이름
: 비밀번호 입력 박스 이름
: 비밀번호
: 홈페이지 입력 박스 이름
: 홈페이지
<s_guest_input_form>
<div class="guestWrite">
<s_guest_member>
<s_guest_form>
<div>
<input type="text" name="" value="" />
<label for="name"> : 이름 </label>
</div>
<div>
<input type="password" maxlength="8" name="" value="" />
<label for="password"> : 패스워드 </label>
</div>
<div>
<input type="text" name="" value="" />
<label for="homepage"> : 홈페이지 </label>
</div>
</s_guest_form>
</s_guest_member>
<div>
<textarea name="" cols="50" rows="6"></textarea>
</div>
<div>
<input type="submit" value="안부 남기기" onclick=""/>
</div>
</div>
</s_guest_input_form>
리스트
<s_guest_container>
: 방명록 리스트 그룹치환자
<s_guest_rep>
: 방명록 정보 그룹치환자
<s_guest_reply_container>
: '방명록'의 댓글 리스트를 출력할 영역입니다.
<s_guest_reply_rep>
: '방명록' 댓글 리스트의 반복열입니다
내용 (rep 내부)
: 방명록의 고유 ID
: 방명록의 글의 목록에 반복되는 스타일 + admin 아이디 앞에 아이콘
: 글쓴사람 이름
: 글쓴 날짜
: 글 내용
: 답글 삭제 온클릭 이벤트
: 답글 수정 온클릭 이벤트
<s_guest_container>
<div class="guestList">
<ol>
<s_guest_rep>
<li id=''>
<div class="">
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="#" onclick="">MODIFY/DELETE</a>
<a href="#" onclick="">REPLY</a>
</span>
<p></p>
</div>
<s_guest_reply_container>
<ul>
<s_guest_reply_rep>
<li id=''>
<div class="">
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="#" onclick="">MODIFY/DELETE </a>
</span>
<p></p>
</div>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ol>
</div>
</s_guest_container>
글 치환자
글 정보
<s_article_rep>
: 글 그룹 치환자
: 블로그 글의 고유 주소
: 블로그 글의 제목
: 카테고리 링크
: 카테고리 명
: 글쓴 날짜/시간 (yyyy. m. d. HH:MM)
: 글쓴 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 작성자 이름 (*팀블로그용 치환자)
: 블로그 본문 내용
<s_article_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
: 댓글을 열고 닫는 온클릭 이벤트
<s_rp_count>
: 댓글의 갯수를 출력하는 영역
<s_article_rep>
<div class="titleWrap">
<h2><a href=""></a></h2>
<div class="category">
<a href=""></a>
</div>
<div class="date"></div>
</div>
<div class="article">
</div>
</s_article_rep>
관리기능
<s_ad_div>
: 글 관리기능 그룹치환자 (관리 권한 있는 경우만 표시)
: 수정
: 수정 온클릭 이벤트
: 글의 현재 상태
: 상태 변경 온클릭 이벤트
: 이후 상태
: 트랙백 온클릭 이벤트
: 삭제 온클릭 이벤트
<s_ad_div>
<div class="admin">
<a href="">수정</a> :
<a href="#" onclick="">수정(창으로)</a> |
()→<a href="#" onclick=""></a> |
<a href="#" onclick="">관련글(트랙백)</a> |
<a href="#" onclick="">삭제</a>
</div>
</s_ad_div>
태그
<s_tag_label>
: 글과 관련된 태그가 출력되는 영역입니다.
<s_tag_label>
<div class="tagTrail">
<span class="tagText">TAG </span>
</div>
</s_tag_label>
퍼머링크 / 인덱스
퍼머링크 페이지에서와 인덱스 페이지에서 표시될 내용을 구분할 수 있습니다.\ (퍼머링크 페이지/인덱스 페이지 영역 밖에서 사용되는 치환자는 둘 모두에서 표시됩니다)
퍼머링크
<s_permalink_article_rep>
: 퍼머링크 페이지일 때만 표시되는 영역입니다 (내부에서 사용하는 치환자는 <s_article_rep>
내부에서 사용하는 치환자와 동일합니다)
인덱스
<s_index_article_rep>
: 인덱스 페이지일 때만 표시되는 영역입니다
: 블로그 글의 고유 주소
: 블로그 글의 제목
: 카테고리 주소
: 카테고리 이름
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 작성자 이름
: 글 내용 요약
<s_article_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
<s_rp_count>
: 댓글의 갯수를 출력하는 영역
<s_index_article_rep>
<div class="list_content">
<s_article_rep_thumbnail>
<img src="">
</s_article_rep_thumbnail>
<a href="" class="link_post">
<strong class="tit_post"></strong>
<p class="txt_post"></p>
</a>
<div class="detail_info">
<a href="" class="link_cate">
</a>
<span class="txt_bar"></span>
</div>
</div>
</s_index_article_rep>
카테고리의 다른 글
글이 속한 카테고리의 다른 글을 보여줄 수 있습니다.\ 카테고리에 속하지 않은 글에는 표시되지 않습니다.
<s_article_related>
: 카테고리 글 더보기 영역
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 발행시간
<s_article_related_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
<s_article_related>
<div class="area_related">
<strong class="tit_related">'' Related Articles</strong>
<ul class="list_related">
<s_article_related_rep>
<li class="">
<a href="" class="link_related">
<s_article_related_rep_thumbnail>
<span class="thumb_related">
<img src="" class="img_related" alt="">
</span>
</s_article_related_rep_thumbnail>
<span class="txt_related"></span>
<span class="date_related"></span>
<span class="frame_related"></span>
</a>
</li>
</s_article_related_rep>
</ul>
<a href="" class="link_more">more</a>
</div>
</s_article_related>
이전 글 / 다음 글
글의 이전 글과 다음 글을 보여줍니다. 페이징 치환자의 이전/다음 페이지 url과 동일한 글입니다.
<s_article_prev>
: 이전 글 그룹치환자. 이전 글이 있는 경우 사용됩니다.
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 작성시간
<s_article_prev_thumbnail>
: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
<s_article_next>
: 다음 글 그룹치환자. 다음 글이 있는 경우 사용됩니다.
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 작성시간
<s_article_next_thumbnail>
: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
댓글
댓글 그룹
<s_rp>
: 댓글으로 접근시 이 영역 내부의 치환자가 출력됩니다.
<s_rp>
<div class="comment">
<h3>댓글을 달아 주세요 </h3>
<div class="commentList">18-6-1 리스트 </div>
<div class="commentWrite">18-6-2 글쓰기 </div>
</div>
</s_rp>
입력 폼
<s_rp_input_form>
: 댓글을 달기 위한 입력폼을 출력합니다
: 댓글주소. 댓글들을 구분하기위해 사용합니다. 한 화면에 있는 댓글들은 각각 고유의 값을 가지고 있습니다.
: 댓글 입력 박스 이름
: 댓글 입력 온클릭 이벤트
<s_rp_member>
: 로그인을 하지 않았거나 블로그 소유자가 아닌경우 보여지는 영역
: 비밀글 체크박스 이름
<s_rp_guest>
: 로그인을 하지 않았을경우 보여지는 영역
: 이름입력 박스 이름
: 이름
: 비밀번호 입력 박스 이름
: 비밀번호
: 홈페이지 입력 박스 이름
: 홈페이지
<s_rp_input_form>
<div class="commentWrite">
<s_rp_member>
<s_rp_guest>
<p>
<input type="text" name="" value="" />
<label for="name"> : 이름 </label>
</p>
<p>
<input type="password" maxlength="8" name="" value="" />블로그 관리자일 경우 password field에 미리 비밀번호를 넣어놓기 위해 만들어 놓았던 치환자였으나, 지금은 사용되지 않음.. (현재는 블로그 관리자일 경우 password field가 나타나지
않음.)
<label for="password"> : 패스워드 </label>
</p>
<p>
<input type="text" class="homepage" name="" value="" />
<label for="homepage"> : 홈페이지 </label>
</p>
</s_rp_guest>
<p class="secretWrap">
<input type="checkbox" name="" class="checkbox" />
<label for="secret"> 비밀글 </label>
</p>
</s_rp_member>
<p>
<textarea name="" rows="10" cols="50"></textarea>
</p>
<p>
<input type="submit" value="댓글 달기" onclick="" />
</p>
</div>
</s_rp_input_form>
댓글 리스트 구조
<s_rp_container>
: 등록된 '댓글' 리스트를 출력할 영역입니다
<s_rp_rep>
: '댓글' 리스트의 반복열입니다
<s_rp2_container>
: '댓글'의 댓글 리스트를 출력할 영역입니다.
<s_rp2_rep>
: '댓글' 댓글 리스트의 반복열입니다
댓글 내용 (rep 내부)
: 댓글의 고유 ID
: 댓글의 글의 목록에 반복되는 스타일 + admin 아이디 앞에 아이콘
: 글쓴사람 이름
: 댓글작성자의 프로필 이미지
: 글쓴 날짜
: 글 내용
: 댓글 주소
: 답글 삭제 온클릭 이벤트
: 답글 수정 온클릭 이벤트
<div class="commentList">
<s_rp_container>
<ol>
<s_rp_rep>
<li id=''>
<div class="">
<span class="image"></span>
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="" class="address">
<span>댓글주소</span>
</a>
<a href="#" onclick="" class="modify">
<span>수정/삭제</span>
</a>
<a href="#" onclick="" class="write">
<span>댓글쓰기</span>
</a>
</span>
<p></p>
</div>
<s_rp2_container>
<ul>
<s_rp2_rep>
<li id=''>
<div class="">
<span class="image"></span>
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="" class="address">
<span>댓글주소</span>
</a>
<a href="#" onclick="" class="modify">
<span>수정/삭제</span>
</a>
</span>
<p></p>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ol>
</s_rp_container>
</div>
공지사항 치환자
<s_notice_rep>
: 공지사항 그룹 치환자
: '공지사항'에 등록된 글의 고유 주소
: 글 제목
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 본문 내용
: 작성자 이름 (*팀블로그용 치환자)
<s_notice_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
<s_notice_rep>
<div class="entryNotice">
<div class="titleWrap">
<h2><a href=""></a></h2>
<span class="date"> </span>
</div>
<div class="article">
</div>
</div>
</s_notice_rep>
퍼머링크 / 인덱스
퍼머링크 페이지에서와 인덱스 페이지에서 표시될 내용을 구분할 수 있습니다.\ (퍼머링크 페이지/인덱스 페이지 영역 밖에서 사용되는 치환자는 둘 모두에서 표시됩니다)
퍼머링크
<s_permalink_article_rep>
: 퍼머링크 페이지일 때만 표시되는 영역입니다 (내부에서 사용하는 치환자는 <s_article_rep>
내부에서 사용하는 치환자와 동일합니다)
인덱스
<s_index_article_rep>
: 인덱스 페이지일 때만 표시되는 영역입니다
: '공지사항'에 등록된 글의 고유 주소
: 글 제목
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 본문 내용
: 작성자 이름 (*팀블로그용 치환자)
: 글 내용 일부
<s_notice_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
<s_index_article_rep>
<div class="list_content">
<s_notice_rep_thumbnail>
<img src="">
</s_notice_rep_thumbnail>
<a href="" class="link_post">
<strong class="tit_post"></strong>
<p class="txt_post"></p>
</a>
<div class="detail_info">
<a href="" class="link_cate">
</a>
<span class="txt_bar"></span>
</div>
</div>
</s_index_article_rep>
보호글 치환자
<s_article_protected>
: 보호글 그룹치환자
: 보호글의 고유 주소
: 보호글의 제목
: 카테고리 링크
: 카테고리 명
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 보호글의 비밀번호 텍스트 박스의 Id값(label 사용 용도)
: 보호글의 비밀번호를 입력하고 엔터키나 확인버튼을 눌렀을 때 실행될 자바스크립트 코드가 들어갑니다.
: 작성자 이름 (*팀블로그용 치환자)
<s_article_protected>
<div class="entryProtected">
<h2><a href=""></a></h2>
<span class="date"></span>
<p>보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.</p>
<p>
<label for="">비밀번호 ::</label>
<input type="password" maxlength="16" id="" name="" value="" onkeydown="if (event.keyCode == 13)" />
<input type="button" class="submit" value="submit" onclick="" />
</p>
</div>
</s_article_protected>
공지사항 치환자
<s_page_rep>
: '페이지'가 출력되는 영역입니다.\ (스킨에 페이지치환자가 존재하지 않는 경우 글 치환자에 페이지가 표시됩니다.)
: 고유 주소
: 제목
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 본문 내용
: 작성자 이름 (*팀블로그용 치환자)
<s_page_rep>
<div>
<h2><a href=""></a></h2>
<div>
</div>
</div>
</s_page_rep>
리스트 치환자
리스트 치환자는 카테고리, 검색, 태그의 글 리스트를 표시합니다.
리스트 그룹
<s_list>
: 리스트 그룹 치환자
: 카테고리 이름, 검색어, 태그명
: 글의 총 개수
: 리스트 설명 (카테고리인 경우 카테고리 설명, 그외 블로그 설명)
: 리스트 스타일 값 (class attribute로 활용 가능)
<s_list_image>
: 리스트 대표 이미지가 있는 경우 동작
: 리스트 대표 이미지 (카테고리인 경우 카테고리 대표이미지, 그외 블로그 대표이미지)
아이템 반복 그룹
<s_list_empty>
: 리스트에 글이 없는 경우 보이는 영역
<s_list_rep>
: 리스트 아이템이 반복되는 영역
: 글의 고유 주소
: 글 작성 날짜 (yyyy.mm.dd)
: 글 작성 세부시간 - 연도 (yyyy)
: 글 작성 세부시간 - 월 (mm)
: 글 작성 세부시간 - 일 (dd)
: 글 작성 세부시간 - 시 (HH)
: 글 작성 세부시간 - 분 (MM)
: 글 작성 세부시간 - 초 (SS)
: 글의 제목
: 글이 속한 카테고리 이름
: 글이 속한 카테고리 글 목록 url
: 댓글 수
: 작성자 이름
: 글 내용 요약
<s_list_rep_thumbnail>
: 대표 이미지가 있는 경우 치환
리스트 스타일
리스트 스타일을 사용하기 위해서는 스킨 정보 파일에 리스트 스타일 아이템을 정의해야 합니다. 리스트 스타일을 정의하면 카테고리 관리화면에서 리스트 스타일이 표시되고 사용자가 선택할 수 있습니다. 이를 사용하여 카테고리별로 다른 스타일을 적용할 때 사용할 수 있습니다.
<liststyle>
<item>
<label>표시할 이름</label>
<value>사용될 값</value>
</item>
</liststyle>
사용 예
<!-- 스킨 예 -->
<s_list>
<div class="searchList ">
<div <s_list_image>style="background-image:url('')"</s_list_image>>
<h3>''에 해당되는 글 건</h3>
<p></p>
</div>
<ol>
<s_list_rep>
<li>
<span class="date"></span>
<a href=""></a>
<span class="cnt"></span>
<s_list_rep_thumbnail>
<img src="">
</s_list_rep_thumbnail>
</li>
</s_list_rep>
</ol>
</div>
</s_list>
<!-- 변환 예 -->
<div class="searchList grid">
<div style="background-image:url('https://sample.com/image.jpg')">
<h3>'업데이트 소식'에 해당되는 글 2건</h3>
<p>새롭게 업데이트되는 내용을 알려드립니다.</p>
</div>
<ol>
<li>
<span class="date">2016.01.25</span>
<a href="/2289">1월 초대장이 배포되었습니다.</a>
<span class="cnt">8</span>
<img src="https://s1.daumcdn.net/cfile/tistory/1234">
</li>
<li>
<span class="date">2015.12.22</span>
<a href="/2283">12월 초대장이 배포되었습니다.</a>
<span class="cnt">19</span>
<img src="https://s1.daumcdn.net/cfile/tistory/5678">
</li>
</ol>
</div>
페이징
리스트, 글, 방명록에서 공통으로 사용하는 페이징 치환자
<s_paging>
: 페이지가 출력되는 영역입니다
<s_paging_rep>
: 페이지가 반복 출력됩니다
: 이전 페이지 링크
: 페이지 링크
: 페이지 번호
: 다음 페이지 링크
<s_paging>
<div class="paging">
<a class="">◀ PREV </a>
<span class="numbox">
<s_paging_rep>
<a class="num">[]</a>
</s_paging_rep>
</span>
<a class="">NEXT ▶</a>
</div>
</s_paging>
사이드바 구조
<s_sidebar>
: 사이드바 그룹치환자
<s_sidebar_element>
: 사이드바 개별 엘리먼트 그룹치환자\ 첫번째 줄의 주석 <!-- TITLE -->
은 사이드바의 타이틀로 사용됩니다.
<div id="sidebar">
<s_sidebar>
<!-- 오른쪽 사이드바 -->
<s_sidebar_element>
<!-- 카테고리 -->
...
</s_sidebar_element>
<s_sidebar_element>
<!--최근에 올라온 글 -->
...
</s_sidebar_element>
<s_sidebar_element>
<!-- 카운터 -->
...
</s_sidebar_element>
</s_sidebar>
<s_sidebar>
<!-- 배너 삽입 사이드바 -->
<s_sidebar_element>
<!-- 배너 모듈 - 태터툴즈 -->
...
</s_sidebar_element>
<s_sidebar_element>
<!-- 배너모듈 - 올린 -->
...
</s_sidebar_element>
<s_sidebar_element>
<!-- 배너모듈 - RSS Feed -->
...
</s_sidebar_element>
</s_sidebar>
</div>
최근 공지사항
<s_rct_notice>
: 공지사항 리스트를 출력할 영역입니다
<s_rct_notice_rep>
: 공지사항 리스트를 반복 출력합니다
: 공지사항의 고유 주소
: 공지사항의 글 제목
<s_sidebar_element>
<!-- 공지사항 -->
<s_rct_notice>
<div class="notice">
<ul>
<s_rct_notice_rep>
<li>
<a href=""></a>
</li>
</s_rct_notice_rep>
</ul>
</div>
</s_rct_notice>
</s_sidebar_element>
최근 글
<s_rctps_rep>
: 최근에 올라온 글을 반복 출력합니다
: 글 주소
: 글 제목
: 글 댓글 갯수
: 작성자 이름 (*팀블로그용 치환자)
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
<s_rctps_rep_thumbnail>
: 대표 이미지가 있는 경우 치환
: 카테고리 이름
: 카테고리 리스트 url
<s_sidebar_element>
<!-- 최근에 올라온 글 -->
<div class="recentPost">
<h3>최근에 올라온 글 </h3>
<ul>
<s_rctps_rep>
<li>
<a href=""></a>
<span class="cnt"></span>
<s_rctps_rep_thumbnail>
<img src=""/>
</s_rctps_rep_thumbnail>
<a href=""></a>
</li>
</s_rctps_rep>
</ul>
</div>
</s_sidebar_element>
인기글
<s_rctps_popular_rep>
: 인기글을 반복 출력합니다
: 글 주소
: 글 제목
: 글 댓글 갯수
: 작성자 이름 (*팀블로그용 치환자)
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
<s_rctps_rep_thumbnail>
: 대표 이미지가 있는 경우 치환
: 카테고리 이름
: 카테고리 리스트 url
<s_sidebar_element>
<!-- 이 블로그 인기글 -->
<div class="popularPost">
<h3>이 블로그 인기글 </h3>
<ul>
<s_rctps_popular_rep>
<li>
<a href=""></a>
<span class="cnt"></span>
<s_rctps_rep_thumbnail>
<img src=""/>
</s_rctps_rep_thumbnail>
<a href=""></a>
</li>
</s_rctps_popular_rep>
</ul>
</div>
</s_sidebar_element>
최근 댓글
<s_rctrp_rep>
: 댓글을 반복 출력합니다
: 댓글로 이동할 주소
: 댓글의 본문 일부
: 댓글을 쓴 사람 이름
: 댓글을 쓴 시간
<s_sidebar_element>
<!-- 최근에 달린 댓글 -->
<div class="recentComment">
<h3>최근에 달린 댓글</h3>
<ul id="recentComments">
<s_rctrp_rep>
<li>
<a href="">.</a>
<span class="info_wrap">
<span class="name"></span>
<span class="date"></span>
</span>
</li>
</s_rctrp_rep>
</ul>
</div>
</s_sidebar_element>
카테고리
|
ALL (5658)
|
|
|
Google Search Console (4)
|
|
|
Persona (554)
|
|
|
Advanced Management Program (1)
|
|
|
: 폴더 형식의 카테고리
: 리스트 형식의 카테고리
<s_sidebar_element>
<!-- 카테고리 -->
<div class="category">
<h3>카테고리</h3>
|
ALL (5658)
|
|
|
Google Search Console (4)
|
|
|
Persona (554)
|
|
|
Advanced Management Program (1)
|
|
|
</div>
<div class="category">
<h3>카테고리</h3>
</div>
</s_sidebar_element>
랜덤태그
<s_random_tags>
: 태그를 반복 출력합니다
: 태그에 해당되는 주소
: Tag Cloud 의 크기나 색깔을 설정 (총 5단계의 레벨을 가지고 있으며, cloud1 ~ cloud5 까지 큰 것에서 작은 순서를 나타냅니다. 이 기능을 가지고 style 을 조정하시여 원하시는 스타일의 Tag Cloud 를 만드실 수 있습니다)
: 태그의 이름
<s_sidebar_element>
<!-- 태그 클라우드 -->
<div class="tagbox">
<h3>태그목록</h3>
<ul>
<s_random_tags>
<li>
<a href="" class=""> </a>
</li>
</s_random_tags>
</ul>
</div>
</s_sidebar_element>
방문자 수
: 총 방문자수
: 오늘 방문자수
: 어제 방문자수
<s_sidebar_element>
<!-- 방문자수 -->
<div class="counter">
<span class="total">Total : </span>
<span class="today">Today : </span>
<span class="yesterday">Yesterday : </span>
</div>
</s_sidebar_element>
검색
<s_search>
: 검색 입력폼을 출력할 영역입니다
: 검색어 입력 박스 이름
: 검색어
: 검색 온클릭 이벤트
<s_sidebar_element>
<!-- 검색 -->
<div class="search">
<s_search>
<input type="text" name="" value="" onkeypress="if (event.keyCode == 13) { }"
/>
<input value="검색" type="button" onclick="" class="submit" />
</s_search>
</div>
</s_sidebar_element>
: 본문 내용
라이브러리 브랜드
: 작성자 이름 (*팀블로그용 치환자)
<s_page_rep>
<div>
<h2><a href="/1463">티스토리 스킨 가이드</a></h2>
<div>
티스토리에서는 스킨을 통해서 사이트를 자유롭게 디자인할 수 있습니다. 스킨은 치환자를 사용하여 제작되고 사용된 치환자에는 티스토리의 데이터가 대입되어 티스토리의 디자인이 완성됩니다.
이 문서는 스킨에서 사용하는 치환자에 대해 설명합니다.
파일구조
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 등을 업로드하여 스킨에서 사용합니다.
스킨 정보 파일
스킨에 필요한 정보를 담고 있는 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>댓글 <span class="cnt">하나</span> 달렸습니다.</single>
</commentMessage>
<trackbackMessage>
<none>받은 트랙백이 없고</none>
<single>트랙백이 <span class="cnt">하나</span>이고</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: 내용+목록)
- tree: 카테고리
- color: 카테고리 글자색
- bgColor: 카테고리 배경색
- activeColor: 선택시 글자색
- activeBgColor: 선택시 배경색
- labelLength: 표현될 카테고리 글자 수
- showValue: 카테고리 글 수 표현(0:숨김, 1:보임)
- contentWidth: 콘텐츠영역 가로 사이즈, 이 사이즈에 맞춰 에디터의 위지윅이 제대로 구현된다.
- cover: 홈 커버 기본값으로 자세한 내용은 '홈 커버 > 기본값' 장에서 설명합니다.
홈 커버
홈 커버에 사용한 아이템을 정의합니다. 자세한 내용은 '홈 커버 > 정의' 장에서 설명합니다.
스킨 옵션
스킨 옵션에서 제공할 옵션을 정의합니다. 자세한 내용은 '스킨 옵션 > 옵션 정의' 장에서 설명합니다.
리스트 스타일
사용할 수 있는 글 목록 스타일을 정의합니다. 자세한 내용은 '리스트 > 리스트 스타일' 장에서 설명합니다.
치환자 구조
티스토리의 치환자는 그룹치환자, 값치환자의 2가지 형태를 가지고 있습니다. 그룹치환자는 내부에 스킨 데이터를 포함하며 렌더링된 값으로 변환됩니다. 값치환자는 해당하는 값으로 변환됩니다.
예
<s_tag>
<div class="taglog">
<h3>태그</h3>
<ul>
<s_tag_rep>
<li><a href="" class=""></a></li>
</s_tag_rep>
</ul>
</div>
</s_tag>
- 그룹치환자:
<s_tag>
, <s_tag_rep>
- 값치환자:
,
,
그룹치환자
<s_NAME>VALUE</s_NAME>
값치환자
공통 치환자
스킨 치환자 그룹
<s_t3>
: 티스토리 공통 javascript 삽입 (필수)
<!-- 치환 전 -->
<body>
<s_t3>
...
</s_t3>
</body>
<!-- 치환 후 -->
<body>
<script type="text/javascript" src="https://t1.daumcdn.net/tistory_admin/blogs/script/blog/common.js"></script>
<div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div>
...
</body>
기본 정보
블로그 정보
라이브러리 브랜드
: 블로그 제목
https://tistory1.daumcdn.net/tistory/3045799/attach/03a32db2cebe41198c9508d7c20b4ff1
: 블로그 대표 이미지 url
: 블로그 대표 이미지를 포함한 IMG 태그
라이브러리는 인간이 지닌 위대한 능력인 상상력을 기반으로 하여 여러가지 콘텐츠를 다루고자 합니다.
: 블로그 설명
라이브러리 브랜드
: 블로그 소유자의 필명
블로그 URL
https://creativestudio.kr/
: 블로그 url
https://stylus.tistory.com/rss
: rss feed 주소
https://stylus.tistory.com/tag
: 태그로그 url
https://stylus.tistory.com/guestbook
: 방명록 url
기타
티스토리 스킨 가이드
: 페이지 제목
: 블로그 메뉴 리스트
tt-body-page
: 페이지 타입에 따른 id
페이지 타입 |
body_id |
홈화면 |
tt-body-index |
글화면 |
tt-body-page |
카테고리 글 리스트 |
tt-body-category |
보관함 글 리스트 |
tt-body-archive |
태그 리스트 |
tt-body-tag |
검색결과 리스트 |
tt-body-search |
방명록 |
tt-body-guestbook |
지역로그 |
tt-body-location |
사용 예
<html>
<head>
<title>티스토리 스킨 가이드</title>
</head>
<body id='tt-body-page'>
<s_t3>
<header>
<h1><a href="https://creativestudio.kr/">라이브러리 브랜드</a></h1>
<!-- blog_menu사용 -->
<!-- 메뉴 직접 구성 -->
<ul class="blogMenu">
<li><a href="https://stylus.tistory.com/rss">RSS구독</a></li>
<li><a href="https://stylus.tistory.com/tag">태그</a></li>
<li><a href="https://stylus.tistory.com/guestbook">방명록</a></li>
</ul>
</header>
<section class="sidebar">
<!-- blog_image 사용 -->
<div class="blogInfo">
<div class="blogImage"> </div>
<div class="blogDesc">라이브러리는 인간이 지닌 위대한 능력인 상상력을 기반으로 하여 여러가지 콘텐츠를 다루고자 합니다. <span class="userID">라이브러리 브랜드</span></div>
</div>
<!-- image 사용 -->
<div class="blogInfo">
<div class="blogImage"><img src="https://tistory1.daumcdn.net/tistory/3045799/attach/03a32db2cebe41198c9508d7c20b4ff1"></div>
<div class="blogDesc">라이브러리는 인간이 지닌 위대한 능력인 상상력을 기반으로 하여 여러가지 콘텐츠를 다루고자 합니다. <span class="userID">라이브러리 브랜드</span></div>
</div>
</section>
</s_t3>
</body>
</html>
홈 커버
홈 커버는 홈화면을 꾸미기 위해 제공되는 치환자입니다.
<s_cover_group>
: 커버 그룹 치환자
<s_cover_rep>
: 개별 커버 표시
<s_cover>
: 개별 커버. name 애트리뷰트로 이름을 지정한다. 정의되지 않은 이름의 커버는 사용되지 않는다.
: 개별 커버 타이틀
<s_cover_url>
: 커버 url이 있는 경우에만 치환
<s_cover_item>
: 개별 커버 컨텐츠
<s_cover_item_not_article_info>
: 컨텐츠가 글이 아닌 경우에만 치환 (내부 치환자는 s_cover_item에 직접 사용 가능)
: 컨텐츠 타이틀
: 컨텐츠 요약/내용
: 컨텐츠 url
<s_cover_item_thumbnail>
: 컨텐츠 이미지가 있는 경우에만 치환
<s_cover_item_article_info>
: 컨텐츠가 글인 경우에만 치환
: 컨텐츠 타이틀
: 컨텐츠 요약/내용
: 컨텐츠 url
<s_cover_item_thumbnail>
: 컨텐츠 이미지가 있는 경우에만 치환
: 카테고리 명
: 카테고리 url
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 댓글 수
치환자 사용 예
<s_cover_group>
<s_cover_rep>
<s_cover name='featured'>
<div class='featured'>
<s_cover_item>
<div class='featured-item'>
<s_cover_item_thumbnail>
<img class="image" src="">
</s_cover_item_thumbnail>
<strong class="title"></strong>
<a href="" class="action">자세히 보기</a>
</div>
</s_cover_item>
<button class='btn-prev'><</button>
<button class='btn-next'>></button>
</div>
</s_cover>
<s_cover name='list'>
<div id="mArticle" class="article_skin">
<s_cover_item>
<s_cover_item_article_info>
<div class="list_content">
<s_cover_item_thumbnail>
<a href="" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C148x148/?fname="></a>
</s_cover_item_thumbnail>
<a href="" class="link_post">
<strong class="tit_post"></strong>
<p class="txt_post"></p>
</a>
<div class="detail_info">
<a href="" class="link_cate"></a>
<span class="txt_bar"></span>
</div>
</div>
</s_cover_item_article_info>
<s_cover_item_not_article_info>
<div class="list_content">
<s_cover_item_thumbnail>
<a href="" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C148x148/?fname="></a>
</s_cover_item_thumbnail>
<a href="" class="link_post">
<strong class="tit_post"></strong>
<p class="txt_post"></p>
</a>
</div>
</s_cover_item_not_article_info>
</s_cover_item>
<s_cover_url>
<a class="btn-more" href="">더보기</a>
</s_cover_url>
</div>
</s_cover>
</s_cover_rep>
</s_cover_group>
정의 (index.xml)
커버를 사용하기 위해서는 스킨 정보 파일에 커버 아이템을 정의해야 합니다.
<cover>
<item>
<name>커버 아이템 이름</name>
<label>사용자에게 표시할 이름</label>
<description>설명</description>
</item>
</cover>
정의 예
<cover>
<item>
<name>featured</name>
<label><![CDATA[Featured]]></label>
<description><![CDATA[강조할 글을 표시합니다.]]></description>
</item>
<item>
<name>list</name>
<label><![CDATA[리스트]]></label>
<description><![CDATA[글 리스트를 표시합니다.]]></description>
</item>
</cover>
기본값
스킨 적용 즉시 제작자가 추천하는 홈커버가 적용되도록 하기 위해서 기본값을 사용할 수 있습니다. 스킨 정보 파일의 기본값에 JSON 값을 string으로 설정합니다.
<default>
<cover>
<![CDATA[ 홈 커버 기본값 ]]>
</cover>
</default>
기본값 JSON 구조
[
{
"name": "정의된 커버 아이템 name",
"title": "커버 타이틀",
"dataType": "내용의 데이터 타입",
"data": "타입에 해당하는 데이터"
},
...
]
- name: 정의된 커버 아이템으로 없는 커버를 사용할 경우 무시됩니다.
- title: 커버타이틀로 사용할 string 입니다.
- dataType: 내용유형으로 스킨 에디터에서 제공하는 유형 중 '최신 글', '직접 입력' 만 사용할 수 있습니다.
- RECENT: 최신 글
- CUSTOM: 직접 입력
- data: 커버 내용으로 유형별로 형태가 다릅니다.
- RECENT: 카테고리와 개수를 설정할 수 있습니다.
{
"category": "ALL",
"size": 5
}
- category: 사용자의 카테고리를 알 수 없으므로 전체(ALL), 공지사항(NOTICE)만 사용할 수 있습니다.
- size: 표시될 개수를 설정합니다. 1-100 까지 설정할 수 있습니다.
- CUSTOM: 표시될 내용을 모두 설정
{
"title": "컨텐츠 타이틀",
"summary": "컨텐츠 타이틀",
"url": "컨텐츠 요약/내용",
"thumbnail": "컨텐츠 이미지"
}
기본값 예
[
{
"name": "featured",
"title": "",
"dataType": "CUSTOM",
"data": [
{
"title": "첫번째 항목",
"summary": "첫번째 항목의 summary",
"url": "https://www.tistory.com",
"thumbnail": "https://www.tistory.com/sample.png"
},
{
"title": "두번째 항목",
"summary": "두번째 항목의 summary",
"url": "https://www.tistory.com",
"thumbnail": "https://www.tistory.com/sample.png"
}
]
},
{
"name": "list",
"title": "",
"dataType": "LIST",
"data": {
"category": "ALL",
"size": 5
}
}
]
스킨 옵션
<s_if_var_{VARIABLE_NAME}>
: 옵션의 값이 있으면 (bool 타입인 경우 true이면) 치환
<s_not_var_{VARIABLE_NAME}>
: 옵션의 값이 없으면 (bool 타입인 경우 false이면) 치환
: 옵션의 값
<style>
.wrap_sub {
background-image: url('');
}
</style>
<s_if_var_scroll-load>
<style>
.article_skin .area_paging .inner_paging.scroll_spinner {
width:48px; height:48px;
background:url('./images/spinner.gif') no-repeat;
height: 48px;
width: 48px;
margin: 0 auto;
}
.article_skin .area_paging .inner_paging.scroll_spinner * {
display:none
}
</style>
<script src="./images/scroll-load.js"></script>
</s_if_var_scroll-load>
옵션 정의 (index.xml)
<variables>
<variablegroup name="그룹이름">
<variable>
<name>치환자에서 사용할 이름</name>
<label>사용자에게 표시할 이름</label>
<description>설명 (optional)</description>
<type>타입</type>
<option>max, min, select option등 값을 설정하는데 사용되는 정보 (optional: SELECT타입의 경우 필수)</option>
<default>설정하지 않은 경우 기본 값</default>
</variable>
</variablegroup>
</variables>
type
- STRING: 문자 입력
- SELECT: 옵션 선택 (옵션은 name, label, value 값을 가진 json객체로 정의)
- option 예
<option><![CDATA[
[
{"name":"light", "label":"밝은색", "value":"light"},
{"name":"dark", "label":"어두운색", "value":"dark"}
]
]]></option>
- IMAGE: 이미지 url
- BOOL: true/false
- COLOR: 컬러값 (#000000)
옵션 정의 사용 예
<variables>
<variablegroup>
<variable>
<name>scroll-load</name>
<label>
<![CDATA[ 무한스크롤 ]]>
</label>
<type>BOOL</type>
<option />
<default>true</default>
<description>
<![CDATA[ 글 리스트 끝에 다다르면 다음 페이지를 불러옵니다. ]]>
</description>
</variable>
</variablegroup>
<variablegroup name="디자인">
<variable>
<name>cover-image</name>
<label>
<![CDATA[ 커버이미지 ]]>
</label>
<type>IMAGE</type>
<option />
<default>
<![CDATA[ https://t1.daumcdn.net/tistory/0/Ray2/images/header_default.jpg ]]>
</default>
<description>
<![CDATA[ 커버 이미지를 변경합니다. ]]>
</description>
</variable>
<variable>
<name>point-color</name>
<label>
<![CDATA[ 대표 색 ]]>
</label>
<type>COLOR</type>
<option />
<default><![CDATA[#6bacce]]></default>
<description>
<![CDATA[대표 색을 사용합니다.]]>
</description>
</variable>
</variablegroup>
</variables>
태그 클라우드 치환자
태그 클라우드는 사용한 태그 리스트를 출력합니다.
태그 그룹
태그 정보
<s_tag_rep>
: 개별태그 그룹치환자
: 태그가 포함된 글을 출력하기 위한 URL
: 총 5단계가 있는데 자주 사용한 순서로 cloud1
-cloud5
가 표시됩니다.
: 태그의 이름
예
<!-- 스킨 -->
<s_tag>
<div class="taglog">
<h3>태그</h3>
<ul>
<s_tag_rep>
<li>
<a href="" class=""></a>
</li>
</s_tag_rep>
</ul>
</div>
</s_tag>
<!-- 변환 예 -->
<div class="taglog">
<h3>태그</h3>
<ul>
<li>
<a href="/tag/tistory" class="cloud1">tistory</a>
</li>
<li>
<a href="/tag/kakao" class="cloud4">kakao</a>
</li>
<li>
<a href="/tag/blog" class="cloud5">blog</a>
</li>
</ul>
</div>
방명록
방명록 그룹
<s_guest>
<div class="guestbook">
<h3>방명록</h3>
<div class="guestWrite">입력 폼</div>
<div class="guestList">리스트</div>
</div>
</s_guest>
입력 폼
<s_guest_input_form>
: 방명록을 달기 위한 입력폼을 출력합니다
: 글 내용 입력박스 이름
: 입력 완료 온클릭 이벤트
<s_guest_member>
: 로그인을 하지 않았거나 블로그 소유자가 아닌경우 보여지는 영역
<s_guest_form>
: 로그인을 하지 않았을경우 보여지는 영역
: 이름입력 박스 이름
: 이름
: 비밀번호 입력 박스 이름
: 비밀번호
: 홈페이지 입력 박스 이름
: 홈페이지
<s_guest_input_form>
<div class="guestWrite">
<s_guest_member>
<s_guest_form>
<div>
<input type="text" name="" value="" />
<label for="name"> : 이름 </label>
</div>
<div>
<input type="password" maxlength="8" name="" value="" />
<label for="password"> : 패스워드 </label>
</div>
<div>
<input type="text" name="" value="" />
<label for="homepage"> : 홈페이지 </label>
</div>
</s_guest_form>
</s_guest_member>
<div>
<textarea name="" cols="50" rows="6"></textarea>
</div>
<div>
<input type="submit" value="안부 남기기" onclick=""/>
</div>
</div>
</s_guest_input_form>
리스트
<s_guest_container>
: 방명록 리스트 그룹치환자
<s_guest_rep>
: 방명록 정보 그룹치환자
<s_guest_reply_container>
: '방명록'의 댓글 리스트를 출력할 영역입니다.
<s_guest_reply_rep>
: '방명록' 댓글 리스트의 반복열입니다
내용 (rep 내부)
: 방명록의 고유 ID
: 방명록의 글의 목록에 반복되는 스타일 + admin 아이디 앞에 아이콘
: 글쓴사람 이름
: 글쓴 날짜
: 글 내용
: 답글 삭제 온클릭 이벤트
: 답글 수정 온클릭 이벤트
<s_guest_container>
<div class="guestList">
<ol>
<s_guest_rep>
<li id=''>
<div class="">
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="#" onclick="">MODIFY/DELETE</a>
<a href="#" onclick="">REPLY</a>
</span>
<p></p>
</div>
<s_guest_reply_container>
<ul>
<s_guest_reply_rep>
<li id=''>
<div class="">
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="#" onclick="">MODIFY/DELETE </a>
</span>
<p></p>
</div>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ol>
</div>
</s_guest_container>
글 치환자
글 정보
<s_article_rep>
: 글 그룹 치환자
: 블로그 글의 고유 주소
: 블로그 글의 제목
: 카테고리 링크
: 카테고리 명
: 글쓴 날짜/시간 (yyyy. m. d. HH:MM)
: 글쓴 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 작성자 이름 (*팀블로그용 치환자)
: 블로그 본문 내용
<s_article_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
: 댓글을 열고 닫는 온클릭 이벤트
<s_rp_count>
: 댓글의 갯수를 출력하는 영역
<s_article_rep>
<div class="titleWrap">
<h2><a href=""></a></h2>
<div class="category">
<a href=""></a>
</div>
<div class="date"></div>
</div>
<div class="article">
</div>
</s_article_rep>
관리기능
<s_ad_div>
: 글 관리기능 그룹치환자 (관리 권한 있는 경우만 표시)
: 수정
: 수정 온클릭 이벤트
: 글의 현재 상태
: 상태 변경 온클릭 이벤트
: 이후 상태
: 트랙백 온클릭 이벤트
: 삭제 온클릭 이벤트
<s_ad_div>
<div class="admin">
<a href="">수정</a> :
<a href="#" onclick="">수정(창으로)</a> |
()→<a href="#" onclick=""></a> |
<a href="#" onclick="">관련글(트랙백)</a> |
<a href="#" onclick="">삭제</a>
</div>
</s_ad_div>
태그
<s_tag_label>
: 글과 관련된 태그가 출력되는 영역입니다.
<s_tag_label>
<div class="tagTrail">
<span class="tagText">TAG </span>
</div>
</s_tag_label>
퍼머링크 / 인덱스
퍼머링크 페이지에서와 인덱스 페이지에서 표시될 내용을 구분할 수 있습니다.\ (퍼머링크 페이지/인덱스 페이지 영역 밖에서 사용되는 치환자는 둘 모두에서 표시됩니다)
퍼머링크
<s_permalink_article_rep>
: 퍼머링크 페이지일 때만 표시되는 영역입니다 (내부에서 사용하는 치환자는 <s_article_rep>
내부에서 사용하는 치환자와 동일합니다)
인덱스
<s_index_article_rep>
: 인덱스 페이지일 때만 표시되는 영역입니다
: 블로그 글의 고유 주소
: 블로그 글의 제목
: 카테고리 주소
: 카테고리 이름
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 작성자 이름
: 글 내용 요약
<s_article_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
<s_rp_count>
: 댓글의 갯수를 출력하는 영역
<s_index_article_rep>
<div class="list_content">
<s_article_rep_thumbnail>
<img src="">
</s_article_rep_thumbnail>
<a href="" class="link_post">
<strong class="tit_post"></strong>
<p class="txt_post"></p>
</a>
<div class="detail_info">
<a href="" class="link_cate">
</a>
<span class="txt_bar"></span>
</div>
</div>
</s_index_article_rep>
카테고리의 다른 글
글이 속한 카테고리의 다른 글을 보여줄 수 있습니다.\ 카테고리에 속하지 않은 글에는 표시되지 않습니다.
<s_article_related>
: 카테고리 글 더보기 영역
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 발행시간
<s_article_related_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
<s_article_related>
<div class="area_related">
<strong class="tit_related">'' Related Articles</strong>
<ul class="list_related">
<s_article_related_rep>
<li class="">
<a href="" class="link_related">
<s_article_related_rep_thumbnail>
<span class="thumb_related">
<img src="" class="img_related" alt="">
</span>
</s_article_related_rep_thumbnail>
<span class="txt_related"></span>
<span class="date_related"></span>
<span class="frame_related"></span>
</a>
</li>
</s_article_related_rep>
</ul>
<a href="" class="link_more">more</a>
</div>
</s_article_related>
이전 글 / 다음 글
글의 이전 글과 다음 글을 보여줍니다. 페이징 치환자의 이전/다음 페이지 url과 동일한 글입니다.
<s_article_prev>
: 이전 글 그룹치환자. 이전 글이 있는 경우 사용됩니다.
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 작성시간
<s_article_prev_thumbnail>
: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
<s_article_next>
: 다음 글 그룹치환자. 다음 글이 있는 경우 사용됩니다.
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 작성시간
<s_article_next_thumbnail>
: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
댓글
댓글 그룹
<s_rp>
: 댓글으로 접근시 이 영역 내부의 치환자가 출력됩니다.
<s_rp>
<div class="comment">
<h3>댓글을 달아 주세요 </h3>
<div class="commentList">18-6-1 리스트 </div>
<div class="commentWrite">18-6-2 글쓰기 </div>
</div>
</s_rp>
입력 폼
<s_rp_input_form>
: 댓글을 달기 위한 입력폼을 출력합니다
: 댓글주소. 댓글들을 구분하기위해 사용합니다. 한 화면에 있는 댓글들은 각각 고유의 값을 가지고 있습니다.
: 댓글 입력 박스 이름
: 댓글 입력 온클릭 이벤트
<s_rp_member>
: 로그인을 하지 않았거나 블로그 소유자가 아닌경우 보여지는 영역
: 비밀글 체크박스 이름
<s_rp_guest>
: 로그인을 하지 않았을경우 보여지는 영역
: 이름입력 박스 이름
: 이름
: 비밀번호 입력 박스 이름
: 비밀번호
: 홈페이지 입력 박스 이름
: 홈페이지
<s_rp_input_form>
<div class="commentWrite">
<s_rp_member>
<s_rp_guest>
<p>
<input type="text" name="" value="" />
<label for="name"> : 이름 </label>
</p>
<p>
<input type="password" maxlength="8" name="" value="" />블로그 관리자일 경우 password field에 미리 비밀번호를 넣어놓기 위해 만들어 놓았던 치환자였으나, 지금은 사용되지 않음.. (현재는 블로그 관리자일 경우 password field가 나타나지
않음.)
<label for="password"> : 패스워드 </label>
</p>
<p>
<input type="text" class="homepage" name="" value="" />
<label for="homepage"> : 홈페이지 </label>
</p>
</s_rp_guest>
<p class="secretWrap">
<input type="checkbox" name="" class="checkbox" />
<label for="secret"> 비밀글 </label>
</p>
</s_rp_member>
<p>
<textarea name="" rows="10" cols="50"></textarea>
</p>
<p>
<input type="submit" value="댓글 달기" onclick="" />
</p>
</div>
</s_rp_input_form>
댓글 리스트 구조
<s_rp_container>
: 등록된 '댓글' 리스트를 출력할 영역입니다
<s_rp_rep>
: '댓글' 리스트의 반복열입니다
<s_rp2_container>
: '댓글'의 댓글 리스트를 출력할 영역입니다.
<s_rp2_rep>
: '댓글' 댓글 리스트의 반복열입니다
댓글 내용 (rep 내부)
: 댓글의 고유 ID
: 댓글의 글의 목록에 반복되는 스타일 + admin 아이디 앞에 아이콘
: 글쓴사람 이름
: 댓글작성자의 프로필 이미지
: 글쓴 날짜
: 글 내용
: 댓글 주소
: 답글 삭제 온클릭 이벤트
: 답글 수정 온클릭 이벤트
<div class="commentList">
<s_rp_container>
<ol>
<s_rp_rep>
<li id=''>
<div class="">
<span class="image"></span>
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="" class="address">
<span>댓글주소</span>
</a>
<a href="#" onclick="" class="modify">
<span>수정/삭제</span>
</a>
<a href="#" onclick="" class="write">
<span>댓글쓰기</span>
</a>
</span>
<p></p>
</div>
<s_rp2_container>
<ul>
<s_rp2_rep>
<li id=''>
<div class="">
<span class="image"></span>
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="" class="address">
<span>댓글주소</span>
</a>
<a href="#" onclick="" class="modify">
<span>수정/삭제</span>
</a>
</span>
<p></p>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ol>
</s_rp_container>
</div>
공지사항 치환자
<s_notice_rep>
: 공지사항 그룹 치환자
: '공지사항'에 등록된 글의 고유 주소
: 글 제목
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 본문 내용
: 작성자 이름 (*팀블로그용 치환자)
<s_notice_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
<s_notice_rep>
<div class="entryNotice">
<div class="titleWrap">
<h2><a href=""></a></h2>
<span class="date"> </span>
</div>
<div class="article">
</div>
</div>
</s_notice_rep>
퍼머링크 / 인덱스
퍼머링크 페이지에서와 인덱스 페이지에서 표시될 내용을 구분할 수 있습니다.\ (퍼머링크 페이지/인덱스 페이지 영역 밖에서 사용되는 치환자는 둘 모두에서 표시됩니다)
퍼머링크
<s_permalink_article_rep>
: 퍼머링크 페이지일 때만 표시되는 영역입니다 (내부에서 사용하는 치환자는 <s_article_rep>
내부에서 사용하는 치환자와 동일합니다)
인덱스
<s_index_article_rep>
: 인덱스 페이지일 때만 표시되는 영역입니다
: '공지사항'에 등록된 글의 고유 주소
: 글 제목
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 본문 내용
: 작성자 이름 (*팀블로그용 치환자)
: 글 내용 일부
<s_notice_rep_thumbnail>
: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
<s_index_article_rep>
<div class="list_content">
<s_notice_rep_thumbnail>
<img src="">
</s_notice_rep_thumbnail>
<a href="" class="link_post">
<strong class="tit_post"></strong>
<p class="txt_post"></p>
</a>
<div class="detail_info">
<a href="" class="link_cate">
</a>
<span class="txt_bar"></span>
</div>
</div>
</s_index_article_rep>
보호글 치환자
<s_article_protected>
: 보호글 그룹치환자
: 보호글의 고유 주소
: 보호글의 제목
: 카테고리 링크
: 카테고리 명
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 보호글의 비밀번호 텍스트 박스의 Id값(label 사용 용도)
: 보호글의 비밀번호를 입력하고 엔터키나 확인버튼을 눌렀을 때 실행될 자바스크립트 코드가 들어갑니다.
: 작성자 이름 (*팀블로그용 치환자)
<s_article_protected>
<div class="entryProtected">
<h2><a href=""></a></h2>
<span class="date"></span>
<p>보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.</p>
<p>
<label for="">비밀번호 ::</label>
<input type="password" maxlength="16" id="" name="" value="" onkeydown="if (event.keyCode == 13)" />
<input type="button" class="submit" value="submit" onclick="" />
</p>
</div>
</s_article_protected>
공지사항 치환자
<s_page_rep>
: '페이지'가 출력되는 영역입니다.\ (스킨에 페이지치환자가 존재하지 않는 경우 글 치환자에 페이지가 표시됩니다.)
: 고유 주소
: 제목
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 본문 내용
: 작성자 이름 (*팀블로그용 치환자)
<s_page_rep>
<div>
<h2><a href=""></a></h2>
<div>
</div>
</div>
</s_page_rep>
리스트 치환자
리스트 치환자는 카테고리, 검색, 태그의 글 리스트를 표시합니다.
리스트 그룹
<s_list>
: 리스트 그룹 치환자
: 카테고리 이름, 검색어, 태그명
: 글의 총 개수
: 리스트 설명 (카테고리인 경우 카테고리 설명, 그외 블로그 설명)
: 리스트 스타일 값 (class attribute로 활용 가능)
<s_list_image>
: 리스트 대표 이미지가 있는 경우 동작
: 리스트 대표 이미지 (카테고리인 경우 카테고리 대표이미지, 그외 블로그 대표이미지)
아이템 반복 그룹
<s_list_empty>
: 리스트에 글이 없는 경우 보이는 영역
<s_list_rep>
: 리스트 아이템이 반복되는 영역
: 글의 고유 주소
: 글 작성 날짜 (yyyy.mm.dd)
: 글 작성 세부시간 - 연도 (yyyy)
: 글 작성 세부시간 - 월 (mm)
: 글 작성 세부시간 - 일 (dd)
: 글 작성 세부시간 - 시 (HH)
: 글 작성 세부시간 - 분 (MM)
: 글 작성 세부시간 - 초 (SS)
: 글의 제목
: 글이 속한 카테고리 이름
: 글이 속한 카테고리 글 목록 url
: 댓글 수
: 작성자 이름
: 글 내용 요약
<s_list_rep_thumbnail>
: 대표 이미지가 있는 경우 치환
리스트 스타일
리스트 스타일을 사용하기 위해서는 스킨 정보 파일에 리스트 스타일 아이템을 정의해야 합니다. 리스트 스타일을 정의하면 카테고리 관리화면에서 리스트 스타일이 표시되고 사용자가 선택할 수 있습니다. 이를 사용하여 카테고리별로 다른 스타일을 적용할 때 사용할 수 있습니다.
<liststyle>
<item>
<label>표시할 이름</label>
<value>사용될 값</value>
</item>
</liststyle>
사용 예
<!-- 스킨 예 -->
<s_list>
<div class="searchList ">
<div <s_list_image>style="background-image:url('')"</s_list_image>>
<h3>''에 해당되는 글 건</h3>
<p></p>
</div>
<ol>
<s_list_rep>
<li>
<span class="date"></span>
<a href=""></a>
<span class="cnt"></span>
<s_list_rep_thumbnail>
<img src="">
</s_list_rep_thumbnail>
</li>
</s_list_rep>
</ol>
</div>
</s_list>
<!-- 변환 예 -->
<div class="searchList grid">
<div style="background-image:url('https://sample.com/image.jpg')">
<h3>'업데이트 소식'에 해당되는 글 2건</h3>
<p>새롭게 업데이트되는 내용을 알려드립니다.</p>
</div>
<ol>
<li>
<span class="date">2016.01.25</span>
<a href="/2289">1월 초대장이 배포되었습니다.</a>
<span class="cnt">8</span>
<img src="https://s1.daumcdn.net/cfile/tistory/1234">
</li>
<li>
<span class="date">2015.12.22</span>
<a href="/2283">12월 초대장이 배포되었습니다.</a>
<span class="cnt">19</span>
<img src="https://s1.daumcdn.net/cfile/tistory/5678">
</li>
</ol>
</div>
페이징
리스트, 글, 방명록에서 공통으로 사용하는 페이징 치환자
<s_paging>
: 페이지가 출력되는 영역입니다
<s_paging_rep>
: 페이지가 반복 출력됩니다
: 이전 페이지 링크
: 페이지 링크
: 페이지 번호
: 다음 페이지 링크
<s_paging>
<div class="paging">
<a class="">◀ PREV </a>
<span class="numbox">
<s_paging_rep>
<a class="num">[]</a>
</s_paging_rep>
</span>
<a class="">NEXT ▶</a>
</div>
</s_paging>
사이드바 구조
<s_sidebar>
: 사이드바 그룹치환자
<s_sidebar_element>
: 사이드바 개별 엘리먼트 그룹치환자\ 첫번째 줄의 주석 <!-- TITLE -->
은 사이드바의 타이틀로 사용됩니다.
<div id="sidebar">
<s_sidebar>
<!-- 오른쪽 사이드바 -->
<s_sidebar_element>
<!-- 카테고리 -->
...
</s_sidebar_element>
<s_sidebar_element>
<!--최근에 올라온 글 -->
...
</s_sidebar_element>
<s_sidebar_element>
<!-- 카운터 -->
...
</s_sidebar_element>
</s_sidebar>
<s_sidebar>
<!-- 배너 삽입 사이드바 -->
<s_sidebar_element>
<!-- 배너 모듈 - 태터툴즈 -->
...
</s_sidebar_element>
<s_sidebar_element>
<!-- 배너모듈 - 올린 -->
...
</s_sidebar_element>
<s_sidebar_element>
<!-- 배너모듈 - RSS Feed -->
...
</s_sidebar_element>
</s_sidebar>
</div>
최근 공지사항
<s_rct_notice>
: 공지사항 리스트를 출력할 영역입니다
<s_rct_notice_rep>
: 공지사항 리스트를 반복 출력합니다
: 공지사항의 고유 주소
: 공지사항의 글 제목
<s_sidebar_element>
<!-- 공지사항 -->
<s_rct_notice>
<div class="notice">
<ul>
<s_rct_notice_rep>
<li>
<a href=""></a>
</li>
</s_rct_notice_rep>
</ul>
</div>
</s_rct_notice>
</s_sidebar_element>
최근 글
<s_rctps_rep>
: 최근에 올라온 글을 반복 출력합니다
: 글 주소
: 글 제목
: 글 댓글 갯수
: 작성자 이름 (*팀블로그용 치환자)
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
<s_rctps_rep_thumbnail>
: 대표 이미지가 있는 경우 치환
: 카테고리 이름
: 카테고리 리스트 url
<s_sidebar_element>
<!-- 최근에 올라온 글 -->
<div class="recentPost">
<h3>최근에 올라온 글 </h3>
<ul>
<s_rctps_rep>
<li>
<a href=""></a>
<span class="cnt"></span>
<s_rctps_rep_thumbnail>
<img src=""/>
</s_rctps_rep_thumbnail>
<a href=""></a>
</li>
</s_rctps_rep>
</ul>
</div>
</s_sidebar_element>
인기글
<s_rctps_popular_rep>
: 인기글을 반복 출력합니다
: 글 주소
: 글 제목
: 글 댓글 갯수
: 작성자 이름 (*팀블로그용 치환자)
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
<s_rctps_rep_thumbnail>
: 대표 이미지가 있는 경우 치환
: 카테고리 이름
: 카테고리 리스트 url
<s_sidebar_element>
<!-- 이 블로그 인기글 -->
<div class="popularPost">
<h3>이 블로그 인기글 </h3>
<ul>
<s_rctps_popular_rep>
<li>
<a href=""></a>
<span class="cnt"></span>
<s_rctps_rep_thumbnail>
<img src=""/>
</s_rctps_rep_thumbnail>
<a href=""></a>
</li>
</s_rctps_popular_rep>
</ul>
</div>
</s_sidebar_element>
최근 댓글
<s_rctrp_rep>
: 댓글을 반복 출력합니다
: 댓글로 이동할 주소
: 댓글의 본문 일부
: 댓글을 쓴 사람 이름
: 댓글을 쓴 시간
<s_sidebar_element>
<!-- 최근에 달린 댓글 -->
<div class="recentComment">
<h3>최근에 달린 댓글</h3>
<ul id="recentComments">
<s_rctrp_rep>
<li>
<a href="">.</a>
<span class="info_wrap">
<span class="name"></span>
<span class="date"></span>
</span>
</li>
</s_rctrp_rep>
</ul>
</div>
</s_sidebar_element>
카테고리
|
ALL (5658)
|
|
|
Google Search Console (4)
|
|
|
Persona (554)
|
|
|
Advanced Management Program (1)
|
|
|
: 폴더 형식의 카테고리
: 리스트 형식의 카테고리
<s_sidebar_element>
<!-- 카테고리 -->
<div class="category">
<h3>카테고리</h3>
|
ALL (5658)
|
|
|
Google Search Console (4)
|
|
|
Persona (554)
|
|
|
Advanced Management Program (1)
|
|
|
</div>
<div class="category">
<h3>카테고리</h3>
</div>
</s_sidebar_element>
랜덤태그
<s_random_tags>
: 태그를 반복 출력합니다
: 태그에 해당되는 주소
: Tag Cloud 의 크기나 색깔을 설정 (총 5단계의 레벨을 가지고 있으며, cloud1 ~ cloud5 까지 큰 것에서 작은 순서를 나타냅니다. 이 기능을 가지고 style 을 조정하시여 원하시는 스타일의 Tag Cloud 를 만드실 수 있습니다)
: 태그의 이름
<s_sidebar_element>
<!-- 태그 클라우드 -->
<div class="tagbox">
<h3>태그목록</h3>
<ul>
<s_random_tags>
<li>
<a href="" class=""> </a>
</li>
</s_random_tags>
</ul>
</div>
</s_sidebar_element>
방문자 수
: 총 방문자수
: 오늘 방문자수
: 어제 방문자수
<s_sidebar_element>
<!-- 방문자수 -->
<div class="counter">
<span class="total">Total : </span>
<span class="today">Today : </span>
<span class="yesterday">Yesterday : </span>
</div>
</s_sidebar_element>
검색
<s_search>
: 검색 입력폼을 출력할 영역입니다
: 검색어 입력 박스 이름
: 검색어
: 검색 온클릭 이벤트
<s_sidebar_element>
<!-- 검색 -->
<div class="search">
<s_search>
<input type="text" name="" value="" onkeypress="if (event.keyCode == 13) { }"
/>
<input value="검색" type="button" onclick="" class="submit" />
</s_search>
</div>
</s_sidebar_element>
</div>
</div>
</s_page_rep>
리스트 치환자
리스트 치환자는 카테고리, 검색, 태그의 글 리스트를 표시합니다.
리스트 그룹
<s_list>
: 리스트 그룹 치환자
: 카테고리 이름, 검색어, 태그명
: 글의 총 개수
: 리스트 설명 (카테고리인 경우 카테고리 설명, 그외 블로그 설명)
: 리스트 스타일 값 (class attribute로 활용 가능)
<s_list_image>
: 리스트 대표 이미지가 있는 경우 동작
: 리스트 대표 이미지 (카테고리인 경우 카테고리 대표이미지, 그외 블로그 대표이미지)
아이템 반복 그룹
<s_list_empty>
: 리스트에 글이 없는 경우 보이는 영역
<s_list_rep>
: 리스트 아이템이 반복되는 영역
: 글의 고유 주소
: 글 작성 날짜 (yyyy.mm.dd)
: 글 작성 세부시간 - 연도 (yyyy)
: 글 작성 세부시간 - 월 (mm)
: 글 작성 세부시간 - 일 (dd)
: 글 작성 세부시간 - 시 (HH)
: 글 작성 세부시간 - 분 (MM)
: 글 작성 세부시간 - 초 (SS)
: 글의 제목
: 글이 속한 카테고리 이름
: 글이 속한 카테고리 글 목록 url
2
: 댓글 수
: 작성자 이름
: 글 내용 요약
<s_list_rep_thumbnail>
: 대표 이미지가 있는 경우 치환
리스트 스타일
리스트 스타일을 사용하기 위해서는 스킨 정보 파일에 리스트 스타일 아이템을 정의해야 합니다. 리스트 스타일을 정의하면 카테고리 관리화면에서 리스트 스타일이 표시되고 사용자가 선택할 수 있습니다. 이를 사용하여 카테고리별로 다른 스타일을 적용할 때 사용할 수 있습니다.
<liststyle>
<item>
<label>표시할 이름</label>
<value>사용될 값</value>
</item>
</liststyle>
사용 예
<!-- 스킨 예 -->
<s_list>
<div class="searchList ">
<div <s_list_image>style="background-image:url('')"</s_list_image>>
<h3>''에 해당되는 글 건</h3>
<p></p>
</div>
<ol>
<s_list_rep>
<li>
<span class="date"></span>
<a href=""></a>
<span class="cnt">2</span>
<s_list_rep_thumbnail>
<img src="">
</s_list_rep_thumbnail>
</li>
</s_list_rep>
</ol>
</div>
</s_list>
<!-- 변환 예 -->
<div class="searchList grid">
<div style="background-image:url('https://sample.com/image.jpg')">
<h3>'업데이트 소식'에 해당되는 글 2건</h3>
<p>새롭게 업데이트되는 내용을 알려드립니다.</p>
</div>
<ol>
<li>
<span class="date">2016.01.25</span>
<a href="/2289">1월 초대장이 배포되었습니다.</a>
<span class="cnt">8</span>
<img src="https://s1.daumcdn.net/cfile/tistory/1234">
</li>
<li>
<span class="date">2015.12.22</span>
<a href="/2283">12월 초대장이 배포되었습니다.</a>
<span class="cnt">19</span>
<img src="https://s1.daumcdn.net/cfile/tistory/5678">
</li>
</ol>
</div>
페이징
리스트, 글, 방명록에서 공통으로 사용하는 페이징 치환자
<s_paging>
: 페이지가 출력되는 영역입니다
<s_paging_rep>
: 페이지가 반복 출력됩니다
: 이전 페이지 링크
: 페이지 링크
: 페이지 번호
: 다음 페이지 링크
<s_paging>
<div class="paging">
<a class="">◀ PREV </a>
<span class="numbox">
<s_paging_rep>
<a class="num">[]</a>
</s_paging_rep>
</span>
<a class="">NEXT ▶</a>
</div>
</s_paging>
사이드바 구조
<s_sidebar>
: 사이드바 그룹치환자
<s_sidebar_element>
: 사이드바 개별 엘리먼트 그룹치환자\ 첫번째 줄의 주석 <!-- TITLE -->
은 사이드바의 타이틀로 사용됩니다.
<div id="sidebar">
<s_sidebar>
<!-- 오른쪽 사이드바 -->
<s_sidebar_element>
<!-- 카테고리 -->
...
</s_sidebar_element>
<s_sidebar_element>
<!--최근에 올라온 글 -->
...
</s_sidebar_element>
<s_sidebar_element>
<!-- 카운터 -->
...
</s_sidebar_element>
</s_sidebar>
<s_sidebar>
<!-- 배너 삽입 사이드바 -->
<s_sidebar_element>
<!-- 배너 모듈 - 태터툴즈 -->
...
</s_sidebar_element>
<s_sidebar_element>
<!-- 배너모듈 - 올린 -->
...
</s_sidebar_element>
<s_sidebar_element>
<!-- 배너모듈 - RSS Feed -->
...
</s_sidebar_element>
</s_sidebar>
</div>
최근 공지사항
<s_rct_notice>
: 공지사항 리스트를 출력할 영역입니다
<s_rct_notice_rep>
: 공지사항 리스트를 반복 출력합니다
: 공지사항의 고유 주소
: 공지사항의 글 제목
<s_sidebar_element>
<!-- 공지사항 -->
<s_rct_notice>
<div class="notice">
<ul>
<s_rct_notice_rep>
<li>
<a href=""></a>
</li>
</s_rct_notice_rep>
</ul>
</div>
</s_rct_notice>
</s_sidebar_element>
최근 글
<s_rctps_rep>
: 최근에 올라온 글을 반복 출력합니다
: 글 주소
: 글 제목
: 글 댓글 갯수
: 작성자 이름 (*팀블로그용 치환자)
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
<s_rctps_rep_thumbnail>
: 대표 이미지가 있는 경우 치환
: 카테고리 이름
: 카테고리 리스트 url
<s_sidebar_element>
<!-- 최근에 올라온 글 -->
<div class="recentPost">
<h3>최근에 올라온 글 </h3>
<ul>
<s_rctps_rep>
<li>
<a href=""></a>
<span class="cnt"></span>
<s_rctps_rep_thumbnail>
<img src=""/>
</s_rctps_rep_thumbnail>
<a href=""></a>
</li>
</s_rctps_rep>
</ul>
</div>
</s_sidebar_element>
인기글
<s_rctps_popular_rep>
: 인기글을 반복 출력합니다
: 글 주소
: 글 제목
: 글 댓글 갯수
: 작성자 이름 (*팀블로그용 치환자)
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
<s_rctps_rep_thumbnail>
: 대표 이미지가 있는 경우 치환
: 카테고리 이름
: 카테고리 리스트 url
<s_sidebar_element>
<!-- 이 블로그 인기글 -->
<div class="popularPost">
<h3>이 블로그 인기글 </h3>
<ul>
<s_rctps_popular_rep>
<li>
<a href=""></a>
<span class="cnt"></span>
<s_rctps_rep_thumbnail>
<img src=""/>
</s_rctps_rep_thumbnail>
<a href=""></a>
</li>
</s_rctps_popular_rep>
</ul>
</div>
</s_sidebar_element>
최근 댓글
<s_rctrp_rep>
: 댓글을 반복 출력합니다
: 댓글로 이동할 주소
: 댓글의 본문 일부
: 댓글을 쓴 사람 이름
: 댓글을 쓴 시간
<s_sidebar_element>
<!-- 최근에 달린 댓글 -->
<div class="recentComment">
<h3>최근에 달린 댓글</h3>
<ul id="recentComments">
<s_rctrp_rep>
<li>
<a href="">.</a>
<span class="info_wrap">
<span class="name"></span>
<span class="date"></span>
</span>
</li>
</s_rctrp_rep>
</ul>
</div>
</s_sidebar_element>
카테고리
|
ALL (5658)
|
|
|
Google Search Console (4)
|
|
|
Persona (554)
|
|
|
Advanced Management Program (1)
|
|
|
: 폴더 형식의 카테고리
: 리스트 형식의 카테고리
<s_sidebar_element>
<!-- 카테고리 -->
<div class="category">
<h3>카테고리</h3>
|
ALL (5658)
|
|
|
Google Search Console (4)
|
|
|
Persona (554)
|
|
|
Advanced Management Program (1)
|
|
|
</div>
<div class="category">
<h3>카테고리</h3>
</div>
</s_sidebar_element>
랜덤태그
<s_random_tags>
: 태그를 반복 출력합니다
: 태그에 해당되는 주소
: Tag Cloud 의 크기나 색깔을 설정 (총 5단계의 레벨을 가지고 있으며, cloud1 ~ cloud5 까지 큰 것에서 작은 순서를 나타냅니다. 이 기능을 가지고 style 을 조정하시여 원하시는 스타일의 Tag Cloud 를 만드실 수 있습니다)
: 태그의 이름
<s_sidebar_element>
<!-- 태그 클라우드 -->
<div class="tagbox">
<h3>태그목록</h3>
<ul>
<s_random_tags>
<li>
<a href="" class=""> </a>
</li>
</s_random_tags>
</ul>
</div>
</s_sidebar_element>
방문자 수
: 총 방문자수
: 오늘 방문자수
: 어제 방문자수
<s_sidebar_element>
<!-- 방문자수 -->
<div class="counter">
<span class="total">Total : </span>
<span class="today">Today : </span>
<span class="yesterday">Yesterday : </span>
</div>
</s_sidebar_element>
검색
<s_search>
: 검색 입력폼을 출력할 영역입니다
: 검색어 입력 박스 이름
: 검색어
: 검색 온클릭 이벤트
<s_sidebar_element>
<!-- 검색 -->
<div class="search">
<s_search>
<input type="text" name="" value="" onkeypress="if (event.keyCode == 13) { }"
/>
<input value="검색" type="button" onclick="" class="submit" />
</s_search>
</div>
</s_sidebar_element>