티스토리 스킨 만들기 #1 파일 구조

티스토리 블로그를 운영하다보니 스킨을 바꾸고 싶다는 맘이 자꾸 든다. 최근에 살짝 바꾸긴 했는데 쓰다보니 역시나 여러모로 불편하다. 결국 참을 수 없어서 대대적으로(?) 바꿔보기로 했다. (괜히 일을 키우는 느낌이 살짝 든다...;ㅅ;)

 

티스토리 스킨 만들기 공식 문서를 참고해본다.

https://tistory.github.io/document-tistory-skin/common/variable.html

 

티스토리 스킨 파일 구조

티스토리 스킨의 파일 구조는 다음과 같다.

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, style.css 이 세가지 파일이 티스토리 스킨 제작의 핵심 파일이다.

 

index.xml

 

티스토리 스킨의 설정 정보를 담고 있는 파일이다. 스킨 이름 및 저작권과 같은 기본 정보, 최근글 개수, 댓글 표시 여부와 같은 설정 옵션 값, 홈 커버, 스킨 옵션, 리스트 스타일 등을 이곳에 정의할 수 있다.

 

skin.html

 

티스토리 스킨의 메인 템플릿 파일로, 치환자를 이용해서 실제 HTML 결과물을 출력한다. 티스토리 스킨은 단순히 해당하는 값만 표시하는 값 치환자와 내부에 HTML로 렌더링 될 수 있는 스킨 데이터를 포함하는 그룹 치환자로 나눠져 있다. skin.html 내부에 값 치환자와 그룹 치환자 이용해서 데이터를 어떻게 출력할 것인지 구조를 정의할 수 있다. 

 

style.css

skin.html 파일이 스킨의 뼈대를 만든다면, style.css 파일의 스킨을 꾸미는 역할을 한다. 이곳에 글꼴, 색깔, 크기 등 구체적인 CSS 스타일을 정의해서 원하는 스타일의 스킨을 만들 수 있다.