이번에 티스토리 스킨을 익히기 위해서 삽질하던 중 알아낸 몇가지를 기록해 둡니다.
우선 직접올리기에 사용할 스킨 파일은 아래와 같이 준비하면 됩니다.

index.xml
preview.gif (150 x 150)
skin.html
style.css
images/print.css
images/기타 자신이 스킨에서 사용한 이미지 파일 (jpg,gif,png 형식)

차례대로 간단히 설명하면

1. index.xml
    스킨의 각종 정보가 들어있습니다.
    제작자 정보라던가 화면 설정과 같은 내용도 있더군요.
    스킨 파일을 업로드하면 카테고리 색상 등이 변경되는 이유가 바로 이 파일 때문입니다.
    내용 설명은 아래쪽에 소스에서 간단하게 하겠습니다.

2. preview.gif
    스킨의 미리보기 이미지입니다.
    가로 150, 세로 150픽셀의 gif 이미지입니다.
    스킨을 다 만들고 캡춰한 후 축소해서 만들어도 되고..
    자신만의 특별한 마크로 대신하셔도 될겁니다.

3. skin.html
    관리자 -> 스킨 -> HTML/CSS 편집에서 위쪽에 있는 html 코드가 들어있는 파일입니다.
    그곳에서 그대로 복사해서 사용하시면 됩니다.
    그리고 사이드바와 사이드바 요소를 얼마든지 자신의 마음대로 만들 수 있는데
    아래쪽의 소스에서 이부분을 설명하겠습니다.

4. style.css
    스타일 형태를 지정하는데 제일 중요한 파일입니다.
    마찬가지로 HTML/CSS 편집에서 아래쪽에 있는 css 코드가 들어있는 파일입니다.
    그곳에서 복사해서 만드시면 됩니다.
    특별히 설명은 안드리겠습니다. 복잡합니다.
    그저 여러번 실험해보시면서 하시는 수밖에 없습니다.
    css 문법은 트리오 홈페이지를 참고하시면 좋습니다.

5. print.css
    특별하게 안 고쳐도 될 듯합니다.
    아래에있는 소스에서 복사해서 사용하십시요.

모든 소스는 UTF-8로 저장되어야 합니다.
윈도우즈의 메모장에서 저장하기전 인코딩 옵션에 UTF-8을 선택해서 저장하면 됩니다.

그럼 소스를 살펴보도록 하겠습니다.

1. index.xml은 코드에 설명을 포함합니다.

index.xml 코드

자세한 설명 : 티스토리 스킨가이드 (이런게 있었군요 ㅡ_ㅡ;;)

2. skin.html은 우선 자신히 편집하고 싶은 형태와 가장 유사한 레이아웃의 스킨을 적용한 후
    HTML/CSS 편집을 통해 해당 코드를 전부 복사해서 저장합니다.
    그리고 나서 필요한 부분을 부분적으로 편집하는 것이 쉽습니다.
    사이드바를 사용자 목적에 맞게 얼마든지 추가할 수 있는 점이 가장 마음에 드는데요..
    (이글루스와 가장 차이나는 점..)
    아래의 html 코드로 사이드바를 얼마든지 추가할 수 있습니다.

skin.html의 사이드바 태그

   s_sidebar 태그와 바로 이어지는 주석으로 특정 이름의 사이드바를
    얼마든지 추가할 수 있습니다.
    그리고 s_sidebar_element 태그로 사이드바에 들어가는 아이템도 마음대로
    추가할 수 있는데요. 위의 예제코드에서는 관리자 메뉴를 아이템으로 만들어
    보았습니다.
    저 태그들의 앞뒤로 꾸미는 태그를 얼마든지 사용한 후 s_sidebar와
    s_sidebar_element를 사용해서 사이드바를 꾸미시면 됩니다.
    그런데 파일 직접 올리기를 사용하면 skin.html 있는 사이드바 설정대로
    현재 블로그의 사이드바 설정이 초기화되므로 블로그의 사이드바 설정은
    스킨을 다 적용하고 난 뒤에 하시는 것이 정신 건강에 좋습니다.

3. style.css가 가장 고치기 난감한 것입니다.
    우선 .sidebar 스타일이 사이드바의 스타일이고 나머지 스타일들도 영어로된
    이름 그대로의 스타일들이므로 유추해서 시행착오를 거쳐야 할 것같습니다.
    skin.html에 div, span과 같은 영역들이 class와 id로 스타일을 적용하므로
    자신이 수정하고 싶은 영역의 태그를 살펴보면 어느 스타일을 수정해야할지
    유추할 수 있습니다.
    css 문법 자체는 너무 복잡하므로 여기저기 다른 홈페이지에서 괜찮은 스타일을
    차용해 오시는 것도 좋겠습니다.

4. print.css의 소스입니다.
    아무래도 화면을 출력하거나 전자책을 만들기 위한 스타일로 추정됩니다.
    당장 스킨에는 영향을 안 미치므로 궂이 수정하지 않아도 되겠지만
    일단 스킨 파일에는 포함되어 있는 것이라 같이 포함했습니다.

print.css 코드

이상으로 티스토리 스킨에 사용되는 파일들을 대략적으로 알아보았습니다.
전 이 몇가지를 알아내려고 시행착오를 좀 많이 거쳤지만..
많은 실력있는 분들의 좋은 스킨이 나왔으면 하는 바램입니다.


PS : 제가 테스트하기 위해 만들어 사용했던 스킨을 압축해서 배포합니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.