스킨 제작 매뉴얼 - 5. 마무리 (index.xml)

Step05 : 마무리 (index.xml)

스킨을 제작했다면 다음 상황을 점검해 봐야 합니다.

스킨의 미리보기 이미지파일인 preview.gif (size : 150 X 150)이 있는지...
스킨의 디자인에 맞춘 출력을 설정해주는 index.xml 파일을 생성 했는지...

이 두가지 파일이 없어도 스킨의 구성에는 크게 문제는 없지만, 자신이 제작한 스킨의 완성도롤 높이려면 꼭 필요한 파일입니다.

스킨 정보 파일 설명

information : 스킨 관련 정보

name : 스킨 이름
version : 스킨 버전
description : 스킨에 대한 설명
license : 스킨의 저작권

author : 제작자 정보

name : 제작자 이름
homepage : 제작자 홈페이지
email : 제작자 이메일

default : 스킨에 맞춘 기본 출력값

recentEntries : 사이드바의 최근글 표시 갯수
recentComments : 사이드바의 최근 댓글 표시 갯수
recentTrackbacks : 사이드바의 최근 트랙백 표시 갯수
itemsOnGuestbook : 한페이지에 표시될 방명록 갯수 ***
tagsInCloud : 사이드바에 표시될 태그 갯수
sortInCloud : 태그 클라우드 표현 방식 (1:인기도순, 2:이름순, 3:랜덤)
expandComment : 댓글영역 표현 방식 (0:감추기, 1:펼치기)
expandTrackback : 트랙백영역 표현 방식 (0:감추기, 1:펼치기)
lengthOfRecentNotice : 최근 공지 표현될 글자수
lengthOfRecentEntry : 최근 글 표현될 글자수
lengthOfRecentComment : 최근 댓글에 표현될 글자수
lengthOfRecentTrackback : 최근 트랙백에 표현될 글자수
lengthOfLink : 링크에 표현될 글자수
showListOnCategory : 카테고리 클릭시 리스트 표현(0:숨김, 1:보임)
showListOnArchive : 글보관함 클릭시 리스트 표현(0:숨김, 1:보임)
commentMessage : 댓글 표현 방법
- none : 댓글이 하나도 없을때
- single : 댓글이 하나 있을때
trackbackMessage : 트랙백 표현 방법
- none : 트랙백이 하나도 없을때
- single : 댓글이 하나 있을때
tree : 카테고리
- color : 카테고리 글자색
- bgColor : 카테고리 배경색
- activeColor : 선택시 글자색
- activeBgColor : 선택시 배경색
- labelLength : 표현될 카테고리 글자 수
- showValue : 카테고리 글 수 표현(0:숨김, 1:보임)
contentWidth : 컨텐츠영역 가로 사이즈, 이 사이즈에 맞춰 에디터의 위지윅이 제대로 구현된다.

샘플 보기 : 티스토리 기본 스킨의 예

<?xml version="1.0" encoding="utf-8"?>
<skin>

</information>
<author>

<name>leezche</name>
<homepage>http://www.plyfly.net</homepage>
<email>leezche@gmail.com</email>

</author>
<default>

<none>댓글이 없습니다.</none>
<single>댓글 <span class="cnt">하나</span> 달렸습니다.</single>

</commentMessage>
<trackbackMessage>

</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>

참고 : 이미지로 보기

0개의 걸린 글 과 0개의 댓글이 있습니다.

이 글의 댓글/트랙백 RSS : http://www.textcube.org/manual/rss/response/78

스킨 제작 매뉴얼 - 4. 스타일 (style.css)

Step04 : 스타일 (style.css)

태터툴즈는 페이징이나 카테고리, 달력등 기본으로 정의 되어야 하는 스타일이 존재합니다.

페이징

본문

달력

댓글, 방명록

그림 표시

페이징

현재 선택된 있는 페이지 스타일

클래스명

.selected { }

이미지 보기

사용 예

.selected
{
text-align:center;
border-right:1px solid #ccc;
padding-right:10px;
margin-right:10px;
font-weight:bold;
color:#f30;
}

Move to top↑
첫페이지 또는 마지막 페이지 선택시 이전페이지, 다음 페이지 스타일

클래스명

.no-more-prev { }
.no-more-next { }

이미지 보기

사용 예

.no-more-prev,
.no-more-next
{
color:#ccc;
}

Move to top↑

달력

달력의 년월일, 이전달, 다음달을 표시하는 스타일

클래스 명

.cal_month { }

이미지 보기

사용 예

.cal_month
{
font-size:0.85em;
height:18px;
font-weight:bold;
}

Move to top↑
달력의 요일명을 표시하는 스타일 (th 영역)

클래스 명

.cal_week1 { }

이미지 보기

사용 예

.cal_week1
{
font:0.95em dotum;
height:18px;
font-weight:normal;
}

Move to top↑
일요일이라는 요일명을 표시하는 스타일 (th 영역)

클래스 명

.cal_week2 { }

이미지 보기

사용 예

.cal_week2
{
font:0.95em dotum;
color:#f30;
}

Move to top↑
달력의 주(Week) 단위를 표시하는 스타일 (tr 영역)

클래스 명

.cal_week { }

이미지 보기

사용 예

a.cal_week
{
background-color:#fff;
}

Move to top↑
달력의 현재 주(Current Week)를 표시하는 스타일 (tr 영역)

클래스 명

.cal_current_week { }

이미지 보기

사용 예

.cal_current_week
{
background-color:#eee;
}

Move to top↑
현재 달을 포함하는 전체 날짜(Day)의 스타일 전체 (td 영역)

클래스 명

.cal_day { }

이미지 보기

사용 예

.cal_day
{
font-size:0.85em;
color:#999;
text-align:center;
}

Move to top↑
현재 달을 포함하는 전체 날짜의 일요일 스타일 (td 영역)

클래스 명

.cal_day_sunday { }

이미지 보기

사용 예

.cal_day_sunday { }
{
color:#f30 !important;
}
.cal_day_sunday a{ }
{
color:#f30 !important;
}

Move to top↑
해당 달력에서 이전달 날짜를 표시하는 스타일(td 영역) - 현재 이전달 날짜가 출력되고 있지 않습니다

클래스 명

.cal_day1 { }

이미지 보기

사용 예

.cal_day1
{
color:#ccc;
}

Move to top↑
해당 달력에서 다음달 날짜를 표시하는 스타일(td 영역) - 현재 다음달 날짜가 출력되고 있지 않습니다

클래스 명

.cal_day2 { }

이미지 보기

사용 예

.cal_day2
{
color:#ccc;
}

Move to top↑
현재 달력의 이번달 날짜를 표시하는 스타일 (td 영역)

클래스 명

.cal_day3 { }

이미지 보기

사용 예

.cal_day3
{
color:#666;
}

Move to top↑
오늘 날짜를 표시하는 스타일 (td 영역)

클래스 명

.cal_day4 { }

이미지 보기

사용 예

.cal_day4
{
color:#000;
text-decoration:underline;
}

Move to top↑
글을 작성한 날의 링크 스타일

클래스 명

a.cal_click { }

이미지 보기

사용 예

