Skin Tutorial

Help

여러분들은 태터툴즈를 선택하신 이유가 무엇인가요? 그 여러 이유중 하나가, '판박이 같은 똑같은 틀에서 벗어나 나만의 자유롭고, 나만의 디자인으로 만들어 보자.' 일 것입니다. 때론 상큼하고, 싱그럽게 그리고 가끔은 분위기 있고 럭셔리하게.. 태터툴즈의 스킨 기능을 잘 활용하여 여러분만의 기분과 마음도 함께 표현해보세요. 틀에 박힌 포털 사이트의 블로그 스킨이 아닌 쉽고 편리한 태터툴즈만의 스킨에 여러분의 나래를 펼쳐보세요.

입학통지서

태터툴즈 스킨 제작에 대한 기본부터, 배포되고있는 각각의 플러그인에 따른 치환자 삽입으로 활용까지 알아보도록 하겠습니다.

스킨이란?

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

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

준비물

스킨제작에 앞서 알아두면 도움이되는 기본적인 스킨의 치환자 정보와 스킨의 구조에 대하여 알아봅시다. 학교에 등교하기전 예습은 필수인거 아시죠? '_'

스킨의 치환자 목록 알아보기

스킨의 치환자들에 대한 명세를 담고 있는 문서입니다. 스킨 구조 설명서 태터툴즈의 치환자는 기본적으로 아래와 같은 형식을 따릅니다.

