본문 바로가기
Tistory/스킨 만들기

파일구조 살펴보자 #1

by 강누비 2023. 12. 18.
반응형
 

스킨 제작을 위한 첫걸음 #0

블로그 포스팅을 하기 앞서 내가 원하는 스킨을 따로 한번 만들어보고 싶어졌다. 기본 Tistory에서 제공해주는 " 티스토리 제공 스킨 가이드 "을 보고 바로 이해하기는 어려웠다. 공용 스킨의 코드

nubee.tistory.com

가이드 문서에 따르면  스킨을 만들기 위한 파일구조는 아래와 같다.

파일 구조

위의 파일이 꼭 모두 필요한것은 아니다.

꼭 필요한 파일은 "index.xml, skin.html, style.css , images 폴더"이다.

 

1. index.xml

먼저 index.xml 파일부터 설명하겠다.

파일의 포맷을 보다시피. xml 형시의 파일이며, 스킨의 대한 기본적인 설정, 사용자 변수 등을 정의하는데 사용된다.

index.xml 파일 구조를 참고하여 살펴본다. 

index.xml에서의 기본값 정의

 

 

index.xml에서는 기본적인 설정을 제외한 2가지 종류의 설정을 더 할 수 있다.

먼저 홈 커버 설정이다. 홈 커버는 블로그 접속시에 나타나는 첫 페이지에서만 사용할 페이지에 대한 설정으로 홈커버 내부에 구현한 스킨은 홈화면서만 사용되는 것으로 확인했다.

 

다음으로는 사용자 변수 설정이다. 티스토리 가이드 내부에서는 스킨 옵션으로 명명되어 있는 것 같았다. 해당 설정을 통해 사용자마다 필요한 변수를 설정하여 사용하는 것으로 확인했다.

 

2.skin.html

skin.html은 파일의 확장자가. html이므로블로그 스킨에 대한 구조(뼈대)를 잡아주는 역할로 html을 활용하여 작성하는 파일이다. skin.html을 작성할 때 보통 API를 통해 데이터를 가져와 사용자에게 제공하지만 여기서는 해당 역할을 치환자라는 것이 대신한다. 

 

해당 파일에 대한 내용을 이후에 치환자 내용으로 별도로 다루도록 하겠다.

 

3.style.css

해당 파일은 .css의 확장자를 갖고 있으며 html로 작성한 뼈대에  웹사이트에 표현되는 방법을 정해주는 스타일 시트이다. 

 

4.images

스킨에 사용될 .js, 이미지 파일 등을 추가하면 해당 폴더로 이동하여 저장된다.

 

 

 

이렇게 4가지의 필수적인 구조가 있다고 파악했으면 preview의 경우 꼭 있지 않아도 사용이 가능했다.

다음은 치환자에 대해 정리해 보도록 하겠다.

반응형