a.cal_click:link { color:#333; font-weight:bold;}
a.cal_click:visited { color:#333; font-weight:bold;}
a.cal_click:hover { color:#f30; font-weight:bold;}

Move to top↑

코멘트, 방명록

일반 댓글 [##_rp_rep_class_##]

클래스 명

.rp_general {}

이미지 보기

사용 예

.rp_general
{

}

Move to top↑
관리자가 올린 댓글 [##_rp_rep_class_##]

클래스 명

.rp_admin {}

이미지 보기

사용 예

.rp_admin
{
background:url(images/iconAdmin.gif) no-repeat;
padding-left:20px;
}

Move to top↑
비밀 댓글 [##_rp_rep_class_##]

클래스 명

.rp_secret {}

이미지 보기

사용 예

.rp_secret
{
color:#f30;
font-weight:bold;
}

Move to top↑
비밀 댓글(로그인 하지 않았을 경우)

클래스 명

.hiddenComment { }

이미지 보기

사용 예

.hiddenComment
{
background:url(images/iconSecret.gif) no-repeat;
padding-left:20px;
font-weight:normal;
}

Move to top↑
일반 방명록 글 [##_guest_rep_class_##]

클래스 명

.guest_general {}

이미지 보기

사용 예

.guest_general
{

}

Move to top↑
관리자가 올린 댓글 [##_guest_rep_class_##]

클래스 명

.guest_admin {}

이미지 보기

사용 예

.guest_admin
{
background:url(images/iconAdmin.gif) no-repeat;
padding-left:20px;
}

Move to top↑

그림 표시

이미지 아래 캡션 스타일

클래스 명

.cap1

이미지 보기

사용 예

.cap1
{
color:#999;
text-align:center;
}

Move to top↑
이미지 블럭

클래스 명

.imageblock {}

이미지 보기

사용 예

.imageblock {}
{
border:1px solid #ddd;
padding:5px;
margin:5px 0;
}

Move to top↑
이미지 왼쪽 정렬

클래스 명

.left {}

사용 예

.left {}
{

}

Move to top↑
이미지 가운데 정렬

클래스 명

.center {}

사용 예

.center {}
{

}

Move to top↑
이미지 오른쪽 정렬

클래스 명

.right {}

사용 예

.right {}
{

}

Move to top↑
그림 2개 배치

클래스 명

.dual {}

이미지 보기

사용 예

.dual {}
{
background-color:#eee;
margin-bottom:5px;
}

Move to top↑
그림 3개 배치

클래스 명

.triple {}

이미지 보기

사용 예

.triple {}
{
background-color:#eee;
margin-bottom:5px;
}

Move to top↑

본문

더 보기 - more

클래스 명

.moreless_fold {}

이미지 보기

사용 예

.moreless_fold {}
{
background:url(images/iconMore.gif) top left no-repeat;
padding-left:20px;
color:#000;
}

Move to top↑
그만보기 - less

클래스 명

.moreless_top {}

이미지 보기

사용 예

.moreless_top {}
{
background:url(images/iconLess.gif) top left no-repeat;
padding-left:20px;
color:#000;
}

Move to top↑
more/less 본문 내용

클래스 명

.moreless_body {}

이미지 보기

사용 예

.moreless_Body {}
{

}

Move to top↑
그만보기 - less

클래스 명

.moreless_bottom {}

이미지 보기

사용 예

.moreless_bottom {}
{
background:url(images/iconLess.gif) top right no-repeat;
padding-right:20px;
color:#999;
text-align:right;
}

Move to top↑

0개의 걸린 글 과 0개의 댓글이 있습니다.

이 글의 댓글/트랙백 RSS : http://www.textcube.org/manual/rss/response/77

스킨 제작 매뉴얼 - 3. 치환자 (skin.html)

Step03 : 치환자 (skin.html)

sidebar

Header

footer

Appendix

팀블로그용 치환자: 검색 결과 리스트; 위치로그; 공지사항; 보호글; 글; 최근에 올라온 글

시작하기전에

브라우저에 블로그 타이틀과 현재 보고 있는 페이지 제목을 나타내 주려면 다음과 같은 코드를 <head></head> 태그 안에 넣어 주면 됩니다.
<title>[##_title_##] :: [##_page_title_##]</title>
브라우저에 RSS 버튼을 활성화시키기 위해서는 다음과 같은 코드를 <head></head> 태그 안에 넣어 주면 됩니다.
<link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="[##_rss_url_##]" />
자바스크립트를 지정해줄 영역을 선언하기 위해서 <body>안에 <s_t3></s_t3>를 넣어줘야 합니다

header 영역

해당영역: <div id="header"> ... </div>
이미지 보기

블로그 제목

사용 치환자
[##_blog_link_##] : 블로그 주소
[##_title_##] : '관리자 > 환경설정 > 기본설정'에서 입력된 블로그 제목

사용예
<h1><a href="[##_blog_link_##]">[##_title_##]</a></h1>
블로그 메뉴

사용 치환자
[##_localog_link_##] : 위치로그로 이동할 수 있는 주소
[##_taglog_link_##] : 태그로그로 이동할 수 있는 주소
[##_guestbook_link_##] : 방명록으로 이동할 수 있는 주소

사용예
<div class="blogMenu">
<ul>
<li class="tab_localog"><a href="[##_localog_link_##]">위치로그</a> </li>
<li class="tab_taglog" ><a href="[##_taglog_link_##]">태그</a></li>
<li class="tab_guestbook" ><a href="[##_guestbook_link_##]">방명록</a></li>
</ul>
</div>

Move to top↑

content 영역

해당영역: <div id="content"> ... </div>

검색 결과 리스트

이미지 보기

사용 치환자
<s_list>, </s_list> : 검색시 보여줄 글목록을 출력할 영역입니다
<s_list_rep>, </s_list_rep> : 글목록을 반복하여 출력하는 기능을 수행합니다
[##_list_conform_##] : 검색어
[##_list_count_##] : 검색된 글의 갯수
[##_list_rep_link_##] : 글의 고유 주소
[##_list_rep_regdate_##] : 글이 작성된 날짜
[##_list_rep_title_##] : 글의 제목
[##_list_rep_rp_cnt_##] : 댓글 수
[##_list_rep_author_##] : 작성장 이름 (*팀블로그용 치환자)

사용예
<s_list>
<div class="searchList">
<h3>'[##_list_conform_##]'에 해당되는 글 [##_list_count_##]건</h3>
<ol>
<s_list_rep>
<li>
<span class="date">[##_list_rep_regdate_##]</span>
<a href="[##_list_rep_link_##]">[##_list_rep_title_##]</a>
<span class="cnt">[##_list_rep_rp_cnt_##]</span>
</li>
</s_list_rep>
</ol>
</div>
</s_list>

Move to top↑
검색 결과 댓글 리스트

이미지 보기

사용 치환자
<s_rplist>, </s_rplist> : 검색시 보여줄 댓글목록을 출력할 영역입니다
<s_rplist_rep>, </s_rplist_rep> : 글목록을 반복하여 출력하는 기능을 수행합니다
[##_rplist_conform_##] : 검색어
[##_rplist_count_##] : 검색된 댓글의 갯수
[##_rplist_rep_link_##] : 댓글의 고유 주소
[##_rplist_rep_regdate_##] : 댓글이 달린 날짜
[##_rplist_rep_body_##] : 댓글 내용의 일부
[##_rplist_rep_name_##] : 댓글을 쓴 사람의 이름

사용예
<s_rplist>
<div class="searchRplist">
<h3>'[##_rplist_conform_##]'에 해당되는 댓글 [##_rplist_count_##]건</h3>
<ol>
<s_rplist_rep>
<li>
<span class="date">[##_rplist_rep_regdate_##]</span>
<a href="[##_rplist_rep_link_##]">[##_rplist_rep_body_##]</a>
<span class="cnt">[##_rplist_rep_rp_cnt_##]</span>
<span class="name">[##_rplist_rep_name_##]</span>
</li>
</s_rplist_rep>
</ol>
</div>
</s_rplist>

Move to top↑
위치 로그

이미지 보기

사용 치환자
<s_local>, </s_local> : '위치로그'메뉴를 클릭시 보여줄 위치로그를 출력할 영역입니다
<s_local_spot_rep>, </s_local_spot_rep> : '위치로그'의 위치 반복열입니다
[##_local_spot_depth_##] : 왼쪽부터의 깊이
[##_local_spot_##] : 장소 이름
<s_local_info_rep>, </s_local_info_rep> : '위치로그'의 글의 반복열입니다
[##_local_info_depth_##] : 왼쪽으로부터의 깊이
[##_local_info_link_##] : 글의 고유 주소
[##_local_info_title_##] : 글의 제목
[##_local_info_author_##] : 작성자 이름 (* 팀블로그용 치환자)

사용예
<s_local>
<div class="localog">
<h3>위치로그</h3>
<s_local_spot_rep>
<div class="spot" style="margin-left: [##_local_spot_depth_##]px">
[##_local_spot_##]
</div>
</s_local_spot_rep>
<s_local_info_rep>
<div class="info" style="margin-left: [##_local_info_depth_##]px">
<a href="[##_local_info_link_##]">[##_local_info_title_##]</a>
</div>
</s_local_info_rep>
</div>
</s_local>

Move to top↑
태그 클라우드

이미지 보기

사용 치환자
<s_tag>, </s_tag> : '태그'메뉴를 클릭시 보여줄 태그를 출력할 영역입니다
<s_tag_rep>, </s_tag_rep> : '태그'의 반복열입니다
[##_tag_link_##] : 개별 Tag 들에 관련된 글을 출력하기 위한 URL
[##_tag_class_##] : Tag Cloud 의 크기나 색깔을 설정할 수 있도록 해줍니다. 총 5단계의 레벨을 가지고 있으며, cloud1 ~ cloud5 까지 큰 것에서 작은 순서를 나타냅니다. 이 기능을 가지고 style 을 조정하시여 원하시는 스타일의 Tag Cloud 를 만드실 수 있습니다
[##_tag_name_##] : 태그의 이름

사용예
<s_tag>
<div class="taglog">
<h3>태그</h3>
<ul>
<s_tag_rep>
<li>
<a href="[##_tag_link_##]" class="[##_tag_class_##]">[##_tag_name_##]</a>
</li>
</s_tag_rep>
</ul>
</div>
</s_tag>

Move to top↑
방명록

해당영역
<div class="guestbook"></div>
이미지 보기

사용 치환자
<s_guest>, </s_guest> : '방명록'메뉴를 클릭시 보여줄 방명록을 출력할 영역입니다

사용예
<s_guest>
<div class="guestbook">
<h3>방명록</h3>
<div class="guestWrite">15-1 글쓰기</div>
<div class="guestList">15-2 리스트 </div>
</div>
</s_guest>

Move to top↑

15-1. 방명록 글쓰기

사용 치환자
<s_guest_input_form>, </s_guest_input_form> :
<s_guest_member>, </s_guest_member> :
<s_guest_form>, </s_guest_form> :
[##_guest_input_name_##] : 이름입력 박스 이름
[##_guest_name_##] : 이름
[##_guest_input_password_##] : 비밀번호 입력 박스 이름
[##_guest_password_##] : 비밀번호
[##_guest_input_homepage_##] : 홈페이지 입력 박스 이름
[##_guest_homepage_##] : 홈페이지
[##_guest_textarea_body_##] : 글 내용 입력박스 이름
[##_guest_onclick_submit_##] : 입력 완료 온클릭 이벤트

사용예
<s_guest_input_form>
<div class="guestWrite">
<s_guest_member>
<s_guest_form>
<p>
<input type="text" name="[##_guest_input_name_##]" value="[##_guest_name_##]" /> <label for="name"> : 이름 </label>
</p>
<p>
<input type="password" maxlength="8" name="[##_guest_input_password_##]" value="[##_guest_password_##]" /> <label for="password"> : 패스워드 </label>
</p>
<p>
<input type="text" name="[##_guest_input_homepage_##]" value="[##_guest_homepage_##]" /> <label for="homepage"> : 홈페이지 </label>
</p>
</s_guest_form>
</s_guest_member>
<p>
<textarea name="[##_guest_textarea_body_##]" cols="50" rows="6"></textarea>
</p>
<p>
<input type="submit" value="안부 남기기" onclick="[##_guest_onclick_submit_##]"/>
</p>
</div>
</s_guest_input_form>

Move to top↑

15-2. 방명록 리스트

사용 치환자
<s_guest_container>, </s_guest_container> : 등록된 '방명록' 리스트를 출력할 영역입니다
<s_guest_rep>, </s_guest_rep> : '방명록' 리스트의 반복열입니다
<s_guest_reply_container>, </s_guest_reply_container> : '방명록'의 댓글 리스트를 출력할 영역입니다.
<s_guest_reply_rep>, </s_guest_reply_rep> : '방명록' 댓글 리스트의 반복열입니다
[##_guest_rep_id_##] :
[##_guest_rep_class_##] :
[##_guest_rep_name_##] : 글쓴사람 이름
[##_guest_rep_date_##] : 글쓴 날짜
[##_guest_rep_desc_##] : 글 내용
[##_guest_rep_onclick_delete_##] : 답글 삭제 온클릭 이벤트
[##_guest_rep_onclick_reply_##] : 답글 수정 온클릭 이벤트

사용예
<s_guest_container>
<div class="guestList">
<ol>
<s_guest_rep>
<li id='[##_guest_rep_id_##]'>
<div class="[##_guest_rep_class_##]">
<span class="name">[##_guest_rep_name_##]</span>
<span class="date"> [##_guest_rep_date_##]</span>
<span class="control">
<a href="#" onclick="[##_guest_rep_onclick_delete_##]">MODIFY/DELETE</a>
<a href="#" onclick="[##_guest_rep_onclick_reply_##]">REPLY</a>
</span>
<p>[##_guest_rep_desc_##]</p>
</div>
<s_guest_reply_container>
<ul>
<s_guest_reply_rep>
<li id='[##_guest_rep_id_##]'>
<div class="[##_guest_rep_class_##]">
<span class="name">[##_guest_rep_name_##]</span>
<span class="date"> [##_guest_rep_date_##]</span>
<span class="control">
<a href="#" onclick="[##_guest_rep_onclick_delete_##]">
MODIFY/DELETE </a>
</span>
<p>[##_guest_rep_desc_##]</p>
</div>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ol>
</div>
</s_guest_container>

Move to top↑
공지사항 글

이미지 보기

사용 치환자
<s_notice_rep>, </s_notice_rep> : '공지사항'이 출력되는 영역입니다
[##_notice_rep_link_##] : '공지사항'에 등록된 글의 고유 주소
[##_notice_rep_title_##] : 글 제목
[##_notice_rep_date_##] : 글쓴 날짜
[##_notice_rep_desc_##] : 본문 내용
[##_notice_rep_author_##] : 작성자 이름 (*팀블로그용 치환자)

사용예
<s_notice_rep>
<div class="entryNotice">
<div class="titleWrap">
<h2><a href="[##_notice_rep_link_##]">[##_notice_rep_title_##]</a></h2>
<span class="date"> [##_notice_rep_date_##]</span>
</div>
<div class="article">
[##_notice_rep_desc_##]
</div>
</div>
</s_notice_rep>

Move to top↑
보호 글

이미지 보기

사용 치환자
<s_article_protected>, </s_article_protected> : '보호글'이 출력되는 영역입니다
[##_article_rep_link_##] : 보호글의 고유 주소
[##_article_rep_title_##] : 보호글의 제목
[##_article_rep_date_##] : 글쓴 날짜
[##_article_password_##] :
[##_article_dissolve_##] :
[##_article_rep_author_##] : 작성자 이름 (*팀블로그용 치환자)

사용예
<s_article_protected>
<div class="entryProtected">
<h2><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h2>
<span class="date">[##_article_rep_date_##]</span>
<p>보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.</p>
<p><label for="password">비밀번호 ::</label>
<input type="password" maxlength="16" id="password" name="[##_article_password_##]" value="" onkeydown="if (event.keyCode == 13)[##_article_dissolve_##]" />
<input type="button" class="submit" value="submit" onclick="[##_article_dissolve_##]" />
</p>
</div>
</s_article_protected>

Move to top↑
글

해당영역
<div class="entry"></div>
사용 치환자
<s_article_rep>, </s_article_rep> : 블로그 글이 출력되는 영역입니다

사용예
<s_article_rep>
<div class="entry"> 18. 글

<div class="titleWrap">18-1. 글 제목 | 카테고리 | 작성일 | 글 관리 </div>
<div class="article">18-2. 본문 </div>
<div class="tagTrail">18-3. 글 관련 태그 </div>
<div class="actionTrail">18-4. 트랙백 | 댓글 </div>
<div class="trackback">18-5. 트랙백 리스트 </div>
<div class="comment">18-6. 댓글

<div class="commentList">18-6-1. 댓글 리스트 </div>
<div class="commentWrite">18-6-2. 댓글 쓰기 </div>
</div>
</div>
</s_article_rep>

Move to top↑

18-1. 글 관련 정보 : 글제목, 카테고리, 날짜, 관리자

이미지 보기

사용 치환자
[##_article_rep_link_##] : 블로그 글의 고유 주소
[##_article_rep_title_##] : 블로그 제목
[##_article_rep_category_link_##] : 카테고리 링크
[##_article_rep_category_##] : 카테고리 명
[##_article_rep_date_##] : 글쓴 날짜
[##_article_rep_author_##] : 작성자 이름 (*팀블로그용 치환자)
<s_ad_div>, </s_ad_div> : 관리자 로그인시 글 관리 메뉴가 출력되는 영역입니다.
[##_s_ad_m_link_##] : 수정
[##_s_ad_m_onclick_##] : 수정 온클릭 이벤트
[##_s_ad_s1_label_##] : 글의 현재 상태
[##_s_ad_s2_onclick_##] : 상태 변경 온클릭 이벤트
[##_s_ad_s2_label_##] : 이후 상태
[##_s_ad_t_onclick_##] : 트랙백 온클릭 이벤트
[##_s_ad_d_onclick_##] : 삭제 온클릭 이벤트

사용예
<div class="titleWrap">
<h2><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h2>
<div class="category"><a href="[##_article_rep_category_link_##]">[##_article_rep_category_##]</a> </div>
<div class="date">[##_article_rep_date_##]</div>
<s_ad_div>
<div class="admin">
<a href="[##_s_ad_m_link_##]">수정</a> :
<a href="#" onclick="[##_s_ad_m_onclick_##]">수정(창으로)</a> |
([##_s_ad_s1_label_##])→<a href="#" onclick="[##_s_ad_s2_onclick_##]">[##_s_ad_s2_label_##]</a> |
<a href="#" onclick="[##_s_ad_t_onclick_##]">관련글(트랙백)</a> |
<a href="#" onclick="[##_s_ad_d_onclick_##]">삭제</a>
</div>
</s_ad_div>
</div>

Move to top↑

18-2. 블로그 글

이미지 보기

사용 치환자
[##_article_rep_desc_##] : 블로그 본문 내용

사용예
<div class="article">
[##_article_rep_desc_##]
</div>

Move to top↑

18-3. 글 관련 태그

이미지 보기

사용 치환자
<s_tag_label>, </s_tag_label> : 글과 관련된 태그가 출력되는 영역입니다.
[##_tag_label_rep_##] : 태그 반복 출력

사용예
<s_tag_label>
<div class="tagTrail">
<span class="tagText">TAG </span> [##_tag_label_rep_##]
</div>
</s_tag_label>

Move to top↑

18-4. 트랙백과 댓글 보이기/감추기

이미지 보기

사용 치환자
<s_tb_count>, </s_tb_count> : 트랙백의 갯수를 출력하는 영역
<s_rp_count>, </s_rp_count> : 댓글의 갯수를 출력하는 영역
[##_article_rep_tb_link_##] : 트랙백을 열고 닫는 온클릭 이벤트
[##_article_rep_tb_cnt_##] : 도착한 트랙백 수
[##_article_rep_rp_link_##] : 댓글을 열고 닫는 온클릭 이벤트
[##_article_rep_rp_cnt_##] : 답글 수

사용예
<div class="actionTrail">
<a href="#tb" onclick="[##_article_rep_tb_link_##]">
<s_tb_count>
트랙백 <span class="cnt">[##_article_rep_tb_cnt_##]</span>개
</s_tb_count>
</a>
,
<a href="#rp" onclick="[##_article_rep_rp_link_##]">
<s_rp_count>
댓글 <span class="cnt">[##_article_rep_rp_cnt_##]</span>개가 달렸습니다.
</s_rp_count>
</a>
</div>

Move to top↑

18-5. 트랙백

이미지 보기

사용 치환자
<s_tb>, </s_tb> : 받은 트랙백이 출력되는 영역입니다
[##_tb_address_##] : 이 글의 트랙백 주소
<s_tb_container>, </s_tb_container> :
<s_tb_rep>, </s_tb_rep> : 받은 트랙백을 반복 출력합니다
[##_tb_rep_id_##] :
[##_tb_rep_url_##] : 보낸 트랙백 글의 고유 주소
[##_tb_rep_title_##] : 트랙백 제목
[##_tb_rep_site_##] : 트랙백 보낸 블로그 주소
[##_tb_rep_date_##] : 트랙백 보낸 시간
[##_tb_rep_onclick_delete_##] : 트랙백 삭제 온클릭 이벤트
[##_tb_rep_desc_##] : 트랙백 본문의 일부

사용예
<s_tb>
<div class="trackback">
<h3>Trackback Address :: [##_tb_address_##]</h3>
<s_tb_container>
<ol>
<s_tb_rep>
<li id="[##_tb_rep_id_##]">
<h4>Subject: <a href="[##_tb_rep_url_##]" onclick="window.open(this.href); return false" rel="external nofollow">[##_tb_rep_title_##]</a></h4>
<span class="from">Tracked from <span class="name"> [##_tb_rep_site_##] </span> </span>
<span class="date">[##_tb_rep_date_##]</span>
<a href="#" onclick="[##_tb_rep_onclick_delete_##]; return false" class="delete"> <span>삭제</span></a>
<p>[##_tb_rep_desc_##]</p>
</li>
</s_tb_rep>
</ol>
</s_tb_container>
</div>
</s_tb>

Move to top↑

18-6. 댓글

이미지 보기

사용 치환자
<s_rp>, </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>

Move to top↑

18-6-1. 댓글 리스트

사용 치환자
<s_rp_container> , </s_rp_container> : 달린 댓글이 출력되는 영역입니다
<s_rp_rep>, </s_rp_rep> : 댓글이 반복 출력됩니다
<s_rp2_container>, </s_rp2_container> : 댓글에 댓글이 출력되는 영역
<s_rp2_rep>, </s_rp2_rep> : 댓글에 댓글이 반복 출력됩니다
[##_rp_rep_id_##] : 전체 코멘트영역을 가리키는 아이디 - (최신 댓글을 클릭했을때 이 위치로 이동)
[##_rp_rep_class_##] : 비밀글, 관리자, 일반글에 따른 스타일을 지정하기 위한 치환자
[##_rp_rep_name_##] : 댓글 단 사람 이름
[##_rp_rep_date_##] : 댓글이 달린 날짜
[##_rp_rep_desc_##] : 댓글 내용
[##_rp_rep_link_##] : 댓글 주소
[##_rp_rep_onclick_delete_##] : 댓글 수정/삭제 온클릭 이벤트
[##_rp_rep_onclick_reply_##] : 댓글에 댓글 달기 온클릭 이벤트

사용예
<div class="commentList">
<s_rp_container>
<ol>
<s_rp_rep>
<li id='[##_rp_rep_id_##]'>
<div class="[##_rp_rep_class_##]">
<span class="name">[##_rp_rep_name_##]</span>
<span class="date"> [##_rp_rep_date_##]</span>
<span class="control">
<a href="[##_rp_rep_link_##]" class="address"> <span>댓글주소</span></a>
<a href="#" onclick="[##_rp_rep_onclick_delete_##]" class="modify"> <span>수정/삭제</span></a>
<a href="#" onclick="[##_rp_rep_onclick_reply_##]" class="write"> <span>댓글쓰기</span></a>
</span>
<p>[##_rp_rep_desc_##]</p>
</div>
<s_rp2_container>
<ul>
<s_rp2_rep>
<li id='[##_rp_rep_id_##]'>
<div class="[##_rp_rep_class_##]">
<span class="name">[##_rp_rep_name_##]</span>
<span class="date"> [##_rp_rep_date_##]</span>
<span class="control">
<a href="[##_rp_rep_link_##]" class="address"> <span>댓글주소</span> </a>
<a href="#" onclick="[##_rp_rep_onclick_delete_##]" class="modify"> <span>수정/삭제</span></a>
</span>
<p>[##_rp_rep_desc_##]</p>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ol>
</s_rp_container>
</div>

Move to top↑

18-6-2. 댓글 쓰기

사용 치환자
<s_rp_input_form>, </s_rp_input_form> : 댓글을 달기 위한 입력폼을 출력합니다
<s_rp_member>, </s_rp_member> : 로그인을 하지 않았거나 블로그 소유자가 아닌경우 보여지는 영역
<s_rp_guest>, </s_rp_guest> : 로그인을 하지 않았을경우 보여지는 영역
[##_article_rep_id_##] :
[##_rp_input_name_##] : 이름 입력 박스 이름
[##_guest_name_##] : 이름 입력
[##_rp_input_password_##] : 비밀번호 입력 박스 이름
[##_rp_admin_check_##] :
[##_rp_input_homepage_##] : 홈페이지 입력 박스 이름
[##_guest_homepage_##] : 홈페이지 입력
[##_rp_input_is_secret_##] : 비밀글 체크박스 이름
[##_rp_input_comment_##] : 댓글 입력 박스 이름
[##_rp_onclick_submit_##] : 댓글 입력 온클릭 이벤트

사용예
<s_rp_input_form>
<div class="commentWrite">
<s_rp_member>
<s_rp_guest>
<p>
<input type="text" name="[##_rp_input_name_##]" value="[##_guest_name_##]" />
<label for="name"> : 이름 </label>
</p>
<p>
<input type="password" maxlength="8" name="[##_rp_input_password_##]" value="[##_rp_admin_check_##]" />
<label for="password"> : 패스워드 </label>
</p>
<p>
<input type="text" class="homepage" name="[##_rp_input_homepage_##]" value="[##_guest_homepage_##]"/>
<label for="homepage"> : 홈페이지 </label>
</p>
</s_rp_guest>
<p class="secretWrap">
<input type="checkbox" name="[##_rp_input_is_secret_##]" class="checkbox" />
<label for="secret"> 비밀글 </label>
</p>
</s_rp_member>
<p>
<textarea name="[##_rp_input_comment_##]" rows="10" cols="50"></textarea>
</p>
<p>
<input type="submit" value="댓글 달기" onclick="[##_rp_onclick_submit_##]" />
</p>
</div>
</s_rp_input_form>

Move to top↑
페이지

이미지 보기

사용 치환자
<s_paging>, </s_paging> : 페이지가 출력되는 영역입니다
<s_paging_rep>, </s_paging_rep> : 페이지가 반복 출력됩니다
[##_prev_page_##] : 이전 페이지 링크
[##_paging_rep_link_##] : 페이지 링크
[##_paging_rep_link_num_##] : 페이지 번호
[##_next_page_##] : 다음 페이지 링크

사용예
<s_paging>
<div class="paging">
<a [##_prev_page_##] class="[##_no_more_prev_##]">◀ PREV </a>
<span class="numbox">
<s_paging_rep>
<a [##_paging_rep_link_##] class="num">[[##_paging_rep_link_num_##]]</a>
</s_paging_rep>
</span>
<a [##_next_page_##] class="[##_no_more_next_##]">NEXT ▶</a>
</div>
</s_paging>

Move to top↑

sidebar 영역

해당영역: <div id="sidebar"> </div>
사용 치환자: <s_sidebar>, </s_sidebar> : 사이드바 영역을 나타냅니다
<s_sidebar_element>, </s_sidebar_element> : 관리자 페이지에서 블로그의 사이드바을 드래그앤 드랍으로 구성할수 있도록 각 엘리먼트를 인식시켜주는 역할을 합니다.
 : 해당 사이드바나 사이드바 앨리먼트의 제목을 지정합니다. 이 주석은 관리자 페이지에서 각 사이드바나 사이드바 앨리먼트의 타이틀로 표현됩니다.

사용예: <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>... <s_sidebar_element>
</s_sidebar>
</div>

Move to top↑

블로그 이미지 와 블로그 설명

이미지 보기

사용 치환자
[##_image_##] : "관리자 > 환경설정 > 기본설정"의 프로필 이미지를 출력
[##_desc_##] : "관리자 > 환경설정 > 기본설정"의 블로그 설명을 출력
[##_blogger_##] : "관리자 > 환경설정 > 계정정보"의 필명을 출력

사용예
<s_sidebar_element>

<div class="blogImage">
<div class="blogImage"><img src="[##_image_##]" alt="" /></div>
<div class="blogDesc">[##_desc_##] <span class="userID">[##_blogger_##]</span></div>
</div>
</s_sidebar_element>

Move to top↑
공지사항 리스트

이미지 보기

사용 치환자
<s_rct_notice>, </s_rct_notice> : 공지사항 리스트를 출력할 영역입니다
<s_rct_notice_rep>, </s_rct_notice_rep> : 공지사항 리스트를 반복 출력합니다
[##_notice_rep_link_##] : 공지사항의 고유 주소
[##_notice_rep_title_##] : 공지사항의 글 제목

사용예
<s_sidebar_element>

<s_rct_notice>
<div class="notice">
<ul>
<s_rct_notice_rep>
<li><a href="[##_notice_rep_link_##]">[##_notice_rep_title_##]</a> </li>
</s_rct_notice_rep>
</ul>
</div>
</s_rct_notice>
</s_sidebar_element>

Move to top↑
관리자 메뉴

이미지 보기

사용 치환자
[##_owner_url_##] : 관리자 페이지 주소

사용예
<s_sidebar_element>

<div class="adminMenu">
<ul>
<li class="tab_admin"><a href="[##_owner_url_##]">관리자</a></li>
<li class="tab_write"><a href="[##_owner_url_##]/entry/post">글쓰기</a></li>
</ul>
</div>
</s_sidebar_element>

Move to top↑
검색

이미지 보기

사용 치환자
<s_search>, </s_search> : 검색 입력폼을 출력할 영역입니다
[##_search_name_##] : 검색어 입력 박스 이름
[##_search_text_##] : 검색어
[##_search_onclick_submit_##] : 검색 온클릭 이벤트

사용예
<s_sidebar_element>


<div class="search">
<s_search>
<input type="text" name="[##_search_name_##]" value="[##_search_text_##]" onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }"/>
<input value="검색" type="button" onclick="[##_search_onclick_submit_##]" class="submit"/>
</s_search>
</div>
</s_sidebar_element>

Move to top↑
카테고리

이미지 보기

사용 치환자
[##_category_##] : 폴더 형식의 카테고리
[##_category_list_##] : 리스트 형식의 카테고리

사용예
<s_sidebar_element>

<div class="category">
<h3>카테고리</h3>
[##_category_##]
</div>
or.............................
<div class="category">
<h3>카테고리</h3>
[##_category_list_##]
</div>
</s_sidebar_element>

Move to top↑
태그박스

이미지 보기

사용 치환자
<s_random_tags>, </s_random_tags> : 태그를 반복 출력합니다
[##_tag_link_##] : 태그에 해당되는 주소
[##_tag_class_##] : Tag Cloud 의 크기나 색깔을 설정 (총 5단계의 레벨을 가지고 있으며, cloud1 ~ cloud5 까지 큰 것에서 작은 순서를 나타냅니다. 이 기능을 가지고 style 을 조정하시여 원하시는 스타일의 Tag Cloud 를 만드실 수 있습니다)
[##_tag_name_##] : 태그의 이름

사용예
<s_sidebar_element>

<div class="tagbox">
<h3>태그목록</h3>
<ul>
<s_random_tags>
<li> <a href="[##_tag_link_##]" class="[##_tag_class_##]"> [##_tag_name_##]</a></li>
</s_random_tags>
</ul>
</div>
</s_sidebar_element>

Move to top↑
최근에 올라온 글

이미지 보기

사용 치환자
<s_rctps_rep>, </s_rctps_rep> : 최근에 올라온 글을 반복 출력합니다
[##_rctps_rep_link_##] : 최근글로 이동할 주소
[##_rctps_rep_title_##] : 최근글의 제목
[##_rctps_rep_rp_cnt_##] : 최근글에 달린 댓글 갯수
[##_rctps_rep_author_##] : 작성자 이름 (*팀블로그용 치환자)

사용예
<s_sidebar_element>

<div class="recentPost">
<h3>최근에 올라온 글 </h3>
<ul>
<s_rctps_rep>
<li>
<a href="[##_rctps_rep_link_##]"> [##_rctps_rep_title_##].</a>
<span class="cnt">[##_rctps_rep_rp_cnt_##]</span>
</li>
</s_rctps_rep>
</ul>
</div>
</s_sidebar_element>

Move to top↑
최근에 달린 댓글

이미지 보기

사용 치환자
<s_rctrp_rep>, </s_rctrp_rep> : 댓글을 반복 출력합니다
[##_rctrp_rep_link_##] : 댓글로 이동할 주소
[##_rctrp_rep_desc_##] : 댓글의 본문 일부
[##_rctrp_rep_name_##] : 댓글을 쓴 사람 이름
[##_rctrp_rep_time_##] : 댓글을 쓴 시간

사용예
<s_sidebar_element>

<div class="recentComment">
<h3>최근에 달린 댓글</h3>
<ul id="recentComments">
<s_rctrp_rep>
<li>
<a href="[##_rctrp_rep_link_##]">[##_rctrp_rep_desc_##].</a>
<span class="info_wrap">
<span class="name">[##_rctrp_rep_name_##]</span>
<span class="date">[##_rctrp_rep_time_##]</span>
</span>
</li>
</s_rctrp_rep>
</ul>
</div>
</s_sidebar_element>

Move to top↑
최근에 받은 트랙백

이미지 보기

사용 치환자
<s_rcttb_rep>, </s_rcttb_rep> : 최근에 받는 트랙백을 반복 출력합니다
[##_rcttb_rep_link_##] : 트랙백 주소
[##_rcttb_rep_desc_##] : 보내온 트랙백의 본문 일부
[##_rcttb_rep_name_##] : 트랙백을 보내온 사이트 이름
[##_rcttb_rep_time_##] : 트랙백 보낸 시간

사용예
<s_sidebar_element>

<div class="recentTrackback">
<h3>최근에 받은 트랙백</h3>
<ul>
<s_rcttb_rep>
<li>
<a href="[##_rcttb_rep_link_##]">[##_rcttb_rep_desc_##].</a>
<span class="info_wrap">
<span class="name">[##_rcttb_rep_name_##]</span>
<span class="date">[##_rcttb_rep_time_##]</span>
</span>
</li>
</s_rcttb_rep>
</ul>
</div>
</s_sidebar_element>

Move to top↑
글 보관함

이미지 보기

사용 치환자
<s_archive_rep>, </s_archive_rep> : 월별 글 보관함을 출력합니다
[##_archive_rep_link_##] : 각 월별 보관함으로 이동할 주소
[##_archive_rep_date_##] : 년과 월을출력
[##_archive_rep_count_##] : 각 월별에 속한 글의 갯수

사용예
<s_sidebar_element>

<div class="archive">
<h3>글 보관함</h3>
<ul>
<s_archive_rep>
<li>
<a href="[##_archive_rep_link_##]">[##_archive_rep_date_##] </a>
<span class="cnt">([##_archive_rep_count_##])</span>
</li>
</s_archive_rep>
</ul>
</div>
</s_sidebar_element>

Move to top↑
달력

이미지 보기

사용 치환자
[##_calendar_##] : 달력 출력

사용예
<s_sidebar_element>

<div class="calender">
<h3>달력</h3>
[##_calendar_##]
</div>
</s_sidebar_element>

Move to top↑
링크

이미지 보기

사용 치환자
<s_link_rep>, </s_link_rep> : 링크가 반복 출력됩니다
[##_link_url_##] : 사이트로 이동할 주소
[##_link_site_##] : 사이트 이름

사용예
<s_sidebar_element>

<div class="link">
<h3>링크</h3>
<ul>
<s_link_rep>
<li>
<a href="[##_link_url_##]" onclick="window.open(this.href); return false"> [##_link_site_##].</a>
</li>
</s_link_rep>
</ul>
</div>
</s_sidebar_element>

Move to top↑
방문자 수

이미지 보기

사용 치환자
[##_count_total_##] : 총 방문자수
[##_count_today_##] : 오늘 방문자수
[##_count_yesterday_##] : 어제 방문자수

사용예
<s_sidebar_element>

<div class="counter">
<span class="total">Total : [##_count_total_##] </span>
<span class="today">Today : [##_count_today_##]</span>
<span class="yesterday">Yesterday : [##_count_yesterday_##]</span>
</div>
</s_sidebar_element>

Move to top↑
기타 배너들

이미지 보기

사용 치환자
[##_rss_url_##] : rss feed 주소

사용예
<s_sidebar_element>

<div class="botton">
<a href="http://www.tattertools.com" onclick="window.open(this.href); return false">
<img src="./images/tattertools.gif" alt="Tattertools" /> </a>
</div>
</s_sidebar_element>
<s_sidebar_element>

<div class="botton">
<a href="http://www.eolin.com" onclick="window.open(this.href); return false">
<img src="http://tattertools.com/images/logo_eolin.gif" alt="Eolin" /> </a>
</div>
</s_sidebar_element>
<s_sidebar_element>

<div class="botton">
<a href="[##_rss_url_##]" onclick="window.open(this.href); return false">
<img src="./images/rss.gif" alt="rss"/> </a>
</div>
</s_sidebar_element>

Move to top↑

footer 영역

해당영역: <div id="footer"></div>

메뉴

이미지 보기

사용 치환자
[##_localog_link_##] : 지역로그 주소
[##_taglog_link_##] : 태그로그 주소
[##_guestbook_link_##] : 방명록 주소
[##_owner_url_##] : 관리자 주소

사용예
<div class="menu">
<a href="[##_localog_link_##]">위치로그</a>
<a href="[##_taglog_link_##]">태그</a>
<a href="[##_guestbook_link_##]">방명록</a>
<a href="[##_owner_url_##]">관리자</a>
</div>
저작권

사용 치환자
[##_tattertools_name_##] : 태터툴즈 명
[##_tattertools_version_##] : 태터툴즈의 버전
[##_blog_link_##] : 블로그 주소
[##_blogger_##] : "관리자 > 환경설정 > 계정 정보"의 필명을 출력
사용예

<div class="copyright">
<a href="[##_blog_link_##]"> [##_blogger_##]</a>’s Blog is powered by <a href="http://tattertools.com" onclick="window.open(this.href); return false">[##_tattertools_name_##] [##_tattertools_version_##]</a> /
Designed by <a href="http://plyfly.net" onclick="window.open(this.href); return false">plyfly.net</a>
</div>

Move to top↑

0개의 걸린 글 과 1개의 댓글이 있습니다.

이 글의 댓글/트랙백 RSS : http://www.textcube.org/manual/rss/response/76

스킨 제작 매뉴얼 - 2. 스킨의 구조

Step02 : 스킨의 구조

블로그의 구조 이제 어떤식으로 스킨을 만들것인지 결정 되었습니다.
header 영역의 배경을 보라색으로 포인트를 준 심플한 2단 스킨! 배경이미지도 기분에 따라 쉽게 변경이 가능!

먼저 디자인한 스킨이 어떠한 구조로 이루어 졌는지에 대해 알아 보겠습니다. 앞서 결정된 디자인을 잘 뜯어 보면, 크게 header, content, sideinfo, footer영역으로 이루어져 있습니다.

header에는 블로그 제목, 블로그 메뉴 또는 블로그 설명, 구독하기 버튼등이 들어갈 수 있겠죠. content에는 검색 리스트, 검색 댓글 리스트, 위치로그, 태그, 방명록, 공지사항, 보호글, 글, 페이징 하는 부분이 들어가게 됩니다. sideinfo에는 블로그 컨텐츠 관련된 여러 정보들을 포함하고 있습니다. 카테고리나, 최근글 리스트, 최근 댓글, 최근 트랙백, 공지사항, 링크, 블로그 이미지카운터 등등이 이에 해당됩니다. footer는 기타 전체 블로그 메뉴와 카피라잇 부분이 들어 갈수 있겠죠.

그럼 미리 디자인 해 놓은 내용을 바탕으로 대략의 구조화에 들어가 보겠습니다.

skin.html step 1 structured

</div>

Tip : 코드가 길어지면 헛갈릴수 있으므로 닫는 </div>태그에 주석을 달아 놓습니다.

위의 대략적인 구조화를 좀더 detail 하게 작성해 보겠습니다.

skin.html step 2 structured

<div id="header">

</div> 
<div id="content">

<div class="searchList">11. 검색 결과 리스트 </div>
<div class="searchRplist">12. 검색 결과 댓글 리스트 </div>
<div class="localog">13. 위치 로그 </div>
<div class="taglog">14. 태그 클라우드 </div>
<div class="guestbook"> 15. 방명록

</div>
<div class="entryNotice">16. 공지사항 글 </div>
<div class="entryProtected">17. 보호 글 </div>
<div class="entry"> 18. 글

<div class="titleWrap">18-1. 글 제목 | 카테고리 | 작성일 | 글 관리 </div>
<div class="article">18-2. 글</div>
<div class="tagTrail">18-3. 글 관련 태그 </div>
<div class="actionTrail">18-4. 트랙백 | 댓글 </div>
<div class="trackback">18-5. 트랙백 </div>
<div class="comment">18-6. 댓글

</div>

</div> 
<div class="paging">19. 페이지</div>

</div>
<div id="sidebar">

</div>
<div id="footer">

<div class="menu">91. 홈 | 위치로그 | 태그 | 방명록 | 관리자 | 글쓰기 </div>
<div class="copyright">92. copyright</div>

</div>

</div>

꼭 그렇게 해야 하나요? header 영역에 블로그이미지를 넣고 싶어요~: 어떤 영역에 어떤 내용을 넣을것인가는 스킨을 제작하는 분들의 몫입니다. header 영역에 블로그 이미지를 넣을수도 있고, sideinfo영역에 단순히 카테고리와 최근글 리스트와 달력만 보이게 할 수도 있고, 검색을 header 영역에 넣을 수도 있습니다. 얼마든지 자유롭게 디자인 할 수 있습니다.
container는 왜 넣었나요? 필요없는 레이어 아닌가요?: container 는 블로그의 레이아웃 디자인을 위한 레이어라고 할 수 있습니다. content 영역을 스프링이 달린 노트형식으로 만들고 싶다고 한다면 <div class="contentWrap"> 이런식으로 레이어를 추가해 두고 배경이미지를 스타일로 지정할 수 있습니다. 이런식으로 디자인을 고려한 레이어를 추가해 두는것도 좋은 방법입니다.
header는 꼭 header라고 써야 하나요? heaven이라고 쓰고 싶어요: 클래스명을 지을때 상당히 많은 고민을 하게 됩니다. sideinfo 라고 할지 sidebar라고 할지... guest라고 할지 guestbook 라고 할지... 작명을 할때는 직관적이고 명확한 의미의 이름이 좋습니다. guest보다는 조금 길지만 guestbook라는 이름이 더 좋습니다. 그리고 두개의 단어를 사용하게 될경우 단어의 경계를 위해 두번째단어 앞자리를 대문자로 작성합니다. 예를 들어 최근 댓글 같은 경우는 recentComment 라고 씁니다. 이런식의 rule은 스킨 제작자 자신이 정하면 됩니다. recent_comment 라고 써도 누가 뭐랄사람 없습니다. ^^;;; rule을 한번 정해 두면 나중에 수정작업할때 헛갈릴일은 없을것입니다.

작명의 rule에 어떤 강제사항이 있는것은 아니지만 다른 사람이 봤을때 직관적으로 알아볼수 있는 이름이라면 주석조차도 필요치 않을수 있습니다. 그리고 본인이 작성한 코드를 한두달 시간이 흐른 후에 보더라도 특별한 어려움없이 수정할 수 있을것입니다. 그만큼 작명은 중요하다고 할수 있죠

스킨 이야기! 여기까지 스킨의 대략적인 구조를 만들어 보았습니다. 이제 각각의 레이어에 해당 치환자를 넣어 보도록 하겠습니다.

0개의 걸린 글 과 0개의 댓글이 있습니다.

이 글의 댓글/트랙백 RSS : http://www.textcube.org/manual/rss/response/75

스킨 제작 매뉴얼 - 1. 디자인 구상

Step01 : 스킨의 디자인 구상하기

큰 이미지 보기

지금보고 있는 티스토리 기본스킨의 디자인을 비슷하게 따라 해보려고 합니다. 티스토리 기본스킨은 전형적인 2단 스킨이며, 상단의 header영역에만 컬러를 가미하였고, 이미지가 최대한 자제된 평범한 스킨입니다. 이처럼 텍스트가 많거나 정보를 제공하는 블로그일수록 차분하고 정리된 느낌을 주는것이 가독성을 높여주며 목적을 가지고 방문한 방문자에게 편안한 상태에서 정보를 습득할수 있게 해 줄것입니다. 개인의 개성이 돋보이는 스킨을 만들고자 한다면 이에 구애 받지 않고, 스킨을 만드시면 됩니다.

용도에 따라 블로그 스킨을 디자인하는 Knowhow

블로그 스킨을 여러번 만들다 보면 용도에 따라 어떤식으로 블로그를 만들어야 하는지에 대해 Knowhow가 쌓이게 됩니다. 살짝 공개 하자면 ...

사진이나 카툰등 작품 전시의 의미가 강한 블로그: 작품에 집중할 수 있게 주변 요소들을 작품과 되도록이면 먼곳에 위치하는것이 좋겠죠. 이를테면 1단형 스킨이 좋은 예가 될 수 있습니다. 사이드영역의 내용들을 모두 하단으로 이동시키고, 상단에는 블로그 제목과 검색, 메뉴등 최소한의 편의를 위한 요소를 배치시킵니다. 그리고 컨텐츠 영역은 사진이나 이미지에만 집중할 수 있도록 깔끔하게 처리를 해 줍니다.
커뮤니케이션이 자주 일어나는 블로그의 경우: 이러한 블로그는 최근댓글과 최근트랙백등 사이드영역의 아이템들이 모두 중요한 요소일 수 있습니다. 중요한 모든 요소들을 최대한 화면 상단에 위치시켜 블로그의 변화를 한눈에 알아보고, 왕성한 커뮤니케이션이 일어나고 있다는 것을 보여주기 위해서 3단형 스킨을 채택하는게 좋은 방법일 수 있을것입니다!
일기장이나 메모의 용도로 사용되는 블로그: 적은 내용의 글을 쓰더라도 꽉차 보이는 미니다이어리 형식의 스킨을 사용하게 되면 사진 한장과 "ㅋㅋㅋ"의 내용만 올라가더라도 휑하니 비어보이는 불상사는 없겠죠? 컨텐츠 영역의 레이어에 스크롤바를 생기게 하여 간단하게 미니홈피를 만들어 볼 수도 있습니다.

스킨 이야기! 사실 이러한 형식이 뭐 그리 중요하겠습니까. 자신의 블로그를 얼마나 개성있게 꾸며서 알차게 사용하느냐 하는건 어디까지나 블로그 운영자의 몫이겠죠.

0개의 걸린 글 과 0개의 댓글이 있습니다.

이 글의 댓글/트랙백 RSS : http://www.textcube.org/manual/rss/response/74

스킨 제작 매뉴얼 - 첫페이지

지금까지 수많은 태터툴즈 스킨이 제작 되어왔습니다. 앞으로도 태터툴즈를 접하지 못했던 분들이 태터툴즈를 접하게 되면서 스킨을 만들어보고자 하는 바람이 많이 생길것입니다. 그래서 앞으로 더 많은 분들이 스킨만드는데 불편함을 조금이나마 덜어주고자 문서를 작성했으며, 이 메뉴얼은 스킨을 제작하는데 도움을 줄 뿐이지 정답은 아닙니다. 태터툴즈 블로그 스킨은 치환자의 규칙만 잘 지켜주면 여러분의 창의적인 생각을 여러분이 정한 규칙을 가지고 마음껏 표현할 수 있습니다.
(* 태터툴즈 스킨을 만들기 위해서는 약간의 html작성 지식이 필요합니다.)

태터툴즈 스킨 만드는 법

만들고자 하는 스킨의 디자인 구상
블로그를 어떤 용도로 사용할 것인지 먼저 생각하고 적당한 모양을 종이에 그려봅니다. 포토샵 작업이 가능하다면 포토샵으로 한번 그려보는것도 좋은 방법입니다.
구상한 스킨을 구조화
구상한 디자인을 적용하기 위해 구조화하여 skin.html 작성합니다.
해당영역에 원하는 치환자 붙여넣기
태터툴즈 스킨 치환자는 디자이너가 프로그램의 지식없이 스킨을 만들기 쉽게 해주는 역할을 합니다. 디자이너는 단지 치환자의 규칙만 잘 따라주면 큰 어려움없이 자신이 원하는 디자인으로 블로그를 만들 수 있습니다.
style.css를 이용해서 디자인 적용하기
구상한 디자인대로 디자인을 적용하는 단계입니다. 한번 작성된 html을 수정하지 않고, style.css 파일의 수정만으로도 디자인이 가능합니다.
- 문서 전체 공통 스타일 (body, input, a, ul, ol, li 등)
- 전체 레이아웃 디자인
- 해당영역 공통 스타일 디자인
- 디테일 디자인

스킨 이야기! 태터툴즈 스킨을 취미로 만드는 분이 많이 계십니다. 물론 xhtml이 아닌 기존에 테이블 태그를 이용하여 스킨을 만든다고 하더라도 문제 될것은 없습니다. 다만 흔히들 이야기하는 웹 접근성을 높이고, 확장성을 생각한다면 xhtml이 적당할것입니다. 무엇보다 CSS Zen Garden 을 보고 탄성을 지렀던 xhtml을 공부하는 디자이너분들에게는 좋은 학습도구가 될 수 있을 것입니다.

변경이력

2007.02.01 : 시작하기 전에 섹션 추가→, 미디어로그 추가→
2006.12.14 : 팀블로그용 치환자 업데이트("팀블로그용 치환자"로 검색)→
2006.11.15 : paging부분 스타일 치환자 수정(no-more-prev, no-more-next) →
2006.10.31 : 사이드바의 타이틀 표현 업데이트→
2006.10.24 : 디자이너용 스킨 제작 체크리스트 view>>
2006.10.21 : 태터툴즈 1.1 업데이트에 따른 코드 수정및 디자인 변경
2006.09.21 : 스킨 공모전용 매뉴얼 제작

0개의 걸린 글 과 2개의 댓글이 있습니다.

이 글의 댓글/트랙백 RSS : http://www.textcube.org/manual/rss/response/73

스킨 태그 정리

Links

Textcube 1.6 기준 치환자

~~이미 삭제~~

추가 예정

~~삭제 예정~~

추가 확정

~~삭제 확정~~

global_static_replacer
- [##_title_##] : 블로그제목
- [##_rss_url_##] : RSS 주소
- [##_response_rss_url_##] : 전체 댓글+트랙백 RSS 주소 (1.6에서 추가됨)
- [##_comment_rss_url_##] : 전체 댓글+트랙백 RSS 주소 (자동 삽입: 1.6에서 추가됨)
- [##_trackback_rss_url_##] : 전체 댓글+트랙백 RSS 주소 (자동 삽입: 1.6에서 추가됨)
- [##_meta_http_equiv_keywords_##] : 블로그 태그 목록. (1.6에서 추가됨)
  - <meta http-equiv="Keywords" content="##_meta_http_equiv_keywords_##" /> 와 같은 형태로 메타태그로 head에 사용 가능.
- [##_owner_url_##] : 관리자 주소
- [##_blog_link_##] : Blog 주소
- [##_localog_link_##] : 위치로그 주소
- [##_taglog_link_##] : Tag 로그 주소
- [##_keylog_link_##] : 키로그 페이지 주소
- [##_guestbook_link_##] : 방명록 주소
- [##_image_##] : 블로그 이미지
- [##_desc_##] : 블로그 설명
- [##_blogger_##] : 블로거
- [##_tattertools_name_##] : Tattertools 레거시 루틴
- [##_tattertools_version_##] : 1.1 레거시 루틴
- [##_textcube_name_##] : Textcube
- [##_textcube_version_##] : 1.5
global_static_replacer_block
- [##_calendar_##] : 달력 : 변환참조
- [##_category_##] : 카테고리 Table style : 변환참조
- [##_category_list_##] : 카테고리 xhtml style : 변환참조
global_dynamic_replacer
- [##_page_title_##] : 페이지 제목 (레거시 루틴 (Tattertools 1.0))
  - [##_title_##] 및 <s_page_title>을 참고.
- [##_count_total_##] : 전체 방문자
- [##_count_today_##] : 오늘 방문자
- [##_count_yesterday_##] : 어제 방문자
내부 사용 치환자(사용해서는 안됨)
- [##_SKIN_html_start_##] : 스킨 html이 시작되는 부분에 자동 삽입되는 치환자.
- [##_SKIN_html_end_##] : 스킨 html이 끝나는 부분에 자동 삽입되는 치환자.
- [##_SKIN_head_start_##] : 스킨 head 영역이 시작되는 부분에 자동 삽입되는 치환자.
- [##_SKIN_head_end_##] : 스킨 head 영역이 끝나는 부분에 자동 삽입되는 치환자.
- [##_SKIN_body_start_##] : 스킨 body 영역이 시작되는 부분에 자동 삽입되는 치환자.
- [##_SKIN_body_end_##] : 스킨 body 영역이 끝나는 부분에 자동 삽입되는 치환자.

Part
- <s_t3> : 블로그 작동에 필요한 스크립트 삽입 영역 지정.
  - </s_t3> 와 함께 header영역의 스크립트, footer 영역의 스크립트를 삽입함.

title_Part
- <s_page_title> : 페이지 제목 영역
  - [##_page_post_title_##] : 현재 페이지에 따른 부가 제목 영역 (글 제목, 검색 결과 등)
cover_Part
- <s_cover> : 표지 영역
  - <s_cover_rep> : 표지 플러그인 출력의 반복 영역
    - [##_cover_content_##] : 표지 플러그인 출력 부분
~~metapage_Part~~ (1.5.1 에서 삭제되었음)
- ~~<s_meta> : 메타페이지 영역~~
  - ~~<s_metapage> : 메타페이지 플러그인 및 구성요소 출력 반복 영역~~
Search_Part -> Entry Part 가질 수 있음
- <s_list> : 검색결과
  - [##_list_conform_##] : 검색 조건
  - [##_list_count_##] : 검색 카운트
  - <s_list_rep> : 검색결과 항목
    - [##_list_rep_link_##] : 검색 결과 항목 주소
    - [##_list_rep_regdate_##] : 검색 결과 항목 등록일
    - [##_list_rep_title_##] : 검색 결과 항목 제목
    - [##_list_rep_rp_cnt_##] : 검색 결과 항목 코멘트수
    - [##_list_rep_author_##] : 작성자 이름(Tistory S1에서 추가)
- <s_rplist> : 댓글 검색 결과 -> 검색시 가질 수 있음
  - [##_rplist_conform_##] : 댓글 검색 조건
  - [##_rplist_count_##] : 댓글 검색 카운트
  - <s_rplist_rep> : 댓글 검색 결과 항목
    - [##_rplist_rep_link_##] : 댓글 검색 결과 항목 주소
    - [##_rplist_rep_regdate_##] : 댓글 검색 결과 항목 등록일
    - [##_rplist_rep_body_##] : 댓글 검색 결과 항목 내용
    - [##_rplist_rep_name_##] : 댓글 검색 결과 항목 작성자
- <s_tblist> : 트랙백 검색 결과 -> 검색시 가질 수 있음 (From Textcube 1.5)
  - [##_tblist_conform_##] : 트랙백 검색 조건
  - [##_tblist_count_##] : 트랙백 검색 카운트
  - <s_tblist_rep> : 트랙백 검색 결과 항목
    - [##_tblist_rep_link_##] : 트랙백 검색 결과 항목 주소
    - [##_tblist_rep_subject_##] : 트랙백 제목
    - [##_tblist_rep_regdate_##] : 트랙백 검색 결과 항목 등록일
    - [##_tblist_rep_body_##] : 트랙백 검색 결과 항목 내용
Tag_Part
- <s_tag> : 태그 클라우드
  - <s_tag_rep> : 태그 항목
    - [##_tag_link_##] : 태그 링크 주소
    - [##_tag_class_##] : 사용도에 따른 중요도
    - [##_tag_name_##] : 태그 이름
Location_Part
- <s_local> : 위치로그
  - <s_local_spot_rep> : 위치로그 항목
    - [##_local_spot_depth_##] : 위치로그 단계
    - [##_local_spot_##] : 위치
- <s_local_info_rep> : 위치로그 항목에 따른 글, local_spot_rep에 삽입됨
  - [##_local_info_depth_##] : 항목의 단계
  - [##_local_info_link_##] : 항목 링크
  - [##_local_info_title_##] : 항목 제목
  - [##_local_info_author_##] : 항목 작성자 이름(Tistory S1에서 추가)
Keyword_page_Part : 키로그 페이지. 등록된 키로그를 모두 보여줍니다.
- (해당 페이지는 키로그를 다루는 플러그인이 있을 경우에만 parsing 됩니다)
- <s_keyword> : 키로그 페이지
  - <s_keyword_rep> : 키로그 반복 부분
    - [##_onclick_keyword_##] : 키로그를 눌렀을 때 팝업을 띄우는 onclick 링크
    - [##_keyword_label_##] : 키로그 이름
Guest_Part
- <s_guest> : 방명록 : <div id="entry0Comment">[##_guest_##]</div>
  - <s_guest_input_form> : form 영역 : <form method="post" action="$blogURL/comment/add/0" onsubmit="return false" style="margin: 0">[##_guest_inpot_form_##]</form>
    - <s_guest_member>
      - [##_guest_input_is_secret_##]
      - <s_guest_form> : 게스트모드 인풋 영역
        [##_guest_input_name_##] : 폼의 이름 항목 name
        [##_guest_name_##] : 폼의 이름 항목 기본 내용
        [##_guest_input_password_##] : 폼의 암호 항목 name
        ~~[##_guest_password_##] : 폼의 암호 항목 기본 내용~~
        [##_guest_input_homepage_##] : 폼의 홈페이지 항목 name
        [##_guest_homepage_##] : 폼의 홈페이지 항목 기본 내용
    - [##_guest_input_comment_##] : 코멘트 : comment
    - [##_guest_textarea_body_##] : 코멘트 인풋 항목 name : comment
    - [##_guest_textarea_body_value_##] : 코멘트 인풋 항목 value : (empty)
    - [##_guest_onclick_submit_##] : 작성 스크립트 : addComment(this, $entryId);return false;
  - <s_guest_container>
    - <s_guest_rep> : 방명록 항목 : <a id="comment{$commentItem['id']}"></a>[##_guest_rep_##]
      - [##_guest_rep_name_##] : 작성자 이름 : <a href="$homepage" name="comment{$comments->id}" onclick="return openLinkInNewWindow(this)">$name</a>
      - [##_guest_rep_id_##] : 앵커 아이디, 이것이 지정되는 경우 방명록 항목에 앵커가 빠진다.
      - [##_guest_rep_class_##] : 댓글 종류에 따른 클래스
      - [##_guest_rep_date_##] : 작성일
      - [##_guest_rep_onclick_delete_##] : 수정삭제 스크립트 : deleteComment({$commentSubItem['id']});return false
      - [##_guest_rep_onclick_reply_##] : 답글 스크립트 : commentComment({$commentItem['id']});return false
      - [##_guest_rep_desc_##] : 내용
      - [##_guest_rep_link_##]
      - <s_guest_reply_container>
        <s_guest_reply_rep> : 방명록 답글 : <a id="comment{$commentItem['id']}"></a>[##_guest_reply_rep_##]
        [##_guest_rep_name_##] : 작성자 이름 : <a href="$homepage" name="comment{$comments->id}" onclick="return openLinkInNewWindow(this)">$name</a>
        [##_guest_rep_id_##] : 앵커 아이디, 이것이 지정되는 경우 방명록 항목에 앵커가 빠진다.
        [##_guest_rep_class_##] : 댓글 종류에 따른 클래스
        [##_guest_rep_date_##] : 작성일
        [##_guest_rep_onclick_delete_##] : 수정삭제 스크립트 : deleteComment({$commentSubItem['id']});return false
        [##_guest_rep_desc_##] : 내용
        [##_guest_rep_link_##]
Entry_Keylog_And_Notice_Part
- <s_notice_rep> : 공지 : <s_article_rep>에 삽입됨에 유의
  - [##_notice_rep_link_##] : 공지 항목 링크
  - [##_notice_rep_title_##] : 공지 항목 제목
  - [##_notice_rep_date_##] : 공지 작성일
  - [##_notice_rep_desc_##] : 내용
  - [##_notice_rep_author_##] : 작성자(Tistory S1에서 추가)
- <s_keylog_rep> : 키로그 : <s_article_rep>에 삽입됨에 유의 (Textcube 1.5에서 추가)
  - [##_keylog_rep_title_##] : 키로그 항목 제목
  - [##_keylog_rep_date_##] : 키로그 작성일
  - [##_keylog_rep_desc_##] : 내용
  - [##_keylog_rep_author_##] : 키로그 작성자
- <s_article_protected> : 보호글
  - [##_article_rep_id_##]
  - [##_article_rep_title_##] : 제목
  - [##_article_rep_link_##]
  - [##_article_rep_date_##] : 작성일
  - [##_article_password_##] : 보호글 암호 항목 Name
  - [##_article_dissolve_##] : 암호 입력 스크립트 : reloadEntry({$entry['id']})
  - [##_article_rep_author_##] : 작성자(Tistory S1에서 추가)
- <s_article_rep> : 일반 글
  - [##_article_rep_link_##] : 글의 링크
  - [##_article_rep_title_##] : 글의 제목
  - [##_article_rep_category_link_##] : 카테고리 링크
  - [##_article_rep_category_##] : 카테고리
  - [##_article_rep_date_##] : 등록일
  - [##_entry_archive_link_##] : 같은 날에 등록된 글 아카이브 링크
  - [##_article_rep_desc_##] : 내용
  - [##_article_rep_author_##] : 작성자(Tistory S1에서 추가)
  - [##_article_rep_tb_cnt_id_##] : trackbackCount{$entry['id']}
  - [##_article_rep_tb_link_##] : 트랙백 위치 링크 스트립트 (트랙백 여닫기용 가능)
  - [##_article_rep_response_rssurl_##] : 해당 글의 댓글+트랙백 RSS 주소 (1.6에서 추가)
  - [##_article_rep_comment_rssurl_##] : 해당 글의 댓글 RSS 주소 (1.6에서 추가)
  - [##_article_rep_trackback_rssurl_##] : 해당 글의 트랙백 RSS 주소 (1.6에서 추가)
  - <s_tb_count> : 트랙백 개수 출력 영역관련글
    - [##_article_rep_tb_cnt_##] : 트랙백 수 : ($entry['trackbacks'])
  - [##_article_rep_rp_cnt_id_##] : commentCount{$entry['id']}
  - [##_article_rep_rp_link_##] : 코멘트 위치 링크 스트립트 (코멘트 여닫기용 가능)
  - <s_rp_count> : 코멘트 개수 출력 영역관련글
    - [##_article_rep_rp_cnt_##] : 코멘트 수 : <span id="commentCount{$entry['id']}">({$entry['comments']}) or (emptry string)</span>
  - [##_article_rep_id_##]
  - ~~[##_article_div_area_##]~~ : ~~Deprecated~~
  - <s_ad_div> : 글의 어드민 영역
    - [##_s_ad_m_link_##] : 수정링크
    - [##_s_ad_m_onclick_##] : 창모드 수정 스크립트
    - [##_s_ad_s1_label_##] : 상태 전이 표시 1
    - [##_s_ad_s2_label_##] : 상태 전이 표시 2
    - ~~[##_s_ad_s1_onclick_##]~~ : ~~이런거 없음~~
    - [##_s_ad_s2_onclick_##] : 상태 2로 전이 스크립트
    - [##_s_ad_t_onclick_##] : 트랙백 관리창 스크립트
    - [##_s_ad_d_onclick_##] : 삭제창 스크립트
  - <s_tag_label> : 글에 해당하는 태그 영역
    - [##_tag_label_rep_##] : 태그 나열
  - <s_tb> : 트랙백 영역 : <div id="entry{$entry['id']}Trackback" style="display:$style">[##_tb_##]</div>
    - [##_tb_address_##] : 트랙백 주소 : <span onclick="copyUrl('$defaultURL/trackback/$entryId')">$defaultURL/trackback/$entryId</span>
    - <s_tb_container>
      - <s_tb_rep> : 트랙백 항목
        [##_tb_rep_url_##]
        [##_tb_rep_site_##]
        [##_tb_rep_date_##]
        [##_tb_rep_onclick_delete_##] : : deleteTrackback({$trackback['id']}, $entryId)
        [##_tb_rep_title_##]
        [##_tb_rep_desc_##]
  - <s_rp> ; 코멘트 영역 : <div id="entry{$entry['id']}Comment" style="display:$style">[##_rp_##]</div>
    - <s_rp_container>
      - <s_rp_rep> : 코멘트 항목 : <a id="comment{$comments->id}"></a>[##_rp_rep_##]
        [##_rp_rep_name_##] : 코멘터 이름 : <a href="$homepage" onclick="return openLinkInNewWindow(this)">$name</a>
        [##_rp_rep_class_##] : 종류에 따른 클래스
        [##_rp_rep_date_##]
        [##_rp_rep_link_##] : 코멘트 퍼머링크
        [##_rp_rep_id_##] : 코멘트 앵커 아이디, 이것이 지정되는 경우 코멘트 영역에 앵커가 빠진다.
        [##_rp_rep_onclick_delete_##] : : deleteComment({$comments->id});return false
        [##_rp_rep_onclick_reply_##] : : commentComment({$comments->id});return false
        [##_rp_rep_desc_##] : 내용 : 비밀인경우 <div class="hiddenComment" style="font-weight: bold; color: #e11">비밀 댓글>></div> 가 앞에 추가됨, 링크의 경우 <a href="$link" onclick="return openLinkInNewWindow(this)" rel="external nofollow">$link</a>로 변환, 스타일에 볼드, 빨간색이 지정되는 문제는 수정예정.
        <s_rp2_container>
        <s_rp2_rep> : 코멘트 댓글 : <a id="comment{$comments->id}"></a>[##_rp2_rep_##]
        [##_rp_rep_name_##] : : <a href="$homepage" onclick="return openLinkInNewWindow(this)">$name</a>
        [##_rp_rep_class_##] : 종류에 따른 클래스
        [##_rp_rep_id_##] : 코멘트 앵커 아이디, 이것이 지정되는 경우 코멘트 영역에 앵커가 빠진다.
        [##_rp_rep_date_##]
        [##_rp_rep_link_##]
        [##_rp_rep_onclick_delete_##] : : 상동
        [##_rp_rep_desc_##]
    - <s_rp_input_form> : : <form method="post" action="$blogURL/comment/add/$entryId" onsubmit="return false" style="margin: 0">[##_rp_input_form-##]</form>
      - <s_rp_member>
        <s_rp_guest>
        [##_rp_input_name_##] : form name 용 : name
        [##_rp_input_password_##] : form name 용 : password
        [##_rp_input_homepage_##] : form name 용 : homepage
        [##_guest_name_##]
        [##_guest_homepage_##]
        ~~[##_rp_admin_check_##]~~ : ~~deprecated~~
        [##_미정_##] : 각 form의 id와 label은 [##_rp_input_{part}_##]_[##_article_rep_id_##] 권장
        [##_rp_input_is_secret_##]
      - [##_rp_input_comment_##] : : comment
      - [##_rp_onclick_submit_##] : : addComment(this, $entryId);return false;
      - [##_rp_textarea_body_##] : : comment
      - [##_rp_textarea_body_value_##] : empty
      - [##_미정_##] : textarea의 id와 label은 [##_rp_textarea_body_##]_[##_article_rep_id_##] 권장
Sidebar Part
- <s_sidebar> : 사이드바 영역 지정
  - <s_sidebar_element> : 패널 영역 지정

Common_Part
- <s_paging> : 페이징 영역 : [##_paging_##]
  - [##_prev_page_##]> : 이전 페이지 링크 : href='$url$prefix{$pagingprev?}$postfix' 또는 블랭크
    - From Textcube 1.5 : <s_paging> 밖에서도 사용할 수 있습니다. (레거시 루틴(1.0)) 그러나 특정 조건 또는 1.5 이후에서 지원되지 않을 수 있습니다.
  - <s_paging_rep>
    - [##_paging_rep_link_##] : : href='블라' or empty
    - [##_paging_rep_link_num_##] : : <span>1</span> or <span class="selected">5</span>
  - [##_next_page_##] : 다음 페이지 링크 : href='$url$prefix{$pagingnext?}$postfix' 또는 블랭크
    - From Textcube 1.5 : <s_paging> 밖에서도 사용할 수 있습니다. (레거시 루틴(1.0)) 그러나 특정 조건 또는 1.5 이후에서 지원되지 않을 수 있습니다.
  - [##_no_more_prev_##] : : no-more-prev or empty
  - [##_no_more_next_##] : : no-more-next or empty
- <s_rct_notice> : 최근 공지
  - <s_rct_notice_rep> : 공지항목
    - [##_notice_rep_link_##]
    - [##_notice_rep_title_##]
- <s_search> : 검색 부분
  - [##_search_name_##] : : search
  - [##_search_text_##]
  - [##_search_onclick_submit_##] : : try{window.location.href='$blogURL/search/' + document.getElementsByName('search')[0].value.replaceAll('%', '%25'); return false;}catch(e){}
- <s_random_tags> : 태그영역, repeat
  - [##_tag_link_##]
  - [##_tag_class_##] : : cloud1~5
  - [##_tag_name_##]
- <s_rctps_rep> : 최근글
  - [##_rctps_rep_link_##]
  - [##_rctps_rep_title_##]
  - [##_rctps_rep_rp_cnt_##]
  - [##_rctps_rep_author_##] : 작성자 이름(Tistory S1에서 추가)
- <s_rctrp_rep> : 최근 코멘트
  - [##_rctrp_rep_link_##]
  - [##_rctrp_rep_desc_##]
  - [##_rctrp_rep_name_##]
  - [##_rctrp_rep_time_##]
- <s_rcttb_rep> : 최근 트랙백
  - [##_rcttb_rep_link_##]
  - [##_rcttb_rep_desc_##]
  - [##_rcttb_rep_name_##]
  - [##_rcttb_rep_time_##]
- <s_archive_rep> : 아카이브
  - [##_archive_rep_link_##]
  - [##_archive_rep_date_##]
  - [##_archive_rep_count_##]
- <s_link_rep> : 링크
  - [##_link_url_##]
  - [##_link_site_##]
- <s_page_error> : 404 에러 표시 영역. 1.5a4에 추가됨.

원본 주소 http://dev.textcube.org/wiki/replacer

0개의 걸린 글 과 0개의 댓글이 있습니다.

이 글의 댓글/트랙백 RSS : http://www.textcube.org/manual/rss/response/72

스킨이란

Skin

Help

이동: 둘러보기, 찾기

스킨 설치하기

스킨이란

'스킨' 을 간단히 정의하자면.. 문자체나 이미지, 색상, 레이아웃등을 이용하여 전체적인 형식을 만들어 원하는 분위기를 표현하는것 입니다. 기본적인 뼈대(틀)이 있고 거기에 자신의 구미에 맞게 색상이나 넓이 이미지등을 추가하여 수정하는 것입니다. '옷이 날개' 라는 말이 있듯 사람에게 어떤 옷을 걸치는가, 그 옷이 바로 스킨입니다.

같은 프로그램이더라도 어떠한 스킨을 사용하며, 어떻게 활용하는가에 따라 전혀 다르게 보여질수도 있는 것이죠. 아래와 같이 같이 하나의 태터툴즈에 어떠한 스킨을 적용하는가에 따라 전체적으로 보여지는 분위기가 달라지게 됩니다.

스킨 업로드

스킨파일 업로드 위치

태터툴즈를 정상적으로 설치가 완료되었다면 skin폴더안에 기본적으로 2개의 폴더가 생성되어있습니다.

태터툴즈가 설치된 폴더
 - skin
   - coolant
   - standard

따라서 다운받은 skin 파일을 압축을 풀은 상태 그대로의 폴더 전체를 태터툴즈가 설치된 skin 폴더에 업로드합니다.

업로드한 스킨 선택

스킨의 썸네일 이미지를 통해 스킨의 디자인을 확인할 수 있습니다.
현재 사용중인 스킨을 편집합니다. 스킨 편집(index.html, style.css 파일의 편집)을 통해서 세세한 스킨의 설정을 조절할 수 있습니다.
미리보기 버튼을 통해 스킨이 블로그에 적용됐을 때의 화면을 살펴볼 수 있으며, 적용 버튼을 통해 블로그에 해당 스킨을 적용할 수 있습니다.

원본 주소 ‘http://help.tattertools.com/ko/Skin’

0개의 걸린 글 과 0개의 댓글이 있습니다.

이 글의 댓글/트랙백 RSS : http://www.textcube.org/manual/rss/response/69

스킨 체크 리스트

원본 주소 http://retro.tattertools.com/ko/SkinManual/skinCheckList.html

0개의 걸린 글 과 0개의 댓글이 있습니다.

이 글의 댓글/트랙백 RSS : http://www.textcube.org/manual/rss/response/29

Textcube : Brand yourself!

메인메뉴

서브메뉴

Step05 : 마무리 (index.xml)

스킨 정보 파일 설명

샘플 보기 : 티스토리 기본 스킨의 예

참고 : 이미지로 보기

Step04 : 스타일 (style.css)

페이징

본문

카테고리

달력

댓글, 방명록

그림 표시

페이징

현재 선택된 있는 페이지 스타일

첫페이지 또는 마지막 페이지 선택시 이전페이지, 다음 페이지 스타일

카테고리

카테고리의 폴더이미지를 포함하고 있는 셀의 스타일 (td 영역)

카테고리의 텍스트를 포함하고 있는 셀의 스타일 (td 영역)

카테고리옆 갯수를 나타내는 숫자의 스타일

달력

달력의 년월일, 이전달, 다음달을 표시하는 스타일

달력의 요일명을 표시하는 스타일 (th 영역)

일요일이라는 요일명을 표시하는 스타일 (th 영역)

달력의 주(Week) 단위를 표시하는 스타일 (tr 영역)

달력의 현재 주(Current Week)를 표시하는 스타일 (tr 영역)

현재 달을 포함하는 전체 날짜(Day)의 스타일 전체 (td 영역)

현재 달을 포함하는 전체 날짜의 일요일 스타일 (td 영역)

해당 달력에서 이전달 날짜를 표시하는 스타일(td 영역) - 현재 이전달 날짜가 출력되고 있지 않습니다

해당 달력에서 다음달 날짜를 표시하는 스타일(td 영역) - 현재 다음달 날짜가 출력되고 있지 않습니다

현재 달력의 이번달 날짜를 표시하는 스타일 (td 영역)

오늘 날짜를 표시하는 스타일 (td 영역)

글을 작성한 날의 링크 스타일

코멘트, 방명록

일반 댓글 [##_rp_rep_class_##]

관리자가 올린 댓글 [##_rp_rep_class_##]

비밀 댓글 [##_rp_rep_class_##]

비밀 댓글(로그인 하지 않았을 경우)

일반 방명록 글 [##_guest_rep_class_##]

관리자가 올린 댓글 [##_guest_rep_class_##]

그림 표시

이미지 아래 캡션 스타일

이미지 블럭

이미지 왼쪽 정렬

이미지 가운데 정렬

이미지 오른쪽 정렬

그림 2개 배치

그림 3개 배치

본문

더 보기 - more

그만보기 - less

more/less 본문 내용

그만보기 - less

Step03 : 치환자 (skin.html)

Appendix

시작하기전에

header 영역

블로그 제목

블로그 메뉴

content 영역

검색 결과 리스트

검색 결과 댓글 리스트

위치 로그

태그 클라우드

방명록

15-1. 방명록 글쓰기

15-2. 방명록 리스트

공지사항 글

보호 글

글

18-1. 글 관련 정보 : 글제목, 카테고리, 날짜, 관리자

18-2. 블로그 글

18-3. 글 관련 태그

18-4. 트랙백과 댓글 보이기/감추기

18-5. 트랙백

18-6. 댓글

18-6-1. 댓글 리스트

18-6-2. 댓글 쓰기

페이지