2. 티스토리 파일 구조
디자인을 구상했으면 디자인을 '티스토리 스킨'으로 만들어야한다.
그렇다면 티스토리 스킨은 무엇으로 이루어져 있고, 어떤 파일을 어떻게 편집해야할까.
티스토리 스킨가이드에서 제공하는 파일구조는 다음과 같다.
SKIN ─┬─ skin.html
├─ style.css
├─ index.xml
├─ preview.gif
├─ preview256.jpg
├─ preview560.jpg
├─ preview1600.jpg
└─ images ─┬─ script.js
├─ background.jpg
├─ background.jpg
└─ background.jpg
우선, 가장 위의 세 파일 (skin.html
, style.css
, index.xml
)이 필수요소 파일로 가장 중요하다.
skin.html
스킨의 메인 템플릿 파일로 치환자를 사용해 각 url에 해당하는 HTML 결과물로 치환됩니다.
스킨 에디터에서 'html' 편집
버튼을 눌러 들어가면 HTML 탭에서 편집할 수 있다.
현재 적혀있는 모든 HTML 코드를 지우면 블로그는 적어놓은 글이나 카테고리 유무에 상관없이 백지 상태가 된다. 즉, 티스토리 블로그를 이루고 있는 '모든' 구성요소는 HTML element를 이용해서 생성해야 블로그에서 보이게 된다.
티스토리 구성요소는 그 종류는 같지만 사용자마다 내용이 다르기 때문에 내용에 상관없이 모든 사용자의 블로그에 대응될 수 있어야한다. 이를 위해 이용하는 것이 치환자이다.
치환자
치환자는 티스토리를 구성하고 있는 요소의 내용을 사용자에 맞출 수 있도록 항목화 해놓은 것으로 볼 수 있다.
예를 들어,
- 현재 블로그 주소로 가는 링크를 만들 때, 현재 블로그 주소를 적어야하는데 '블로그 주소'라는 요소는 같지만 각 사용자의 블로그 주소는 모두 다르다.
- 그러므로 실제 블로그 주소 대신 '나의 블로그 주소'로 치환되는 블로그 주소 치환자
https://crackyachae.tistory.com/
를 사용해서 HTML 코드를 작성한다.
치환자를 이용해서 작성한 링크 주소는 실제 페이지에서 다음과 같이 표시된다.
<!-- 스킨파일 작성 (치환전) -->
<a href = "https://crackyachae.tistory.com/">Home</a>
<!-- 실제 페이지 (치환후) -->
<a href = "crackyachae.tistory.com">Home</a>
티스토리의 치환자는 그룹치환자
, 값치환자
두 가지로 분류된다.
그룹치환자
는 "내부에 스킨 데이터를 포함하며 렌더링된 값으로 변환된다"라고 설명하고 있으나 스킨의 영역을 구분하는 용도로 생각하면 편하다.<>
로 감싸져있는 형태이다.
값치환자
는 위의 예시처럼 스킨을 이루는 구성요소 값으로 변환되는 치환자이다.[]
로 감싸져있는 형태이다.
예를 들어 다음과 같이 스킨코드를 작성했을 때
<s_tag>
<div class="taglog">
<h3>태그</h3>
<ul>
<s_tag_rep>
<li><a href="" class=""></a></li>
</s_tag_rep>
</ul>
</div>
</s_tag>
- 그룹치환자:
<s_tag>
,<s_tag_rep>
- 값치환자:
,
,
구체적인 치환과정이나 사용 방법은 추후 각 페이지를 작성하면서 이해하는 것을 추천한다.
style.css
css 분리를 위한 파일이며
skin.html
과 마찬가지로 스킨에디터에서 편집할 수 있습니다.
- HTML 파일에서 생성한 요소들의 모든 시각적인 요소를 결정하는 파일로 CSS에 대한 이해가 있으면 일반 웹 페이지와 큰 차이없이 작성할 수 있다.
- 치환되어 나온 각 요소와 class 값을 잘 파악해서 작성하고 HTML 파일에 잊지않고 연결시켜주는 것이 중요할 것 같다.
index.xml
스킨 정보 파일로 자세한 내용은 '스킨 정보 파일' 장에서 다룹니다.
스킨의 정보를 나타내는 파일로 스킨의 정보나 기본값, 옵션 등을 만들고 설정할 수 있는 파일이다.
preview
티스토리 각 영역에서 미리보기를 표시하기 위한 파일입니다.
- preview.gif : 미리보기 기본 파일로 아래 파일이 없는 경우에 사용 (112x84)
- preview256.jpg : 사용 중인 스킨 미리보기 (256x192)
- preview560.jpg : 스킨 목록 미리보기 (560x420)
- preview1600.jpg : 스킨 상세보기 미리보기 (1600x1200)
아직 정확한 용도와 사용 이유를 잘 모르겠다. 추후에 알아보는대로 내용을 추가할 예정.
images
필수요소가 아닌 파일은 모두 images 아래에 위치하게 됩니다. image, script, css 등을 업로드하여 스킨에서 사용합니다.
- 위에서 언급한 파일 외에 업로드한 파일은 전부 자동으로
images
폴더에 위치하게된다. - 스킨에 사용할
image
,icon
,font
, 추가적인css
나js
파일 등을 폴더에 업로드해 사용할 수 있다.
<!-- Example -->
<img scr="/images/img.jpg">
<script src="/images/additional-script.js"><script>
참고
- 스킨가이드 - 파일 구조 by Tistory
'프로젝트를 합니다 > 티스토리 스킨 제작' 카테고리의 다른 글
첫번째_7 헤더 (0) | 2020.10.11 |
---|---|
첫번째_4 스킨 정보 파일 (0) | 2020.10.10 |
첫번째_3 공통 부분 (0) | 2020.07.28 |
첫번째_1 디자인 구상 (0) | 2020.05.06 |
첫 티스토리 스킨 만들기 (1) | 2020.03.14 |