[##_***_##]

수학에서와 마찬가지로 치환자는 어떠한 출력하겠다를 대신 표현해주는 역활입니다. 예를들어 스킨에서 [##_category_##] 라고 치환자를 쓰게 되면 태터툴즈에서 읽어들일 때는 위의 치환자 부분에 작성한 카테고리가 출력되게 됩니다. <a href="[##_blog_link_##]">블로그처음페이지이동</a> 이와 같이 쓰일수 있습니다.

이의 치환자나 구조를 모두 외우실 필요는 없습니다. 눈으로 쭈욱 읽어내려가면서 대략 이렇다 정도만 알아두시면 됩니다 >_<

스킨의 구조 알아보기

제로보드나 타 보드의 스킨의 경우는 header(상단영역), view(본문출력), write(글쓰기), footer(하단출력) 등, 이와 같이 여러개의 파일들로 이뤄져 있습니다. 이와는 달리 태터툴즈 스킨은 skin.html 하나의 파일에 각각의 메뉴들(blog, tags, notice, location, guest 등)의 모든 블럭이 들어갑니다.

• 스킨의 기본구조

[##_***_##] : 단순 치환자입니다. 태터툴즈에 의해서 적절한 값으로 치환되어 집니다. <s_***></s_***> : 특정 기능단위의 영역입니다. <s_***_rep></s_***_rep> : 반복되는 특정 기능단위 영역입니다. 블럭으로 지정해놓으신 구간을 태터툴즈가 읽어들인 후, 반복하여 출력합니다.

블럭구조는 내부에 반복치환자를 가지고 있는데 이러한 반복치환자는 대부분 끝에 _rep 이 붙습니다. 예를 들어서, 댓글구조안에서 여러개의 댓글이 반복되지요? 그런 경우는 간단하게 아래와 같이 표시됩니다. <s_rp>

   <s_rp_rep>
       [##_치환자_##]
   </s_rp_rep>

</s_rp> 전체 댓글 구조안에서 rep 로 쌓인 블럭만을 태터툴즈가 읽어서 이부분을 반복 출력하는 것이지요. 이러한 구조를 통해서 블로그가 필요로하는 대부분의 기능을 만들어 낼 수가 있습니다

• 블럭별 표시 치환자

전체적인 각각의 페이지 표시방법 입니다. <s_t3> </s_t3> 이느 태터툴즈의 모든 블럭을 포함하고 있습니다. 이 사이에 쓰이는 내용은 태터의 모든 폼(form)이 작동되게 됩니다. 따라서 이 블럭안에 모든 태터의 치환자들이 들어갑니다.

아래는 <s_t3></s_t3> 안에 들어있는 블럭들입니다.

• 글검색결과출력부분

<s_list> </s_list>

• 댓글검색결과출력부분

<s_rplist> </s_rplist>

• 태그리스트출력부분

<s_tag> </s_tag>

• 위치로그출력부분

<s_local> </s_local>

• 방명록

<s_guest> </s_guest>

• 보호되어있는글출력

<s_article_protected> </s_article_protected>

• 공지사항출력

<s_notice_rep> </s_notice_rep>

• 본문(블로그)내용출력

<s_article_rep> </s_article_rep>

• 페이징바

<s_paging> </s_paging>

• 검색어입력폼

<s_search> </s_search>

여기서 부터는 일반적으로 사이드바(sidebar)에 출력하곤 하는 부분입니다.(반복블럭-rep 포함)

• 랜덤태그

<s_random_tags> </s_random_tags>

• 최근공지글

<s_rct_notice> </s_rct_notice>

• 최근포스트

<s_rctps_rep> </s_rctps_rep>

• 최근댓글

<s_rctrp_rep> </s_rctrp_rep>

• 최근트랙백

<s_rcttb_rep> </s_rcttb_rep>

• 최근 글보관함

<s_archive_rep> </s_archive_rep>

• 링크사이트

<s_link_rep> </s_link_rep>

물론 각각의 출력부분(블럭) 안에 하위로 세부적인 출력을 해주는 치환자들이 더 있습니다. 자세한 치환자 정보는 http://dev.tattertools.com/wiki/replacer 를 참고하시기 바랍니다.

먼저 태터툴즈가 실행될때 skin.html을 한번 읽어들여서, 각각의 블럭별로 분리하여 임시저장을 하고 있습니다. 그리고선 관련된 기능(메뉴)이 호출될 때마다 해당하는 블럭의 HTML을 입혀서 나가는 구조로 되어 있습니다. 예를들어, 메뉴중 위치로그(location/local log)를 클릭했을 때, 태터툴즈는 skin.html에서 사이드바(sidebar)영역을 제외한 블럭구조 중 <s_local></s_local> 부분을 표시해주고 나머지 부분은 감추게 됩니다.

등교

전체적인 레이아웃(틀) 구상과 그에 따른 코딩(html, table, div, .etc)에 대한 설명, 그리고 태터툴즈 치환자의 적절한 삽입위치와 출력정보를 안내하며, 작업중 범할수 있는 잘못된 삽입 등을 설명합니다.

레이아웃 구상하기

레이아웃은, 스킨 제작시 내용안에 들어갈 내용, 연결경로, 전체적인 페이지와의 최적의 링크관계, 메뉴의 구성과 전개방법, 등등을 고려하여 전체적인 모양을 잡는것을 말합니다. '전체적인 스킨의 디자인을 미리보기용으로 제작해본다' 라고 생각하시면 됩니다. 레이아웃은 스킨의 가장 큰 틀이기 때문에 후에 코딩(html)작업에 들어가게 되면 수정 작업이 다소 힘들수 있습니다.

간단하게 태터툴즈 기본스킨에 충실한 레이아웃을 가지고 기본스킨을 제작하는 것과 같은 과정을 설명하겠습니다. 보시면 아시겠죠?

• Header : 블로그 타이틀, 블로그 설명, 블로그 메뉴(태그, 위치로그, 방명록 등)
• Sidebar : 블로그이미지, 랜덤태그, 최근공지글, 최근포스트, 최근댓글, 최근트랙백, 최근 글보관함, 링크사이트
• Content : 글검색결과, 댓글검색결과, 태그리스트, 위치로그, 방명록, 보호되어있는글, 공지사항, 본문(블로그)내용, 페이징바
• Footer : 블로그 정보, 카피라이트

위는 기본스킨을 기준으로 설명하기 때문에 출력위치가 제작하시는 분이 원하는 위치와 다를수 있습니다. 레이아웃 구상시엔 블로그 타이틀, 최근글, 최근댓글 등의 태터툴즈 치환자 블럭을 어느 위치에 넣을것인지를 생각하시면 됩니다.

코딩 작업하기

레이아웃을 구상하여 전체적인 레이아웃이 나왔다면 그에 맞게 코딩(프로그램)작업을 합니다.

html의 table로 작업을 하셔도 되고 xhtml의 div를 이용하셔도 됩니다. 기능상으로는 비슷하면서도 많이 다르기도 합니다. '_' 어느게 쉽다 편하다는 사용자 관점에 따라 다릅니다. 'table은 단순 배열만을 목적으로 해야하고 그외는 무조건 div를 써야한다.' 라는 말이 절대적은 아니라고 봅니다. 웹표준의 언급이 높아지는 시점에서 더이상은 table에 억매여서는 안된다 라고 말씀하시는 분이 계십니다만, 물론 그 말이 틀린말이라는 건 아닙니다.

허나 본 제작 가이드에서 무조건 이렇게 해야한다 라고 말한다는 자체가 초보자를 중점으로 설명하는 입장에서 난관이 될수 있습니다. 초보자의 입장에서 내 손으로 직접 내 스킨을 제작해보겠다고 하여 여기까지 따라오신 분이라면, table, div 등에 너무 심히 생각하실필요는 없다고 봅니다.

table이나 div의 상세 구문이나 소스코드 등은 이곳에서는 잠시 미뤄둡니다. (다루려고 했으나.. 아직 어떻게 설명을 해야할지 몰라.. 변명 반 둘러대기 반..-_-;; 정리가 되면 나중에라도 추가하도록 하겠습니다. 사실상 스킨마다 위에서 구상한 레이아웃의 구조가 모두 다르기때문에 정답이라고 말하는 table이나 div의 상세 구문이나 소스코드, 구조등을 설명하기가 참 힘듭니다.)

이는 편집기(메모장, 에디트플러스, 울트라에디트 등등)를 이용하시거나 쉽게 이지윅에디터(나모,드림위버 등)를 이용하시면 됩니다.

치환자 삽입하기

스킨에 사용되는 치환자를 삽입할 때 도움을 받을수 있는 문서입니다. 스킨 구조 설명서

문서를 쭈욱 내려가시다 보면, 중간부터 '단순 치환자 목록' 이 있습니다. 이 부분을 참고하시면 원하는 블럭의 하위에 사용되는 치환자를 상세히 확인하실수 있습니다. 이에 따라 치환자를 원하는 위치에 채워가시면 됩니다.

• 예제 - 댓글 검색 페이지

 1. s_rplist :: 검색 시 보여주는 댓글 리스트입니다.
 1. s_rplist_rep :: s_rplist 태그 안에서 반복되는 열입니다

<s_rplist> < div>[##_rplist_conform_##] 에 해당되는 댓글 [##_rplist_count_##]건 입니다.< /div> < div>

 <s_rplist_rep>
   < div>[##_rplist_rep_regdate_##]  [##_rplist_rep_name_##]  

<a href="[##_rplist_rep_link_##]">[##_rplist_rep_body_##]</a>< /div>

 </s_rplist_rep>
 < /div> 

</s_rplist>

• 설명

< div>와 < /div>의 앞부분 공간(띄어쓰기)은 붙이셔야합니다.

<s_rplist> //댓글 리스트 시작

< div>[##_rplist_conform_##] 에 해당되는 댓글 [##_rplist_count_##]건 입니다.< /div> //'검색어'에 해당되는 댓글 '검색어수' 건 입니다. < div>

<s_rplist_rep> //검색어에 해당되는 댓글 리스트 출력을 위한 반복되는 열 시작

< div>[##_rplist_rep_regdate_##]  [##_rplist_rep_name_##]   <a href="[##_rplist_rep_link_##]">[##_rplist_rep_body_##]</a>< /div> //'댓글이 달린 날짜' '댓글 작성자명' '댓글링크' '댓글내용'

</s_rplist_rep> //검색어에 해당되는 댓글 리스트 출력을 위한 반복되는 열 끝 < /div> </s_rplist> //댓글 리스트 끝

치환자 삽입에 대한 예제는 태터툴즈 기본스킨을 참고하시는게 가장 좋은 방법으로 보입니다. 직접 작업하며 비교해가며 하시다보면 들어가야되는 치환자의 위치파악에 많은 도움이 됩니다.

C.A.(클럽활동) / body-id를 이용한 페이지별 다른 디자인 구성하기

css의 클래스(class)를 활용

1. 태터툴즈 스킨의 기본적인 내용구성 파일들.

images(폴더) //스킨에 사용되는 이미지를 담고 있는 폴더
skin.html //스킨의 뼈대구성 파일
style.css //뼈대를 꾸며주는 디자인 설정파일
그외 기타파일 //스킨에 따라 .js파일 등

2. 스킨파일(skin.html)에서 정의된 뼈대(레이아웃)를 style.css에서 꾸며보자.

2-1. skin.html 예제코드

<body>
    <div id="box01">
        <h4 class="title">타이틀</h4>
        <ul class="list">
            <li>목록항목1</li>
            <li>목록항목2</li>
            <li>목록항목3</li>
        </ul>
        <span class="text01">텍스트</span>
    </div>
</body>

2-2. skin.html 예제코드 실행결과

2-3. style.css 예제코드

#box01   { border:1px solid #0000FF; }  /*테두리 파란색 굵기 1px*/
.title      { color:#FF0000; }  /*텍스트 컬러 빨간색*/
.list       { margin-left:70px; }  /*왼쪽 바깥여백 70px*/
.text01   { font-size:20px; }  /*텍스트 크기 20px*/

#은 skin.html에서 id=""를 .은 class="" 영역을 참조하게 됩니다.

2-4. skin.html과 style.css가 같이 작동한 실행결과

태터툴즈 body-id 기능 따라해보기.

3-1. body-id 준비

사용중인 스킨파일(skin.html에 <body> 라인에 [##_body_id_##]를 포함합니다.

<body id="[##_body_id_##]">

이제 태터툴즈는 body-id기능을 사용할 준비가 되었습니다. 활용은 유저의 몫입니다.

3-2. 태터툴즈에 정의된 body-id 들

#tt-body-page
#tt-body-entry

#tt-body-tag
#tt-body-location
#tt-body-notice
#tt-body-guestbook
#tt-body-keylog

#tt-body-search
#tt-body-category
#tt-body-archive

3-3. style.css에서 정의된 body-id를 이용하여 옷입히기

• 메뉴 - 지역(위치)로그를 열었을 때의 style.css의 예

태터툴즈는 #tt-body-location의 body-id를 부여하게 됩니다.

style.css에서 아래의 코드형식을 참조합니다.

skin.html 기본 코드는 앞서 서두에 설명한 코드를 예제로 사용합니다.

#tt-body-location #box01   { border:1px solid #0000FF; }
#tt-body-location .title      { color:#FF0000; }
#tt-body-location .list       { margin-left:70px; }
#tt-body-location .text01   { font-size:20px; }

이전의 style.css의 앞에 #tt-body-location 만 붙여주었습니다.
이는 #tt-body-location를 받게되는 지역로그 페이지를 열었을때만 이 style영역이 읽혀지게 됩니다.
여기에 덧붙여 #tt-body-guestbook의 id를 받게되는 방명록 페이지 스타일을 추가해보면,

#tt-body-guestbook #box01   { border:1px solid #000000; }
#tt-body-guestbook .title      { color:#000000; }
#tt-body-guestbook .list       { margin-left:150px; }
#tt-body-guestbook .text01   { font-size:35px; }

이렇게 총 8줄을 가지고 지역로그와 방명록 페이지 디자인을 달리 할수 있게 됩니다.

추가.

발생할수 있는 문제들

• 위지윅에디터를 이용하실 때,

정확한 이유는 알수 없으나 일부 위지윅에디터가 태터툴즈의 일부 치환자를 임으로 변경해버리는 문제를 확인했습니다. 그중 한 부분이 태터툴즈의 페이징 부분의 치환자 입니다. 제대로 넣었는데 정상작동하지 않는다면 위지윅에디터가 치환자를 임으로 변경하지는 않았는지 확인해보시기 바랍니다.

• 댓글 입력폼, 방명록 입력폼에서 주의사항

비밀글과 관리자 로그인시 감춰지는 input form 에서 주의해야할 치환자와 그 위치

s_guest_member는 관리자로긴상태일때 표시하지 않기 위해서 s_guest_form 을 한번 감싸는 블럭입니다. 없으면 절대로 안됩니다 사용예는 아래와 같습니다.

방명록 부분입니다. <s_guest_rep>

 <s_guest_member>
   <s_guest_form>
     * 방명록 입력 툴 영역입니다(이름, 패스워드, 홈페이지, 비밀글체크 등)
   </s_guest_form>
 </s_guest_member>
     * 본문입력 영역(textarea)는 관리자 로그인시에도 표시되어야하므로 이곳에 위치

</s_guest_rep>

<s_guest_member>와 </s_guest_member>로 감싸진 블럭은 관리자 로그인시 표시되지 않습니다. '_'

• 치환자는 블럭으로 이뤄져 있으며 시작과 끝을 명확히 해야합니다.

<s_rplist> 로 시작되었다면 </s_rplist>로 끝내어 주어야합니다. <s_***_rep></s_***_rep> 는 반복되는 특정 기능단위 영역입니다. 블럭으로 지정해놓으신 구간을 태터툴즈가 읽어들인 후, 반복하여 출력합니다. 따라서 시작<s_***_rep>만 있고 끝</s_***_rep>이 없다면 반복구문에 오류가 생길수 있습니다.

• 1.0이하(0.9버젼 대)의 치환자와 1.0에서 추가되거나 변경된 치환자

이는 1.0이하 버전대의 스킨을 1.0으로 변환작업에서 범하는 오류입니다. ~ing.. 작성중..

하교

작성한 스킨파일을 미리보기하여 발생하는 문제에 대한 수정후 계정에 업로드를 합니다. 집에 가서는 복습과 숙제는 하셔야 하는거에요 :D

스킨 테스트, 미리보기, 스킨정보파일 작성하기

• IE/FF test
• preview / script error check
• index.xml

스킨 정보 파일 설명

업로드하기

• 스킨파일 업로드 폴더(위치)

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

태터툴즈가 설치된 폴더
 - skin
  - customize  //사용자 스킨 편집(선택한 스킨을 편집합니다)을 위한 폴더
  - Tattertools_simple  //태터툴즈 기본 html 스킨
  - Tattertools_skyline_ko  //태터툴즈 기본 xhtml 스킨

• 업로드 방법/툴(FTP)

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

졸업

추가적으로 활용할수 있는 플러그인에 대한 내용입니다. 배포되고 있는 플러그인의 활용과 제작시 발생하는 문제에 대한 도움을 받을수 있는 방법을 안내합니다.

서포트

• question & answer

태터툴즈 - 사용자공간 - 묻고답하기 - 카테고리(스킨)에서 도움을 받으실수 있습니다. :D 스킨 작가 커뮤니티