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

서론

티스토리 스킨을 다루기 위한 방법을 알아보려고 합니다. 

숙련된 사람들은 티스토리 스킨 가이드만 보아도 충분히 활용하여 만들 수 있습니다. 

초보자만을 위한 포스트임을 알아주세요.

 

파일 구조

티스토리 스킨 가이드를 확인하면 파일 구조는 아래와 같이 생성해야 됩니다.

각각의 파일들을 하나씩 알아보면 다음과 같습니다.

 

• index.xml

스킨에 대한 정보를 저장하는 xml로 작성된 문서입니다. 스킨에 필요한 다양한 기본정보를 XML의 형식으로 담고 있는 문서 파일로 이문서를 작성하여 아래와 같은 영역의 옵션들을 지정할 수 있습니다.

• skin.html

해당 스킨의 HTML 문서입니다. 당연히 HTML와 CSS 등 다양한 기능을 사용하여 블로그를 꾸밀 수 있습니다. 다만, 치환자들을 활용해서 블로그에 필요한 데이터를 가지고 와 주어야 합니다.

• style.css

CSS를 분리하여 사용하기 위한 파일입니다. skin.html과 style.css는 스킨 편집란에서 바로 수정하여 결과를 확인할 수 있습니다.

• preview 파일들

스킨을 만들어서 배포하는 경우 미리보기의 형태로 보여줄 파일들입니다.

• images폴더

이외의 부수적인 영역의 파일들을 보관하기 위한 폴더입니다.

이 영역에 다양한 script, image, css 등을 추가하여 제작하는 스킨에 활용할 수 있습니다.

 

 

요구 능력 또는 필요한 사항

• index.xml을 규칙에 맞게 작성하여 스킨의 기본 정보들을 다룰 수 있어야 한다.
• skin.html 문서를 원하는 형식에 맞게 작성 또는 수정할 수 있어야 한다.
• style.css 문서를 원하는 형식에 맞게 작성 또는 수정할 수 있어야 한다.
• images폴더 안에 스킨에 필요한 추가적인 데이 터드를 삽입 및 활용할 수 있어야 한다.
• 블로그의 데이터를 가지고 와서 활용하기 위해서 치환자의 개념을 알고 적용할 수 있어야 한다.

 

치환자

예를 들어 블로그 안에 100개의 데이터가 있다면 이 데이터를 가지고 한 땀 한 땀 정적인 웹페이지를 만들지 않습니다. 

일정한 틀(스킨)을 만들고 그 틀 안에 필요한 데이터들을 찾아서 삽입해주는 과정이 필요합니다.

티스토리에서는 이 과정을 skin.html문서에 특정 키워드를 입력하면 블로그의 필요한 데이터를 추 출하로 변경해주는 치환의 형태를 제공해 줍니다.

이렇게 블로그의 데이터를 쉽게 추출할 수 있도록 제공해주는 키워드를 치환 자라고 합니다.

 

티스토리에서는 그룹 치환자와 값 치환자 2개의 형태로 치환자를 구분하고 사용할 수 있게 해 줍니다.

• 그룹 치환자 - 블로그의 데이터를 그룹핑한 키워드입니다.

예를 들어 카테고리 리스트에 대한 정보들이 있는 그룹 치환자 이름은 <s_list>입니다. 

따라서 카테고리 리스트에 대한 정보를 치환하고 싶은 영역에 <s_list></s_list>로 영역을 지정해 줍니다.

• 값 치환자 - 그룹핑된 데이터의 값

<s_list> 그룹 치환자 즉, 리스트 그룹에서는 다양한 값들이 존재하고 있습니다.

예를 들어 카테고리의 이름, 카테고리에 포함된 글의 총 개수, 카테고리의 설명 등....

이런 하나하나의 값들을 가지고 오기 위한 치환자를 값 치환 자라고 합니다.

 

사용 예시

간 단학 게 html로 치환자를 이용하여 스킨을 만든다고 할 때 예시를 작성하며 포스트를 마무리하겠습니다.

• 카테고리 리스트의 스킨을 만들 때

<!-- 스킨 예 -->

<s_list> <!-- 그룹 치환자 시작 -->
  <!-- 해당 그룹 치환자의 값치환자로 필요한 데이터들을 삽입 -->
  <div class="searchList default"> 
    <div <s_list_image>style="background-image:url('')"</s_list_image>>
      <h3>''에 해당되는 글 건</h3>
      <p></p>
    </div>
    <ol>
      <s_list_rep>
        <li>
          <span class="date"></span>
          <a href=""></a>
          <span class="cnt"></span>
          <s_list_rep_thumbnail>
            <img src="">
          </s_list_rep_thumbnail>
        </li>
      </s_list_rep>
    </ol>
  </div>
</s_list>  <!-- 그룹 치환자 종료 -->