티스토리 스킨 HTML 편집, 치환자 활용법 완벽 정리

티스토리 블로그를 운영하면서 스킨을 직접 만들거나 커스터마이징하고 싶다면, 티스토리 스킨 치환자에 대한 이해가 필수적입니다. 치환자는 티스토리 시스템의 내부 데이터를 자동으로 불러와 스킨의 HTML에 출력해주는 특수 태그로, 이 치환자들을 잘 활용하면 블로그의 메인, 글 목록, 단일 글, 사이드바 등 거의 모든 영역을 원하는 대로 자유롭게 조정할 수 있습니다.

특히, `<s_article_rep>`, `<s_index_article_rep>`, `<s_permalink_article_rep>`처럼 혼동하기 쉬운 태그들의 차이점을 명확히 이해하는 것이 티스토리 스킨 커스터마이징의 핵심입니다. 이 글에서는 전체 치환자 종류를 반복, 조건, 기본, 데이터 치환자로 구분하여 예시와 함께 상세히 정리해드리겠습니다.

티스토리 반복 치환자: 페이지별 핵심 태그 구분하기

반복 치환자는 글 목록, 태그, 카테고리 등 동일한 구조의 콘텐츠를 반복적으로 출력할 때 사용하는 태그입니다. 이 태그들은 어떤 페이지에 사용되는지에 따라 역할이 명확히 구분됩니다. 티스토리 스킨 치환자 중 가장 중요하게 구분해야 할 3가지 반복 치환자를 알아보겠습니다.

<s_article_rep>
  <a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a>
</s_article_rep>
	

<s_index_article_rep>
  <div class="main-item">[##_article_rep_title_##]</div>
</s_index_article_rep>
	

<s_permalink_article_rep>
  <div class="title"><$title></div>
  <div class="content"><$content></div>
</s_permalink_article_rep>
	

그 외 자주 쓰이는 티스토리 스킨 치환자는 아래 표와 같습니다.

티스토리 조건 치환자: 원하는 페이지에만 콘텐츠 표시하기

조건 치환자는 특정 페이지 조건이 충족될 때만 콘텐츠를 출력하도록 제어하는 논리적인 티스토리 치환자입니다. 예를 들어, 모바일 접속 시에만 나타나는 안내문이나 메인 페이지에만 보이는 배너 등을 만들 때 사용합니다. 조건 치환자는 `<s_if_조건명>`으로 시작해서 `<s_end_조건명>`으로 닫으며, `<s_else>`를 사용해 조건이 거짓일 때의 콘텐츠를 지정할 수도 있습니다.

티스토리 조건 치환자 (<s_if_permalink>, <s_if_category>, <s_if_tag> 등) 중 일부가 최근에 비공식적으로 작동하지 않거나, 제한적으로만 작동하는 현상이 보고되고 있습니다.

특히 2024년 하반기 이후 일부 사용자들 사이에서 조건 치환자가 전혀 동작하지 않는 경우가 발생하고 있으니 참고 바랍니다.

기본 치환자([##...##])와 데이터 치환자(<$...>) 사용법

이 두 치환자는 반복 치환자나 조건 치환자 블록 내부에서 실제 데이터를 출력하는 역할을 합니다. 기본 치환자는 `[##...##]` 형식으로, 간단한 데이터만 출력할 때 유용하며 주로 반복 치환자 내부에서 사용됩니다.

데이터 치환자는 `<$...>` 형태로, HTML 태그의 속성(attribute) 안에서도 자유롭게 사용할 수 있어 편리합니다. 이 치환자들은 주로 `<s_permalink_article_rep>` 내부에서 사용됩니다.

• `<$title>`: 글 제목
• `<$content>`: 본문 내용
• `<$date>`: 작성일
• `<$author>`: 작성자
• `<$url>`: 글의 URL
• `<$category>`: 카테고리 이름

티스토리 스킨 치환자: 핵심 사용법 요약

티스토리 스킨을 커스터마이징할 때 자주 발생하는 실수를 방지하기 위해 각 치환자의 역할을 명확히 구분하는 것이 중요합니다.

1. 메인 페이지 전용: `<s_index_article_rep>`를 사용하여 메인 페이지에만 독자적인 디자인을 적용할 수 있습니다.
2. 범용 글 목록: 메인 외의 모든 글 목록 페이지(카테고리, 검색 결과)에서는 `<s_article_rep>`를 사용하는 것이 효율적입니다.
3. 단일 글 페이지: 개별 글을 출력할 때는 `<s_permalink_article_rep>`와 데이터 치환자(예: `<$title>`)를 함께 사용합니다.
4. 데이터 출력: 반복 치환자 블록 안에서 글 제목이나 URL 같은 데이터를 출력하려면 기본 치환자(`[##...##]`)나 데이터 치환자(`<s_...>`)를 사용해야 합니다.
5. 조건에 따른 분기: 특정 페이지에서만 콘텐츠를 보여주려면 조건 치환자(`<s_if_...>`)를 활용해야 합니다.

자주 묻는 질문

이처럼 티스토리 스킨 치환자는 기능별로 명확하게 구분되어 있습니다. 각 페이지에 맞는 치환자를 적절히 사용하면 메인, 카테고리, 단일 글, 검색 결과 등 모든 페이지를 정교하게 설계할 수 있고, 디자인 유연성도 크게 향상됩니다. 오늘 정리된 내용을 바탕으로 자신만의 티스토리 스킨을 완성해 보시기 바랍니다.