티스토리 스킨 - 글 치환자(댓글, 공지사항, 보호글, 페이지)

티스토리 블로그를 시작하면서 처음에는 티스토리에서 제공되는 무료 스킨을 사용했다. 그러다 FastBoot 1.6.2 버전 스킨을 접하면서 FastBoot 스킨으로 변경하였고, 지금까지 사용중이다.

티스토리 시스템은 조금씩 변화가 있는데, FastBoot 스킨의 발전적인 변화는 없다. 그저 블로거들이 직접 오류를 수정하고, 포스팅한 글에 의존하면서 하루하루 조금씩 스킨을 수정하고 있는 실정이다.

티스토리 블로그가 어떤구조로 되어있는지 어떤 파일들이 있는지 모른채 시작했었다. 오류를 하나씩 수정하면서 어떤파일이 있는지 알게 되었고, html, css, js에 사용된 코드를 공부해야겠다는 생각이 들었다.

그래서 티스토리 블로그의 기본인 파일 구조부터 시작해서 티스토리 치환자에 대해 하나씩 알아보고 정리해보았다.

 

 

 

▶ 티스토리 스킨(글 치환자)
1. 댓글
2. 공지사항
3. 보호글
4. 페이지
5. 리스트 페이징

 

 

 

 

 

 

 

 

 

 

 

 

티스토리 스킨 - 글 치환자(댓글, 공지사항, 보호글, 페이지)

 

 

 

 

▷ 티스토리 블로그 robots.txt 확인 및 분석 : https://barista7.tistory.com/1150
▷ 티스토리 스킨 가이드 : https://tistory.github.io/document-tistory-skin/
▷ 티스토리 스킨 - 파일 구조, 스킨 정보 파일, 치환자 구조 : https://barista7.tistory.com/1159
▷ 티스토리 스킨 - 공통 치환자(공통, 홈 커버, 스킨 옵션) : https://barista7.tistory.com/1162
▷ 티스토리 스킨 - 컨텐츠 치환자(태그 클라우드, 방명록) : https://barista7.tistory.com/1179
▷ 티스토리 스킨 - 글 치환자(댓글, 공지사항, 보호글, 페이지) : https://barista7.tistory.com/1192
▷ 티스토리 스킨 - 글 치환자(구조, 최근공지, 최근글, 인기글, 댓글) : https://barista7.tistory.com/1203
▷ 티스토리 스킨 - 글 치환자(카테고리, 랜덤태그, 방문자수, 검색) : https://barista7.tistory.com/1237

 

=

 

 

 

 

 

 

 

 

 

 

 

 

 

글 치환자

 

 

▣ 글 치환자
▶ 글 정보

 

<s_article_rep>: 글 그룹 치환자
/1192: 블로그 글의 고유 주소
티스토리 스킨 - 글 치환자(댓글, 공지사항, 보호글, 페이지): 블로그 글의 제목
/category/B7%20%EB%B8%94%EB%A1%9C%EA%B7%B8/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC: 카테고리 링크
B7 블로그/티스토리: 카테고리 명
2019. 3. 30. 16:36: 글쓴 날짜/시간 (yyyy. m. d. HH:MM)
2019. 3. 30.: 글쓴 날짜 (yyyy. m. d.)
2019: 글쓴 세부시간 - 연도 (yyyy)
03: 글쓴 세부시간 - 월 (mm)
30: 글쓴 세부시간 - 일 (dd)
16: 글쓴 세부시간 - 시 (HH)
36: 글쓴 세부시간 - 분 (MM)
09: 글쓴 세부시간 - 초 (SS)
Barista7: 작성자 이름 (*팀블로그용 치환자)

                    



                                                    



            
티스토리 블로그를 시작하면서 처음에는 티스토리에서 제공되는 무료 스킨을 사용했다. 그러다 FastBoot 1.6.2 버전 스킨을 접하면서 FastBoot 스킨으로 변경하였고, 지금까지 사용중이다.

티스토리 시스템은 조금씩 변화가 있는데, FastBoot 스킨의 발전적인 변화는 없다. 그저 블로거들이 직접 오류를 수정하고, 포스팅한 글에 의존하면서 하루하루 조금씩 스킨을 수정하고 있는 실정이다.

티스토리 블로그가 어떤구조로 되어있는지 어떤 파일들이 있는지 모른채 시작했었다. 오류를 하나씩 수정하면서 어떤파일이 있는지 알게 되었고, html, css, js에 사용된 코드를 공부해야겠다는 생각이 들었다.

그래서 티스토리 블로그의 기본인 파일 구조부터 시작해서 티스토리 치환자에 대해 하나씩 알아보고 정리해보았다.
 
 
 
▶ 티스토리 스킨(글 치환자)
1. 댓글
2. 공지사항
3. 보호글
4. 페이지
5. 리스트 페이징
 
 
 
 




 
 




 
 
 
 
 
 
티스토리 스킨 - 글 치환자(댓글, 공지사항, 보호글, 페이지)
 
 


 
 
▷ 티스토리 블로그 robots.txt 확인 및 분석 : https://barista7.tistory.com/1150
▷ 티스토리 스킨 가이드 : https://tistory.github.io/document-tistory-skin/
▷ 티스토리 스킨 - 파일 구조, 스킨 정보 파일, 치환자 구조 : https://barista7.tistory.com/1159
▷ 티스토리 스킨 - 공통 치환자(공통, 홈 커버, 스킨 옵션) : https://barista7.tistory.com/1162
▷ 티스토리 스킨 - 컨텐츠 치환자(태그 클라우드, 방명록) : https://barista7.tistory.com/1179
▷ 티스토리 스킨 - 글 치환자(댓글, 공지사항, 보호글, 페이지) : https://barista7.tistory.com/1192
▷ 티스토리 스킨 - 글 치환자(구조, 최근공지, 최근글, 인기글, 댓글) : https://barista7.tistory.com/1203
▷ 티스토리 스킨 - 글 치환자(카테고리, 랜덤태그, 방문자수, 검색) : https://barista7.tistory.com/1237
 
=
 
 
 
 




 
 




 
 
 
 
 
 
 
글 치환자
 
 
▣ 글 치환자
▶ 글 정보
 
<s_article_rep>: 글 그룹 치환자
: 블로그 글의 고유 주소
: 블로그 글의 제목
: 카테고리 링크
: 카테고리 명
: 글쓴 날짜/시간 (yyyy. m. d. HH:MM)
: 글쓴 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 작성자 이름 (*팀블로그용 치환자)
: 블로그 본문 내용

<s_article_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
: 댓글을 열고 닫는 온클릭 이벤트

<s_rp_count>: 댓글의 갯수를 출력하는 영역
: 답글 수
 
<s_article_rep>
  <div class="titleWrap">
    <h2><a href=""></a></h2>
    <div class="category">
      <a href=""></a>
    </div>
    <div class="date"></div>
  </div>

  <div class="article">
    
  </div>
</s_article_rep>
 
 
▶ 관리기능
 
<s_ad_div> : 글 관리기능 그룹치환자 (관리 권한 있는 경우만 표시)
: 수정
: 수정 온클릭 이벤트
: 글의 현재 상태
: 상태 변경 온클릭 이벤트
: 이후 상태
: 트랙백 온클릭 이벤트
: 삭제 온클릭 이벤트
 
<s_ad_div>
    <div class="admin">
      <a href="">수정</a> :
      <a href="#" onclick="">수정(창으로)</a> |
      ()→<a href="#" onclick=""></a> |
      <a href="#" onclick="">관련글(트랙백)</a> |
      <a href="#" onclick="">삭제</a>
    </div>
  </s_ad_div>
 
 
 
▶ 태그
 
<s_tag_label>: 글과 관련된 태그가 출력되는 영역입니다.
: 태그 반복 출력

 <s_tag_label>
    <div class="tagTrail">
      <span class="tagText">TAG </span> 
    </div>
  </s_tag_label>
 
 
 
▶ 퍼머링크 / 인덱스
퍼머링크 페이지에서와 인덱스 페이지에서 표시될 내용을 구분할 수 있습니다.(퍼머링크 페이지/인덱스 페이지 영역 밖에서 사용되는 치환자는 둘 모두에서 표시됩니다)
 
1) 퍼머링크
 
<s_permalink_article_rep>: 퍼머링크 페이지일 때만 표시되는 영역입니다
(내부에서 사용하는 치환자는 <s_article_rep> 내부에서 사용하는 치환자와 동일합니다)
 
 
2) 인덱스
 
<s_index_article_rep>: 인덱스 페이지일 때만 표시되는 영역입니다
: 블로그 글의 고유 주소
: 블로그 글의 제목
: 카테고리 주소
: 카테고리 이름
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 작성자 이름
: 글 내용 요약

<s_article_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소

<s_rp_count>: 댓글의 갯수를 출력하는 영역
: 답글 수
 
<s_index_article_rep>
  <div class="list_content">
    <s_article_rep_thumbnail>
      <img src="">
    </s_article_rep_thumbnail>

    <a href="" class="link_post">
      <strong class="tit_post"></strong>
      <p class="txt_post"></p>
    </a>

    <div class="detail_info">
      <a href="" class="link_cate">
        
      </a>
      <span class="txt_bar"></span>
      
    </div>
  </div>
</s_index_article_rep>
 
 
 
▶ 카테고리의 다른 글
글이 속한 카테고리의 다른 글을 보여줄 수 있습니다.\ 카테고리에 속하지 않은 글에는 표시되지 않습니다.
 
<s_article_related>: 카테고리 글 더보기 영역
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 발행시간

<s_article_related_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
: 대표 이미지 썸네일 주소
 
<s_article_related>
  <div class="area_related">
    <strong class="tit_related">'' Related Articles</strong>
    <ul class="list_related">
      <s_article_related_rep>
        <li class="">
          <a href="" class="link_related">
            <s_article_related_rep_thumbnail>
              <span class="thumb_related">
                <img src="" class="img_related" alt="">
              </span>
            </s_article_related_rep_thumbnail>
            <span class="txt_related"></span>
            <span class="date_related"></span>
            <span class="frame_related"></span>
          </a>
        </li>
      </s_article_related_rep>
    </ul>
    <a href="" class="link_more">more</a>
  </div>
</s_article_related>
 
 
 
▶ 이전 글 / 다음 글
글의 이전 글과 다음 글을 보여줍니다. 페이징 치환자의 이전/다음 페이지 url과 동일한 글입니다.
 
<s_article_prev>: 이전 글 그룹치환자. 이전 글이 있는 경우 사용됩니다.
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 작성시간
<s_article_prev_thumbnail>: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
: 대표 이미지 썸네일 주소
 
<s_article_next>: 다음 글 그룹치환자. 다음 글이 있는 경우 사용됩니다.
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 작성시간
<s_article_next_thumbnail>: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
: 대표 이미지 썸네일 주소
 
 
 
 
 
 
글 치환자(댓글)
 
 
▣ 글 치환자(댓글)
▶ 댓글 그룹
 
<s_rp> : 댓글으로 접근시 이 영역 내부의 치환자가 출력됩니다.
 
<s_rp>
  <div class="comment">
    <h3>댓글을 달아 주세요 </h3>
    <div class="commentList">18-6-1 리스트 </div>
    <div class="commentWrite">18-6-2 글쓰기 </div>
  </div>
</s_rp>
 
 
 
▶ 입력 폼
 
<s_rp_input_form> : 댓글을 달기 위한 입력폼을 출력합니다
 : 댓글주소. 댓글들을 구분하기위해 사용합니다. 한 화면에 있는 댓글들은 각각 고유의 값을 가지고 있습니다.
 : 댓글 입력 박스 이름
 : 댓글 입력 온클릭 이벤트

<s_rp_member> : 로그인을 하지 않았거나 블로그 소유자가 아닌경우 보여지는 영역
 : 비밀글 체크박스 이름

<s_rp_guest> : 로그인을 하지 않았을경우 보여지는 영역
 : 이름입력 박스 이름
 : 이름
 : 비밀번호 입력 박스 이름
 : 비밀번호
 : 홈페이지 입력 박스 이름
 : 홈페이지
 
<s_rp_input_form>
  <div class="commentWrite">
    <s_rp_member>
      <s_rp_guest>
        <p>
          <input type="text" name="" value="" />
          <label for="name"> : 이름 </label>
        </p>
        <p>
          <input type="password" maxlength="8" name="" value="" />블로그 관리자일 경우 password field에 미리 비밀번호를 넣어놓기 위해 만들어 놓았던 치환자였으나, 지금은 사용되지 않음.. (현재는 블로그 관리자일 경우 password field가 나타나지
          않음.)
          <label for="password"> : 패스워드 </label>
        </p>
        <p>
          <input type="text" class="homepage" name="" value="" />
          <label for="homepage"> : 홈페이지 </label>
        </p>
      </s_rp_guest>
      <p class="secretWrap">
        <input type="checkbox" name="" class="checkbox" />
        <label for="secret"> 비밀글 </label>
      </p>
    </s_rp_member>
    <p>
      <textarea name="" rows="10" cols="50"></textarea>
    </p>
    <p>
      <input type="submit" value="댓글 달기" onclick="" />
    </p>
  </div>
</s_rp_input_form>
 
 
▶ 댓글 리스트 구조
 
<s_rp_container> : 등록된 '댓글' 리스트를 출력할 영역입니다
<s_rp_rep> : '댓글' 리스트의 반복열입니다
<s_rp2_container> : '댓글'의 댓글 리스트를 출력할 영역입니다.
<s_rp2_rep> : '댓글' 댓글 리스트의 반복열입니다
 
 
▶ 댓글 내용 (rep 내부)
 
 : 댓글의 고유 ID
 : 댓글의 글의 목록에 반복되는 스타일 + admin 아이디 앞에 아이콘
 : 글쓴사람 이름
 : 댓글작성자의 프로필 이미지
 : 글쓴 날짜
 : 글 내용
 : 댓글 주소
 : 답글 삭제 온클릭 이벤트
 : 답글 수정 온클릭 이벤트
 
<div class="commentList">
  <s_rp_container>
    <ol>
      <s_rp_rep>
        <li id=''>
          <div class="">
            <span class="image"></span>
            <span class="name"></span>
            <span class="date"> </span>
            <span class="control">
              <a href="" class="address">&nbsp;
                <span>댓글주소</span>
              </a>
              <a href="#" onclick="" class="modify">&nbsp;
                <span>수정/삭제</span>
              </a>
              <a href="#" onclick="" class="write">&nbsp;
                <span>댓글쓰기</span>
              </a>
            </span>
            <p></p>
          </div>
          <s_rp2_container>
            <ul>
              <s_rp2_rep>
                <li id=''>
                  <div class="">
                    <span class="image"></span>
                    <span class="name"></span>
                    <span class="date"> </span>
                    <span class="control">
                      <a href="" class="address">&nbsp;
                        <span>댓글주소</span>
                      </a>
                      <a href="#" onclick="" class="modify">&nbsp;
                        <span>수정/삭제</span>
                      </a>
                    </span>
                    <p></p>
                  </div>
                </li>
              </s_rp2_rep>
            </ul>
          </s_rp2_container>
        </li>
      </s_rp_rep>
    </ol>
  </s_rp_container>
</div>
 
 
 
 
 
 
글 치환자(공지사항)
 
 
▶ 공지사항 치환자
 
<s_notice_rep>: 공지사항 그룹 치환자
 : '공지사항'에 등록된 글의 고유 주소
 : 글 제목
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
 : 본문 내용
 : 작성자 이름 (*팀블로그용 치환자)

<s_notice_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
 
<s_notice_rep>
  <div class="entryNotice">
    <div class="titleWrap">
      <h2><a href=""></a></h2>
      <span class="date"> </span>
    </div>
    <div class="article">
      
    </div>
  </div>
</s_notice_rep>
 
 
 
▶ 퍼머링크 / 인덱스
퍼머링크 페이지에서와 인덱스 페이지에서 표시될 내용을 구분할 수 있습니다.\ (퍼머링크 페이지/인덱스 페이지 영역 밖에서 사용되는 치환자는 둘 모두에서 표시됩니다)
 
1) 퍼머링크
 
<s_permalink_article_rep>: 퍼머링크 페이지일 때만 표시되는 영역입니다
내부에서 사용하는 치환자는 <s_article_rep> 내부에서 사용하는 치환자와 동일합니다)
 
 
2) 인덱스
 
<s_index_article_rep>: 인덱스 페이지일 때만 표시되는 영역입니다
 : '공지사항'에 등록된 글의 고유 주소
 : 글 제목
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
 : 본문 내용
 : 작성자 이름 (*팀블로그용 치환자)
: 글 내용 일부

<s_notice_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
 
<s_index_article_rep>
  <div class="list_content">
    <s_notice_rep_thumbnail>
      <img src="">
    </s_notice_rep_thumbnail>

    <a href="" class="link_post">
      <strong class="tit_post"></strong>
      <p class="txt_post"></p>
    </a>

    <div class="detail_info">
      <a href="" class="link_cate">
        
      </a>
      <span class="txt_bar"></span>
      
    </div>
  </div>
</s_index_article_rep>
 
=
 
 
 
 




 
 




 
 
 
 
 
 
 
글 치환자(보호글)
 
 
▶ 보호글 치환자
 
<s_article_protected>: 보호글 그룹치환자
: 보호글의 고유 주소
: 보호글의 제목
: 카테고리 링크
: 카테고리 명
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 보호글의 비밀번호 텍스트 박스의 Id값(label 사용 용도)
: 보호글의 비밀번호를 입력하고 엔터키나 확인버튼을 눌렀을 때 실행될 자바스크립트 코드가 들어갑니다.
: 작성자 이름 (*팀블로그용 치환자)
 
<s_article_protected>
  <div class="entryProtected">
    <h2><a href=""></a></h2>
    <span class="date"></span>
    <p>보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.</p>
    <p>
      <label for="">비밀번호 ::</label>
      <input type="password" maxlength="16" id="" name="" value="" onkeydown="if (event.keyCode == 13)" />
      <input type="button" class="submit" value="submit" onclick="" />
    </p>
  </div>
</s_article_protected>
 
 
 
 
 
 
글 치환자(페이지)
 
 
▶ 페이지 치환자
 
<s_page_rep>: '페이지'가 출력되는 영역입니다.\ (스킨에 페이지치환자가 존재하지 않는 경우 글 치환자에 페이지가 표시됩니다.)
: 고유 주소
: 제목
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 본문 내용
: 작성자 이름 (*팀블로그용 치환자)
 
<s_page_rep>
  <div>
    <h2><a href=""></a></h2>
    <div>
      
    </div>
  </div>
</s_page_rep>
 
 
 
 
 
 
글 치환자(리스트)
 
 
▶ 리스트 치환자
리스트 치환자는 카테고리, 검색, 태그의 글 리스트를 표시합니다.
 
 
▶ 리스트 그룹
 
<s_list>: 리스트 그룹 치환자
: 카테고리 이름, 검색어, 태그명
: 글의 총 개수
: 리스트 설명 (카테고리인 경우 카테고리 설명, 그외 블로그 설명)
: 리스트 스타일 값 (class attribute로 활용 가능)
<s_list_image>: 리스트 대표 이미지가 있는 경우 동작
: 리스트 대표 이미지 (카테고리인 경우 카테고리 대표이미지, 그외 블로그 대표이미지)
 
 
▶ 아이템 반복 그룹
 
<s_list_empty>: 리스트에 글이 없는 경우 보이는 영역

<s_list_rep>: 리스트 아이템이 반복되는 영역
: 글의 고유 주소
: 글 작성 날짜 (yyyy.mm.dd)
: 글 작성 세부시간 - 연도 (yyyy)
: 글 작성 세부시간 - 월 (mm)
: 글 작성 세부시간 - 일 (dd)
: 글 작성 세부시간 - 시 (HH)
: 글 작성 세부시간 - 분 (MM)
: 글 작성 세부시간 - 초 (SS)
: 글의 제목
: 글이 속한 카테고리 이름
: 글이 속한 카테고리 글 목록 url
: 댓글 수
: 작성자 이름
: 글 내용 요약
: 대표 이미지 원본 주소

<s_list_rep_thumbnail>: 대표 이미지가 있는 경우 치환
: 대표 이미지
 
 
 
▶ 리스트 스타일
리스트 스타일을 사용하기 위해서는 스킨 정보 파일에 리스트 스타일 아이템을 정의해야 합니다. 리스트 스타일을 정의하면 카테고리 관리화면에서 리스트 스타일이 표시되고 사용자가 선택할 수 있습니다. 이를 사용하여 카테고리별로 다른 스타일을 적용할 때 사용할 수 있습니다.
 
<default>
    <liststyle>default liststyle 값</liststyle>
</default>
 
<liststyle>
  <item>
    <label>표시할 이름</label>
    <value>사용될 값</value>
  </item>
</liststyle>
 
 
▷ 사용 예
 
<!-- 스킨 예 -->
<s_list>
  <div class="searchList ">
    <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>
 
<!-- 변환 예 -->
<div class="searchList grid">
  <div style="background-image:url('https://sample.com/image.jpg')">
    <h3>'업데이트 소식'에 해당되는 글 2건</h3>
    <p>새롭게 업데이트되는 내용을 알려드립니다.</p>
  </div>
  <ol>
    <li>
      <span class="date">2016.01.25</span>
      <a href="/2289">1월 초대장이 배포되었습니다.</a>
      <span class="cnt">8</span>
      <img src="https://s1.daumcdn.net/cfile/tistory/1234">
    </li>
    <li>
      <span class="date">2015.12.22</span>
      <a href="/2283">12월 초대장이 배포되었습니다.</a>
      <span class="cnt">19</span>
      <img src="https://s1.daumcdn.net/cfile/tistory/5678">
    </li>
  </ol>
</div>
 
 
 
▶ 페이징
리스트, 글, 방명록에서 공통으로 사용하는 페이징 치환자
 
<s_paging>: 페이지가 출력되는 영역입니다
<s_paging_rep>: 페이지가 반복 출력됩니다
: 이전 페이지 링크
: 페이지 링크
: 페이지 번호
: 다음 페이지 링크
 
<s_paging>
  <div class="paging">
    <a  class="">◀ PREV </a>
    <span class="numbox">
      <s_paging_rep>
        <a  class="num">[]</a>
      </s_paging_rep>
    </span>
    <a  class="">NEXT ▶</a>
  </div>
</s_paging>
 
 
 
[ 사진 출처 ] 티스토리 가이드 캡쳐
 
 
 
 
 
 
 
지금까지 티스토리 스킨 글 치환자(댓글, 공지사항, 보호글, 페이지)에 대해 알아보았다.
 
 
 
 
도움이 되셨다면 로그인 없이 가능한
아래 하트♥공감 버튼을 꾹 눌러주세요! 
 
 
 
 

 



 
 
 
                    
        

  

    
반응형
    
    
    
  

        

                            
        









        

                            
        
 


        






: 블로그 본문 내용

<s_article_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FCu4i5%2FbtrZV8kNvUj%2FXC3iQTlLKRhnaJ2OIGAjS1%2Fimg.jpg: 대표 이미지 썸네일 주소
https://blog.kakaocdn.net/dn/Cu4i5/btrZV8kNvUj/XC3iQTlLKRhnaJ2OIGAjS1/img.jpg: 대표 이미지 원본 주소
: 댓글을 열고 닫는 온클릭 이벤트

<s_rp_count>: 댓글의 갯수를 출력하는 영역
0: 답글 수

 

<s_article_rep>
  <div class="titleWrap">
    <h2><a href="/1192">티스토리 스킨 - 글 치환자(댓글, 공지사항, 보호글, 페이지)</a></h2>
    <div class="category">
      <a href="/category/B7%20%EB%B8%94%EB%A1%9C%EA%B7%B8/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC">B7 블로그/티스토리</a>
    </div>
    <div class="date">2019. 3. 30. 16:36</div>
  </div>

  <div class="article">
    
                    



                                                    



            
티스토리 블로그를 시작하면서 처음에는 티스토리에서 제공되는 무료 스킨을 사용했다. 그러다 FastBoot 1.6.2 버전 스킨을 접하면서 FastBoot 스킨으로 변경하였고, 지금까지 사용중이다.

티스토리 시스템은 조금씩 변화가 있는데, FastBoot 스킨의 발전적인 변화는 없다. 그저 블로거들이 직접 오류를 수정하고, 포스팅한 글에 의존하면서 하루하루 조금씩 스킨을 수정하고 있는 실정이다.

티스토리 블로그가 어떤구조로 되어있는지 어떤 파일들이 있는지 모른채 시작했었다. 오류를 하나씩 수정하면서 어떤파일이 있는지 알게 되었고, html, css, js에 사용된 코드를 공부해야겠다는 생각이 들었다.

그래서 티스토리 블로그의 기본인 파일 구조부터 시작해서 티스토리 치환자에 대해 하나씩 알아보고 정리해보았다.
 
 
 
▶ 티스토리 스킨(글 치환자)
1. 댓글
2. 공지사항
3. 보호글
4. 페이지
5. 리스트 페이징
 
 
 
 




 
 




 
 
 
 
 
 
티스토리 스킨 - 글 치환자(댓글, 공지사항, 보호글, 페이지)
 
 


 
 
▷ 티스토리 블로그 robots.txt 확인 및 분석 : https://barista7.tistory.com/1150
▷ 티스토리 스킨 가이드 : https://tistory.github.io/document-tistory-skin/
▷ 티스토리 스킨 - 파일 구조, 스킨 정보 파일, 치환자 구조 : https://barista7.tistory.com/1159
▷ 티스토리 스킨 - 공통 치환자(공통, 홈 커버, 스킨 옵션) : https://barista7.tistory.com/1162
▷ 티스토리 스킨 - 컨텐츠 치환자(태그 클라우드, 방명록) : https://barista7.tistory.com/1179
▷ 티스토리 스킨 - 글 치환자(댓글, 공지사항, 보호글, 페이지) : https://barista7.tistory.com/1192
▷ 티스토리 스킨 - 글 치환자(구조, 최근공지, 최근글, 인기글, 댓글) : https://barista7.tistory.com/1203
▷ 티스토리 스킨 - 글 치환자(카테고리, 랜덤태그, 방문자수, 검색) : https://barista7.tistory.com/1237
 
=
 
 
 
 




 
 




 
 
 
 
 
 
 
글 치환자
 
 
▣ 글 치환자
▶ 글 정보
 
<s_article_rep>: 글 그룹 치환자
: 블로그 글의 고유 주소
: 블로그 글의 제목
: 카테고리 링크
: 카테고리 명
: 글쓴 날짜/시간 (yyyy. m. d. HH:MM)
: 글쓴 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 작성자 이름 (*팀블로그용 치환자)
: 블로그 본문 내용

<s_article_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
: 댓글을 열고 닫는 온클릭 이벤트

<s_rp_count>: 댓글의 갯수를 출력하는 영역
: 답글 수
 
<s_article_rep>
  <div class="titleWrap">
    <h2><a href=""></a></h2>
    <div class="category">
      <a href=""></a>
    </div>
    <div class="date"></div>
  </div>

  <div class="article">
    
  </div>
</s_article_rep>
 
 
▶ 관리기능
 
<s_ad_div> : 글 관리기능 그룹치환자 (관리 권한 있는 경우만 표시)
: 수정
: 수정 온클릭 이벤트
: 글의 현재 상태
: 상태 변경 온클릭 이벤트
: 이후 상태
: 트랙백 온클릭 이벤트
: 삭제 온클릭 이벤트
 
<s_ad_div>
    <div class="admin">
      <a href="">수정</a> :
      <a href="#" onclick="">수정(창으로)</a> |
      ()→<a href="#" onclick=""></a> |
      <a href="#" onclick="">관련글(트랙백)</a> |
      <a href="#" onclick="">삭제</a>
    </div>
  </s_ad_div>
 
 
 
▶ 태그
 
<s_tag_label>: 글과 관련된 태그가 출력되는 영역입니다.
: 태그 반복 출력

 <s_tag_label>
    <div class="tagTrail">
      <span class="tagText">TAG </span> 
    </div>
  </s_tag_label>
 
 
 
▶ 퍼머링크 / 인덱스
퍼머링크 페이지에서와 인덱스 페이지에서 표시될 내용을 구분할 수 있습니다.(퍼머링크 페이지/인덱스 페이지 영역 밖에서 사용되는 치환자는 둘 모두에서 표시됩니다)
 
1) 퍼머링크
 
<s_permalink_article_rep>: 퍼머링크 페이지일 때만 표시되는 영역입니다
(내부에서 사용하는 치환자는 <s_article_rep> 내부에서 사용하는 치환자와 동일합니다)
 
 
2) 인덱스
 
<s_index_article_rep>: 인덱스 페이지일 때만 표시되는 영역입니다
: 블로그 글의 고유 주소
: 블로그 글의 제목
: 카테고리 주소
: 카테고리 이름
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 작성자 이름
: 글 내용 요약

<s_article_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소

<s_rp_count>: 댓글의 갯수를 출력하는 영역
: 답글 수
 
<s_index_article_rep>
  <div class="list_content">
    <s_article_rep_thumbnail>
      <img src="">
    </s_article_rep_thumbnail>

    <a href="" class="link_post">
      <strong class="tit_post"></strong>
      <p class="txt_post"></p>
    </a>

    <div class="detail_info">
      <a href="" class="link_cate">
        
      </a>
      <span class="txt_bar"></span>
      
    </div>
  </div>
</s_index_article_rep>
 
 
 
▶ 카테고리의 다른 글
글이 속한 카테고리의 다른 글을 보여줄 수 있습니다.\ 카테고리에 속하지 않은 글에는 표시되지 않습니다.
 
<s_article_related>: 카테고리 글 더보기 영역
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 발행시간

<s_article_related_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
: 대표 이미지 썸네일 주소
 
<s_article_related>
  <div class="area_related">
    <strong class="tit_related">'' Related Articles</strong>
    <ul class="list_related">
      <s_article_related_rep>
        <li class="">
          <a href="" class="link_related">
            <s_article_related_rep_thumbnail>
              <span class="thumb_related">
                <img src="" class="img_related" alt="">
              </span>
            </s_article_related_rep_thumbnail>
            <span class="txt_related"></span>
            <span class="date_related"></span>
            <span class="frame_related"></span>
          </a>
        </li>
      </s_article_related_rep>
    </ul>
    <a href="" class="link_more">more</a>
  </div>
</s_article_related>
 
 
 
▶ 이전 글 / 다음 글
글의 이전 글과 다음 글을 보여줍니다. 페이징 치환자의 이전/다음 페이지 url과 동일한 글입니다.
 
<s_article_prev>: 이전 글 그룹치환자. 이전 글이 있는 경우 사용됩니다.
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 작성시간
<s_article_prev_thumbnail>: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
: 대표 이미지 썸네일 주소
 
<s_article_next>: 다음 글 그룹치환자. 다음 글이 있는 경우 사용됩니다.
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 작성시간
<s_article_next_thumbnail>: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
: 대표 이미지 썸네일 주소
 
 
 
 
 
 
글 치환자(댓글)
 
 
▣ 글 치환자(댓글)
▶ 댓글 그룹
 
<s_rp> : 댓글으로 접근시 이 영역 내부의 치환자가 출력됩니다.
 
<s_rp>
  <div class="comment">
    <h3>댓글을 달아 주세요 </h3>
    <div class="commentList">18-6-1 리스트 </div>
    <div class="commentWrite">18-6-2 글쓰기 </div>
  </div>
</s_rp>
 
 
 
▶ 입력 폼
 
<s_rp_input_form> : 댓글을 달기 위한 입력폼을 출력합니다
 : 댓글주소. 댓글들을 구분하기위해 사용합니다. 한 화면에 있는 댓글들은 각각 고유의 값을 가지고 있습니다.
 : 댓글 입력 박스 이름
 : 댓글 입력 온클릭 이벤트

<s_rp_member> : 로그인을 하지 않았거나 블로그 소유자가 아닌경우 보여지는 영역
 : 비밀글 체크박스 이름

<s_rp_guest> : 로그인을 하지 않았을경우 보여지는 영역
 : 이름입력 박스 이름
 : 이름
 : 비밀번호 입력 박스 이름
 : 비밀번호
 : 홈페이지 입력 박스 이름
 : 홈페이지
 
<s_rp_input_form>
  <div class="commentWrite">
    <s_rp_member>
      <s_rp_guest>
        <p>
          <input type="text" name="" value="" />
          <label for="name"> : 이름 </label>
        </p>
        <p>
          <input type="password" maxlength="8" name="" value="" />블로그 관리자일 경우 password field에 미리 비밀번호를 넣어놓기 위해 만들어 놓았던 치환자였으나, 지금은 사용되지 않음.. (현재는 블로그 관리자일 경우 password field가 나타나지
          않음.)
          <label for="password"> : 패스워드 </label>
        </p>
        <p>
          <input type="text" class="homepage" name="" value="" />
          <label for="homepage"> : 홈페이지 </label>
        </p>
      </s_rp_guest>
      <p class="secretWrap">
        <input type="checkbox" name="" class="checkbox" />
        <label for="secret"> 비밀글 </label>
      </p>
    </s_rp_member>
    <p>
      <textarea name="" rows="10" cols="50"></textarea>
    </p>
    <p>
      <input type="submit" value="댓글 달기" onclick="" />
    </p>
  </div>
</s_rp_input_form>
 
 
▶ 댓글 리스트 구조
 
<s_rp_container> : 등록된 '댓글' 리스트를 출력할 영역입니다
<s_rp_rep> : '댓글' 리스트의 반복열입니다
<s_rp2_container> : '댓글'의 댓글 리스트를 출력할 영역입니다.
<s_rp2_rep> : '댓글' 댓글 리스트의 반복열입니다
 
 
▶ 댓글 내용 (rep 내부)
 
 : 댓글의 고유 ID
 : 댓글의 글의 목록에 반복되는 스타일 + admin 아이디 앞에 아이콘
 : 글쓴사람 이름
 : 댓글작성자의 프로필 이미지
 : 글쓴 날짜
 : 글 내용
 : 댓글 주소
 : 답글 삭제 온클릭 이벤트
 : 답글 수정 온클릭 이벤트
 
<div class="commentList">
  <s_rp_container>
    <ol>
      <s_rp_rep>
        <li id=''>
          <div class="">
            <span class="image"></span>
            <span class="name"></span>
            <span class="date"> </span>
            <span class="control">
              <a href="" class="address">&nbsp;
                <span>댓글주소</span>
              </a>
              <a href="#" onclick="" class="modify">&nbsp;
                <span>수정/삭제</span>
              </a>
              <a href="#" onclick="" class="write">&nbsp;
                <span>댓글쓰기</span>
              </a>
            </span>
            <p></p>
          </div>
          <s_rp2_container>
            <ul>
              <s_rp2_rep>
                <li id=''>
                  <div class="">
                    <span class="image"></span>
                    <span class="name"></span>
                    <span class="date"> </span>
                    <span class="control">
                      <a href="" class="address">&nbsp;
                        <span>댓글주소</span>
                      </a>
                      <a href="#" onclick="" class="modify">&nbsp;
                        <span>수정/삭제</span>
                      </a>
                    </span>
                    <p></p>
                  </div>
                </li>
              </s_rp2_rep>
            </ul>
          </s_rp2_container>
        </li>
      </s_rp_rep>
    </ol>
  </s_rp_container>
</div>
 
 
 
 
 
 
글 치환자(공지사항)
 
 
▶ 공지사항 치환자
 
<s_notice_rep>: 공지사항 그룹 치환자
 : '공지사항'에 등록된 글의 고유 주소
 : 글 제목
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
 : 본문 내용
 : 작성자 이름 (*팀블로그용 치환자)

<s_notice_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
 
<s_notice_rep>
  <div class="entryNotice">
    <div class="titleWrap">
      <h2><a href=""></a></h2>
      <span class="date"> </span>
    </div>
    <div class="article">
      
    </div>
  </div>
</s_notice_rep>
 
 
 
▶ 퍼머링크 / 인덱스
퍼머링크 페이지에서와 인덱스 페이지에서 표시될 내용을 구분할 수 있습니다.\ (퍼머링크 페이지/인덱스 페이지 영역 밖에서 사용되는 치환자는 둘 모두에서 표시됩니다)
 
1) 퍼머링크
 
<s_permalink_article_rep>: 퍼머링크 페이지일 때만 표시되는 영역입니다
내부에서 사용하는 치환자는 <s_article_rep> 내부에서 사용하는 치환자와 동일합니다)
 
 
2) 인덱스
 
<s_index_article_rep>: 인덱스 페이지일 때만 표시되는 영역입니다
 : '공지사항'에 등록된 글의 고유 주소
 : 글 제목
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
 : 본문 내용
 : 작성자 이름 (*팀블로그용 치환자)
: 글 내용 일부

<s_notice_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
 
<s_index_article_rep>
  <div class="list_content">
    <s_notice_rep_thumbnail>
      <img src="">
    </s_notice_rep_thumbnail>

    <a href="" class="link_post">
      <strong class="tit_post"></strong>
      <p class="txt_post"></p>
    </a>

    <div class="detail_info">
      <a href="" class="link_cate">
        
      </a>
      <span class="txt_bar"></span>
      
    </div>
  </div>
</s_index_article_rep>
 
=
 
 
 
 




 
 




 
 
 
 
 
 
 
글 치환자(보호글)
 
 
▶ 보호글 치환자
 
<s_article_protected>: 보호글 그룹치환자
: 보호글의 고유 주소
: 보호글의 제목
: 카테고리 링크
: 카테고리 명
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 보호글의 비밀번호 텍스트 박스의 Id값(label 사용 용도)
: 보호글의 비밀번호를 입력하고 엔터키나 확인버튼을 눌렀을 때 실행될 자바스크립트 코드가 들어갑니다.
: 작성자 이름 (*팀블로그용 치환자)
 
<s_article_protected>
  <div class="entryProtected">
    <h2><a href=""></a></h2>
    <span class="date"></span>
    <p>보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.</p>
    <p>
      <label for="">비밀번호 ::</label>
      <input type="password" maxlength="16" id="" name="" value="" onkeydown="if (event.keyCode == 13)" />
      <input type="button" class="submit" value="submit" onclick="" />
    </p>
  </div>
</s_article_protected>
 
 
 
 
 
 
글 치환자(페이지)
 
 
▶ 페이지 치환자
 
<s_page_rep>: '페이지'가 출력되는 영역입니다.\ (스킨에 페이지치환자가 존재하지 않는 경우 글 치환자에 페이지가 표시됩니다.)
: 고유 주소
: 제목
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 본문 내용
: 작성자 이름 (*팀블로그용 치환자)
 
<s_page_rep>
  <div>
    <h2><a href=""></a></h2>
    <div>
      
    </div>
  </div>
</s_page_rep>
 
 
 
 
 
 
글 치환자(리스트)
 
 
▶ 리스트 치환자
리스트 치환자는 카테고리, 검색, 태그의 글 리스트를 표시합니다.
 
 
▶ 리스트 그룹
 
<s_list>: 리스트 그룹 치환자
: 카테고리 이름, 검색어, 태그명
: 글의 총 개수
: 리스트 설명 (카테고리인 경우 카테고리 설명, 그외 블로그 설명)
: 리스트 스타일 값 (class attribute로 활용 가능)
<s_list_image>: 리스트 대표 이미지가 있는 경우 동작
: 리스트 대표 이미지 (카테고리인 경우 카테고리 대표이미지, 그외 블로그 대표이미지)
 
 
▶ 아이템 반복 그룹
 
<s_list_empty>: 리스트에 글이 없는 경우 보이는 영역

<s_list_rep>: 리스트 아이템이 반복되는 영역
: 글의 고유 주소
: 글 작성 날짜 (yyyy.mm.dd)
: 글 작성 세부시간 - 연도 (yyyy)
: 글 작성 세부시간 - 월 (mm)
: 글 작성 세부시간 - 일 (dd)
: 글 작성 세부시간 - 시 (HH)
: 글 작성 세부시간 - 분 (MM)
: 글 작성 세부시간 - 초 (SS)
: 글의 제목
: 글이 속한 카테고리 이름
: 글이 속한 카테고리 글 목록 url
: 댓글 수
: 작성자 이름
: 글 내용 요약
: 대표 이미지 원본 주소

<s_list_rep_thumbnail>: 대표 이미지가 있는 경우 치환
: 대표 이미지
 
 
 
▶ 리스트 스타일
리스트 스타일을 사용하기 위해서는 스킨 정보 파일에 리스트 스타일 아이템을 정의해야 합니다. 리스트 스타일을 정의하면 카테고리 관리화면에서 리스트 스타일이 표시되고 사용자가 선택할 수 있습니다. 이를 사용하여 카테고리별로 다른 스타일을 적용할 때 사용할 수 있습니다.
 
<default>
    <liststyle>default liststyle 값</liststyle>
</default>
 
<liststyle>
  <item>
    <label>표시할 이름</label>
    <value>사용될 값</value>
  </item>
</liststyle>
 
 
▷ 사용 예
 
<!-- 스킨 예 -->
<s_list>
  <div class="searchList ">
    <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>
 
<!-- 변환 예 -->
<div class="searchList grid">
  <div style="background-image:url('https://sample.com/image.jpg')">
    <h3>'업데이트 소식'에 해당되는 글 2건</h3>
    <p>새롭게 업데이트되는 내용을 알려드립니다.</p>
  </div>
  <ol>
    <li>
      <span class="date">2016.01.25</span>
      <a href="/2289">1월 초대장이 배포되었습니다.</a>
      <span class="cnt">8</span>
      <img src="https://s1.daumcdn.net/cfile/tistory/1234">
    </li>
    <li>
      <span class="date">2015.12.22</span>
      <a href="/2283">12월 초대장이 배포되었습니다.</a>
      <span class="cnt">19</span>
      <img src="https://s1.daumcdn.net/cfile/tistory/5678">
    </li>
  </ol>
</div>
 
 
 
▶ 페이징
리스트, 글, 방명록에서 공통으로 사용하는 페이징 치환자
 
<s_paging>: 페이지가 출력되는 영역입니다
<s_paging_rep>: 페이지가 반복 출력됩니다
: 이전 페이지 링크
: 페이지 링크
: 페이지 번호
: 다음 페이지 링크
 
<s_paging>
  <div class="paging">
    <a  class="">◀ PREV </a>
    <span class="numbox">
      <s_paging_rep>
        <a  class="num">[]</a>
      </s_paging_rep>
    </span>
    <a  class="">NEXT ▶</a>
  </div>
</s_paging>
 
 
 
[ 사진 출처 ] 티스토리 가이드 캡쳐
 
 
 
 
 
 
 
지금까지 티스토리 스킨 글 치환자(댓글, 공지사항, 보호글, 페이지)에 대해 알아보았다.
 
 
 
 
도움이 되셨다면 로그인 없이 가능한
아래 하트♥공감 버튼을 꾹 눌러주세요! 
 
 
 
 

 



 
 
 
                    
        

  

    
반응형
    
    
    
  

        

                            
        









        

                            
        
 


        







  </div>
</s_article_rep>

 

 

▶ 관리기능

 

<s_ad_div> : 글 관리기능 그룹치환자 (관리 권한 있는 경우만 표시)
: 수정
: 수정 온클릭 이벤트
: 글의 현재 상태
: 상태 변경 온클릭 이벤트
: 이후 상태
: 트랙백 온클릭 이벤트
: 삭제 온클릭 이벤트

 

<s_ad_div>
    <div class="admin">
      <a href="">수정</a> :
      <a href="#" onclick="">수정(창으로)</a> |
      ()→<a href="#" onclick=""></a> |
      <a href="#" onclick="">관련글(트랙백)</a> |
      <a href="#" onclick="">삭제</a>
    </div>
  </s_ad_div>

 

 

 

▶ 태그

 

<s_tag_label>: 글과 관련된 태그가 출력되는 영역입니다.
: 태그 반복 출력

 <s_tag_label>
    <div class="tagTrail">
      <span class="tagText">TAG </span> 
    </div>
  </s_tag_label>

 

 

 

▶ 퍼머링크 / 인덱스
퍼머링크 페이지에서와 인덱스 페이지에서 표시될 내용을 구분할 수 있습니다.(퍼머링크 페이지/인덱스 페이지 영역 밖에서 사용되는 치환자는 둘 모두에서 표시됩니다)

 

1) 퍼머링크

 

<s_permalink_article_rep>: 퍼머링크 페이지일 때만 표시되는 영역입니다
(내부에서 사용하는 치환자는 <s_article_rep> 내부에서 사용하는 치환자와 동일합니다)

 

 

2) 인덱스

 

<s_index_article_rep>: 인덱스 페이지일 때만 표시되는 영역입니다
/1192: 블로그 글의 고유 주소
티스토리 스킨 - 글 치환자(댓글, 공지사항, 보호글, 페이지): 블로그 글의 제목
/category/B7%20%EB%B8%94%EB%A1%9C%EA%B7%B8/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC: 카테고리 주소
B7 블로그/티스토리: 카테고리 이름
2019. 3. 30. 16:36: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
2019. 3. 30.: 글 발행 날짜 (yyyy. m. d.)
2019: 글쓴 세부시간 - 연도 (yyyy)
03: 글쓴 세부시간 - 월 (mm)
30: 글쓴 세부시간 - 일 (dd)
16: 글쓴 세부시간 - 시 (HH)
36: 글쓴 세부시간 - 분 (MM)
09: 글쓴 세부시간 - 초 (SS)
Barista7: 작성자 이름
티스토리 블로그를 시작하면서 처음에는 티스토리에서 제공되는 무료 스킨을 사용했다. 그러다 FastBoot 1.6.2 버전 스킨을 접하면서 FastBoot 스킨으로 변경하였고, 지금까지 사용중이다. 티스토리 시스템은 조금씩 변화가 있는데, FastBoot 스킨의 발전적인 변화는 없다. 그저 블로거들이 직접 오류를 수정하고, 포스팅한 글에 의존하면서 하루하루 조금씩 스킨을 수정하고 있는 실정이다. 티스토리 블로그가 어떤구조로 되어있는지 어떤 파일들이 있는지 모른채 시작했었다. 오류를 하나씩 수정하면서 어떤파일이 있는지 알게 되었고, html, css, js에 사용된 코드를 공부해야겠다는 생각이 들었다. 그래서 티스토리 블로그의 기본인 파일 구조부터 시작해서 티스토리 치환자에 대해 하나씩 알아보고 정리해보았다..: 글 내용 요약

<s_article_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FCu4i5%2FbtrZV8kNvUj%2FXC3iQTlLKRhnaJ2OIGAjS1%2Fimg.jpg: 대표 이미지 썸네일 주소
https://blog.kakaocdn.net/dn/Cu4i5/btrZV8kNvUj/XC3iQTlLKRhnaJ2OIGAjS1/img.jpg: 대표 이미지 원본 주소

<s_rp_count>: 댓글의 갯수를 출력하는 영역
0: 답글 수

 

<s_index_article_rep>
  <div class="list_content">
    <s_article_rep_thumbnail>
      <img src="https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FCu4i5%2FbtrZV8kNvUj%2FXC3iQTlLKRhnaJ2OIGAjS1%2Fimg.jpg">
    </s_article_rep_thumbnail>

    <a href="/1192" class="link_post">
      <strong class="tit_post">티스토리 스킨 - 글 치환자(댓글, 공지사항, 보호글, 페이지)</strong>
      <p class="txt_post">티스토리 블로그를 시작하면서 처음에는 티스토리에서 제공되는 무료 스킨을 사용했다. 그러다 FastBoot 1.6.2 버전 스킨을 접하면서 FastBoot 스킨으로 변경하였고, 지금까지 사용중이다. 티스토리 시스템은 조금씩 변화가 있는데, FastBoot 스킨의 발전적인 변화는 없다. 그저 블로거들이 직접 오류를 수정하고, 포스팅한 글에 의존하면서 하루하루 조금씩 스킨을 수정하고 있는 실정이다. 티스토리 블로그가 어떤구조로 되어있는지 어떤 파일들이 있는지 모른채 시작했었다. 오류를 하나씩 수정하면서 어떤파일이 있는지 알게 되었고, html, css, js에 사용된 코드를 공부해야겠다는 생각이 들었다. 그래서 티스토리 블로그의 기본인 파일 구조부터 시작해서 티스토리 치환자에 대해 하나씩 알아보고 정리해보았다..</p>
    </a>

    <div class="detail_info">
      <a href="/category/B7%20%EB%B8%94%EB%A1%9C%EA%B7%B8/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC" class="link_cate">
        B7 블로그/티스토리
      </a>
      <span class="txt_bar"></span>
      2019. 3. 30. 16:36
    </div>
  </div>
</s_index_article_rep>

 

 

 

▶ 카테고리의 다른 글
글이 속한 카테고리의 다른 글을 보여줄 수 있습니다.\ 카테고리에 속하지 않은 글에는 표시되지 않습니다.

 

<s_article_related>: 카테고리 글 더보기 영역
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 발행시간

<s_article_related_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
: 대표 이미지 썸네일 주소

 

<s_article_related>
  <div class="area_related">
    <strong class="tit_related">'B7 블로그/티스토리' Related Articles</strong>
    <ul class="list_related">
      <s_article_related_rep>
        <li class="">
          <a href="" class="link_related">
            <s_article_related_rep_thumbnail>
              <span class="thumb_related">
                <img src="" class="img_related" alt="">
              </span>
            </s_article_related_rep_thumbnail>
            <span class="txt_related"></span>
            <span class="date_related"></span>
            <span class="frame_related"></span>
          </a>
        </li>
      </s_article_related_rep>
    </ul>
    <a href="/category/B7%20%EB%B8%94%EB%A1%9C%EA%B7%B8/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC" class="link_more">more</a>
  </div>
</s_article_related>

 

 

 

▶ 이전 글 / 다음 글
글의 이전 글과 다음 글을 보여줍니다. 페이징 치환자의 이전/다음 페이지 url과 동일한 글입니다.

 

<s_article_prev>: 이전 글 그룹치환자. 이전 글이 있는 경우 사용됩니다.
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 작성시간
<s_article_prev_thumbnail>: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
: 대표 이미지 썸네일 주소

 

<s_article_next>: 다음 글 그룹치환자. 다음 글이 있는 경우 사용됩니다.
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 작성시간
<s_article_next_thumbnail>: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
: 대표 이미지 썸네일 주소

 

 

 

 

 

 

글 치환자(댓글)

 

 

▣ 글 치환자(댓글)
▶ 댓글 그룹

 

<s_rp> : 댓글으로 접근시 이 영역 내부의 치환자가 출력됩니다.

 

<s_rp>
  <div class="comment">
    <h3>댓글을 달아 주세요 </h3>
    <div class="commentList">18-6-1 리스트 </div>
    <div class="commentWrite">18-6-2 글쓰기 </div>
  </div>
</s_rp>

 

 

 

▶ 입력 폼

 

<s_rp_input_form> : 댓글을 달기 위한 입력폼을 출력합니다
1192 : 댓글주소. 댓글들을 구분하기위해 사용합니다. 한 화면에 있는 댓글들은 각각 고유의 값을 가지고 있습니다.
 : 댓글 입력 박스 이름
 : 댓글 입력 온클릭 이벤트

<s_rp_member> : 로그인을 하지 않았거나 블로그 소유자가 아닌경우 보여지는 영역
 : 비밀글 체크박스 이름

<s_rp_guest> : 로그인을 하지 않았을경우 보여지는 영역
 : 이름입력 박스 이름
 : 이름
 : 비밀번호 입력 박스 이름
 : 비밀번호
 : 홈페이지 입력 박스 이름
 : 홈페이지

 

<s_rp_input_form>
  <div class="commentWrite">
    <s_rp_member>
      <s_rp_guest>
        <p>
          <input type="text" name="" value="" />
          <label for="name"> : 이름 </label>
        </p>
        <p>
          <input type="password" maxlength="8" name="" value="" />블로그 관리자일 경우 password field에 미리 비밀번호를 넣어놓기 위해 만들어 놓았던 치환자였으나, 지금은 사용되지 않음.. (현재는 블로그 관리자일 경우 password field가 나타나지
          않음.)
          <label for="password"> : 패스워드 </label>
        </p>
        <p>
          <input type="text" class="homepage" name="" value="" />
          <label for="homepage"> : 홈페이지 </label>
        </p>
      </s_rp_guest>
      <p class="secretWrap">
        <input type="checkbox" name="" class="checkbox" />
        <label for="secret"> 비밀글 </label>
      </p>
    </s_rp_member>
    <p>
      <textarea name="" rows="10" cols="50"></textarea>
    </p>
    <p>
      <input type="submit" value="댓글 달기" onclick="" />
    </p>
  </div>
</s_rp_input_form>

 

 

▶ 댓글 리스트 구조

 

<s_rp_container> : 등록된 '댓글' 리스트를 출력할 영역입니다
<s_rp_rep> : '댓글' 리스트의 반복열입니다
<s_rp2_container> : '댓글'의 댓글 리스트를 출력할 영역입니다.
<s_rp2_rep> : '댓글' 댓글 리스트의 반복열입니다

 

 

▶ 댓글 내용 (rep 내부)

 

 : 댓글의 고유 ID
 : 댓글의 글의 목록에 반복되는 스타일 + admin 아이디 앞에 아이콘
 : 글쓴사람 이름
 : 댓글작성자의 프로필 이미지
 : 글쓴 날짜
 : 글 내용
 : 댓글 주소
 : 답글 삭제 온클릭 이벤트
 : 답글 수정 온클릭 이벤트

 

<div class="commentList">
  <s_rp_container>
    <ol>
      <s_rp_rep>
        <li id=''>
          <div class="">
            <span class="image"></span>
            <span class="name"></span>
            <span class="date"> </span>
            <span class="control">
              <a href="" class="address">&nbsp;
                <span>댓글주소</span>
              </a>
              <a href="#" onclick="" class="modify">&nbsp;
                <span>수정/삭제</span>
              </a>
              <a href="#" onclick="" class="write">&nbsp;
                <span>댓글쓰기</span>
              </a>
            </span>
            <p></p>
          </div>
          <s_rp2_container>
            <ul>
              <s_rp2_rep>
                <li id=''>
                  <div class="">
                    <span class="image"></span>
                    <span class="name"></span>
                    <span class="date"> </span>
                    <span class="control">
                      <a href="" class="address">&nbsp;
                        <span>댓글주소</span>
                      </a>
                      <a href="#" onclick="" class="modify">&nbsp;
                        <span>수정/삭제</span>
                      </a>
                    </span>
                    <p></p>
                  </div>
                </li>
              </s_rp2_rep>
            </ul>
          </s_rp2_container>
        </li>
      </s_rp_rep>
    </ol>
  </s_rp_container>
</div>

 

 

 

 

 

 

글 치환자(공지사항)

 

 

▶ 공지사항 치환자

 

<s_notice_rep>: 공지사항 그룹 치환자
 : '공지사항'에 등록된 글의 고유 주소
 : 글 제목
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
 : 본문 내용
 : 작성자 이름 (*팀블로그용 치환자)

<s_notice_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소

 

<s_notice_rep>
  <div class="entryNotice">
    <div class="titleWrap">
      <h2><a href=""></a></h2>
      <span class="date"> </span>
    </div>
    <div class="article">
      
    </div>
  </div>
</s_notice_rep>

 

 

 

▶ 퍼머링크 / 인덱스
퍼머링크 페이지에서와 인덱스 페이지에서 표시될 내용을 구분할 수 있습니다.\ (퍼머링크 페이지/인덱스 페이지 영역 밖에서 사용되는 치환자는 둘 모두에서 표시됩니다)

 

1) 퍼머링크

 

<s_permalink_article_rep>: 퍼머링크 페이지일 때만 표시되는 영역입니다
내부에서 사용하는 치환자는 <s_article_rep> 내부에서 사용하는 치환자와 동일합니다)

 

 

2) 인덱스

 

<s_index_article_rep>: 인덱스 페이지일 때만 표시되는 영역입니다
 : '공지사항'에 등록된 글의 고유 주소
 : 글 제목
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
 : 본문 내용
 : 작성자 이름 (*팀블로그용 치환자)
: 글 내용 일부

<s_notice_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소

 

<s_index_article_rep>
  <div class="list_content">
    <s_notice_rep_thumbnail>
      <img src="">
    </s_notice_rep_thumbnail>

    <a href="" class="link_post">
      <strong class="tit_post"></strong>
      <p class="txt_post"></p>
    </a>

    <div class="detail_info">
      <a href="" class="link_cate">
        
      </a>
      <span class="txt_bar"></span>
      
    </div>
  </div>
</s_index_article_rep>

 

=

 

 

 

 

 

 

 

 

 

 

 

 

 

글 치환자(보호글)

 

 

▶ 보호글 치환자

 

<s_article_protected>: 보호글 그룹치환자
/1192: 보호글의 고유 주소
티스토리 스킨 - 글 치환자(댓글, 공지사항, 보호글, 페이지): 보호글의 제목
/category/B7%20%EB%B8%94%EB%A1%9C%EA%B7%B8/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC: 카테고리 링크
B7 블로그/티스토리: 카테고리 명
2019. 3. 30. 16:36: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
2019. 3. 30.: 글 발행 날짜 (yyyy. m. d.)
2019: 글쓴 세부시간 - 연도 (yyyy)
03: 글쓴 세부시간 - 월 (mm)
30: 글쓴 세부시간 - 일 (dd)
16: 글쓴 세부시간 - 시 (HH)
36: 글쓴 세부시간 - 분 (MM)
09: 글쓴 세부시간 - 초 (SS)
entry1192password: 보호글의 비밀번호 텍스트 박스의 Id값(label 사용 용도)
{reloadEntry(1192);return false;}: 보호글의 비밀번호를 입력하고 엔터키나 확인버튼을 눌렀을 때 실행될 자바스크립트 코드가 들어갑니다.
Barista7: 작성자 이름 (*팀블로그용 치환자)

 

<s_article_protected>
  <div class="entryProtected">
    <h2><a href="/1192">티스토리 스킨 - 글 치환자(댓글, 공지사항, 보호글, 페이지)</a></h2>
    <span class="date">2019. 3. 30. 16:36</span>
    <p>보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.</p>
    <p>
      <label for="entry1192password">비밀번호 ::</label>
      <input type="password" maxlength="16" id="entry1192password" name="entry1192password" value="" onkeydown="if (event.keyCode == 13){reloadEntry(1192);return false;}" />
      <input type="button" class="submit" value="submit" onclick="{reloadEntry(1192);return false;}" />
    </p>
  </div>
</s_article_protected>

 

 

 

 

 

 

글 치환자(페이지)

 

 

▶ 페이지 치환자

 

<s_page_rep>: '페이지'가 출력되는 영역입니다.\ (스킨에 페이지치환자가 존재하지 않는 경우 글 치환자에 페이지가 표시됩니다.)
/1192: 고유 주소
티스토리 스킨 - 글 치환자(댓글, 공지사항, 보호글, 페이지): 제목
2019. 3. 30. 16:36: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
2019. 3. 30.: 글 발행 날짜 (yyyy. m. d.)
2019: 글쓴 세부시간 - 연도 (yyyy)
03: 글쓴 세부시간 - 월 (mm)
30: 글쓴 세부시간 - 일 (dd)
16: 글쓴 세부시간 - 시 (HH)
36: 글쓴 세부시간 - 분 (MM)
09: 글쓴 세부시간 - 초 (SS)

                    



                                                    



            
티스토리 블로그를 시작하면서 처음에는 티스토리에서 제공되는 무료 스킨을 사용했다. 그러다 FastBoot 1.6.2 버전 스킨을 접하면서 FastBoot 스킨으로 변경하였고, 지금까지 사용중이다.

티스토리 시스템은 조금씩 변화가 있는데, FastBoot 스킨의 발전적인 변화는 없다. 그저 블로거들이 직접 오류를 수정하고, 포스팅한 글에 의존하면서 하루하루 조금씩 스킨을 수정하고 있는 실정이다.

티스토리 블로그가 어떤구조로 되어있는지 어떤 파일들이 있는지 모른채 시작했었다. 오류를 하나씩 수정하면서 어떤파일이 있는지 알게 되었고, html, css, js에 사용된 코드를 공부해야겠다는 생각이 들었다.

그래서 티스토리 블로그의 기본인 파일 구조부터 시작해서 티스토리 치환자에 대해 하나씩 알아보고 정리해보았다.
 
 
 
▶ 티스토리 스킨(글 치환자)
1. 댓글
2. 공지사항
3. 보호글
4. 페이지
5. 리스트 페이징
 
 
 
 




 
 




 
 
 
 
 
 
티스토리 스킨 - 글 치환자(댓글, 공지사항, 보호글, 페이지)
 
 


 
 
▷ 티스토리 블로그 robots.txt 확인 및 분석 : https://barista7.tistory.com/1150
▷ 티스토리 스킨 가이드 : https://tistory.github.io/document-tistory-skin/
▷ 티스토리 스킨 - 파일 구조, 스킨 정보 파일, 치환자 구조 : https://barista7.tistory.com/1159
▷ 티스토리 스킨 - 공통 치환자(공통, 홈 커버, 스킨 옵션) : https://barista7.tistory.com/1162
▷ 티스토리 스킨 - 컨텐츠 치환자(태그 클라우드, 방명록) : https://barista7.tistory.com/1179
▷ 티스토리 스킨 - 글 치환자(댓글, 공지사항, 보호글, 페이지) : https://barista7.tistory.com/1192
▷ 티스토리 스킨 - 글 치환자(구조, 최근공지, 최근글, 인기글, 댓글) : https://barista7.tistory.com/1203
▷ 티스토리 스킨 - 글 치환자(카테고리, 랜덤태그, 방문자수, 검색) : https://barista7.tistory.com/1237
 
=
 
 
 
 




 
 




 
 
 
 
 
 
 
글 치환자
 
 
▣ 글 치환자
▶ 글 정보
 
<s_article_rep>: 글 그룹 치환자
: 블로그 글의 고유 주소
: 블로그 글의 제목
: 카테고리 링크
: 카테고리 명
: 글쓴 날짜/시간 (yyyy. m. d. HH:MM)
: 글쓴 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 작성자 이름 (*팀블로그용 치환자)
: 블로그 본문 내용

<s_article_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
: 댓글을 열고 닫는 온클릭 이벤트

<s_rp_count>: 댓글의 갯수를 출력하는 영역
: 답글 수
 
<s_article_rep>
  <div class="titleWrap">
    <h2><a href=""></a></h2>
    <div class="category">
      <a href=""></a>
    </div>
    <div class="date"></div>
  </div>

  <div class="article">
    
  </div>
</s_article_rep>
 
 
▶ 관리기능
 
<s_ad_div> : 글 관리기능 그룹치환자 (관리 권한 있는 경우만 표시)
: 수정
: 수정 온클릭 이벤트
: 글의 현재 상태
: 상태 변경 온클릭 이벤트
: 이후 상태
: 트랙백 온클릭 이벤트
: 삭제 온클릭 이벤트
 
<s_ad_div>
    <div class="admin">
      <a href="">수정</a> :
      <a href="#" onclick="">수정(창으로)</a> |
      ()→<a href="#" onclick=""></a> |
      <a href="#" onclick="">관련글(트랙백)</a> |
      <a href="#" onclick="">삭제</a>
    </div>
  </s_ad_div>
 
 
 
▶ 태그
 
<s_tag_label>: 글과 관련된 태그가 출력되는 영역입니다.
: 태그 반복 출력

 <s_tag_label>
    <div class="tagTrail">
      <span class="tagText">TAG </span> 
    </div>
  </s_tag_label>
 
 
 
▶ 퍼머링크 / 인덱스
퍼머링크 페이지에서와 인덱스 페이지에서 표시될 내용을 구분할 수 있습니다.(퍼머링크 페이지/인덱스 페이지 영역 밖에서 사용되는 치환자는 둘 모두에서 표시됩니다)
 
1) 퍼머링크
 
<s_permalink_article_rep>: 퍼머링크 페이지일 때만 표시되는 영역입니다
(내부에서 사용하는 치환자는 <s_article_rep> 내부에서 사용하는 치환자와 동일합니다)
 
 
2) 인덱스
 
<s_index_article_rep>: 인덱스 페이지일 때만 표시되는 영역입니다
: 블로그 글의 고유 주소
: 블로그 글의 제목
: 카테고리 주소
: 카테고리 이름
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 작성자 이름
: 글 내용 요약

<s_article_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소

<s_rp_count>: 댓글의 갯수를 출력하는 영역
: 답글 수
 
<s_index_article_rep>
  <div class="list_content">
    <s_article_rep_thumbnail>
      <img src="">
    </s_article_rep_thumbnail>

    <a href="" class="link_post">
      <strong class="tit_post"></strong>
      <p class="txt_post"></p>
    </a>

    <div class="detail_info">
      <a href="" class="link_cate">
        
      </a>
      <span class="txt_bar"></span>
      
    </div>
  </div>
</s_index_article_rep>
 
 
 
▶ 카테고리의 다른 글
글이 속한 카테고리의 다른 글을 보여줄 수 있습니다.\ 카테고리에 속하지 않은 글에는 표시되지 않습니다.
 
<s_article_related>: 카테고리 글 더보기 영역
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 발행시간

<s_article_related_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
: 대표 이미지 썸네일 주소
 
<s_article_related>
  <div class="area_related">
    <strong class="tit_related">'' Related Articles</strong>
    <ul class="list_related">
      <s_article_related_rep>
        <li class="">
          <a href="" class="link_related">
            <s_article_related_rep_thumbnail>
              <span class="thumb_related">
                <img src="" class="img_related" alt="">
              </span>
            </s_article_related_rep_thumbnail>
            <span class="txt_related"></span>
            <span class="date_related"></span>
            <span class="frame_related"></span>
          </a>
        </li>
      </s_article_related_rep>
    </ul>
    <a href="" class="link_more">more</a>
  </div>
</s_article_related>
 
 
 
▶ 이전 글 / 다음 글
글의 이전 글과 다음 글을 보여줍니다. 페이징 치환자의 이전/다음 페이지 url과 동일한 글입니다.
 
<s_article_prev>: 이전 글 그룹치환자. 이전 글이 있는 경우 사용됩니다.
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 작성시간
<s_article_prev_thumbnail>: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
: 대표 이미지 썸네일 주소
 
<s_article_next>: 다음 글 그룹치환자. 다음 글이 있는 경우 사용됩니다.
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 작성시간
<s_article_next_thumbnail>: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
: 대표 이미지 썸네일 주소
 
 
 
 
 
 
글 치환자(댓글)
 
 
▣ 글 치환자(댓글)
▶ 댓글 그룹
 
<s_rp> : 댓글으로 접근시 이 영역 내부의 치환자가 출력됩니다.
 
<s_rp>
  <div class="comment">
    <h3>댓글을 달아 주세요 </h3>
    <div class="commentList">18-6-1 리스트 </div>
    <div class="commentWrite">18-6-2 글쓰기 </div>
  </div>
</s_rp>
 
 
 
▶ 입력 폼
 
<s_rp_input_form> : 댓글을 달기 위한 입력폼을 출력합니다
 : 댓글주소. 댓글들을 구분하기위해 사용합니다. 한 화면에 있는 댓글들은 각각 고유의 값을 가지고 있습니다.
 : 댓글 입력 박스 이름
 : 댓글 입력 온클릭 이벤트

<s_rp_member> : 로그인을 하지 않았거나 블로그 소유자가 아닌경우 보여지는 영역
 : 비밀글 체크박스 이름

<s_rp_guest> : 로그인을 하지 않았을경우 보여지는 영역
 : 이름입력 박스 이름
 : 이름
 : 비밀번호 입력 박스 이름
 : 비밀번호
 : 홈페이지 입력 박스 이름
 : 홈페이지
 
<s_rp_input_form>
  <div class="commentWrite">
    <s_rp_member>
      <s_rp_guest>
        <p>
          <input type="text" name="" value="" />
          <label for="name"> : 이름 </label>
        </p>
        <p>
          <input type="password" maxlength="8" name="" value="" />블로그 관리자일 경우 password field에 미리 비밀번호를 넣어놓기 위해 만들어 놓았던 치환자였으나, 지금은 사용되지 않음.. (현재는 블로그 관리자일 경우 password field가 나타나지
          않음.)
          <label for="password"> : 패스워드 </label>
        </p>
        <p>
          <input type="text" class="homepage" name="" value="" />
          <label for="homepage"> : 홈페이지 </label>
        </p>
      </s_rp_guest>
      <p class="secretWrap">
        <input type="checkbox" name="" class="checkbox" />
        <label for="secret"> 비밀글 </label>
      </p>
    </s_rp_member>
    <p>
      <textarea name="" rows="10" cols="50"></textarea>
    </p>
    <p>
      <input type="submit" value="댓글 달기" onclick="" />
    </p>
  </div>
</s_rp_input_form>
 
 
▶ 댓글 리스트 구조
 
<s_rp_container> : 등록된 '댓글' 리스트를 출력할 영역입니다
<s_rp_rep> : '댓글' 리스트의 반복열입니다
<s_rp2_container> : '댓글'의 댓글 리스트를 출력할 영역입니다.
<s_rp2_rep> : '댓글' 댓글 리스트의 반복열입니다
 
 
▶ 댓글 내용 (rep 내부)
 
 : 댓글의 고유 ID
 : 댓글의 글의 목록에 반복되는 스타일 + admin 아이디 앞에 아이콘
 : 글쓴사람 이름
 : 댓글작성자의 프로필 이미지
 : 글쓴 날짜
 : 글 내용
 : 댓글 주소
 : 답글 삭제 온클릭 이벤트
 : 답글 수정 온클릭 이벤트
 
<div class="commentList">
  <s_rp_container>
    <ol>
      <s_rp_rep>
        <li id=''>
          <div class="">
            <span class="image"></span>
            <span class="name"></span>
            <span class="date"> </span>
            <span class="control">
              <a href="" class="address">&nbsp;
                <span>댓글주소</span>
              </a>
              <a href="#" onclick="" class="modify">&nbsp;
                <span>수정/삭제</span>
              </a>
              <a href="#" onclick="" class="write">&nbsp;
                <span>댓글쓰기</span>
              </a>
            </span>
            <p></p>
          </div>
          <s_rp2_container>
            <ul>
              <s_rp2_rep>
                <li id=''>
                  <div class="">
                    <span class="image"></span>
                    <span class="name"></span>
                    <span class="date"> </span>
                    <span class="control">
                      <a href="" class="address">&nbsp;
                        <span>댓글주소</span>
                      </a>
                      <a href="#" onclick="" class="modify">&nbsp;
                        <span>수정/삭제</span>
                      </a>
                    </span>
                    <p></p>
                  </div>
                </li>
              </s_rp2_rep>
            </ul>
          </s_rp2_container>
        </li>
      </s_rp_rep>
    </ol>
  </s_rp_container>
</div>
 
 
 
 
 
 
글 치환자(공지사항)
 
 
▶ 공지사항 치환자
 
<s_notice_rep>: 공지사항 그룹 치환자
 : '공지사항'에 등록된 글의 고유 주소
 : 글 제목
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
 : 본문 내용
 : 작성자 이름 (*팀블로그용 치환자)

<s_notice_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
 
<s_notice_rep>
  <div class="entryNotice">
    <div class="titleWrap">
      <h2><a href=""></a></h2>
      <span class="date"> </span>
    </div>
    <div class="article">
      
    </div>
  </div>
</s_notice_rep>
 
 
 
▶ 퍼머링크 / 인덱스
퍼머링크 페이지에서와 인덱스 페이지에서 표시될 내용을 구분할 수 있습니다.\ (퍼머링크 페이지/인덱스 페이지 영역 밖에서 사용되는 치환자는 둘 모두에서 표시됩니다)
 
1) 퍼머링크
 
<s_permalink_article_rep>: 퍼머링크 페이지일 때만 표시되는 영역입니다
내부에서 사용하는 치환자는 <s_article_rep> 내부에서 사용하는 치환자와 동일합니다)
 
 
2) 인덱스
 
<s_index_article_rep>: 인덱스 페이지일 때만 표시되는 영역입니다
 : '공지사항'에 등록된 글의 고유 주소
 : 글 제목
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
 : 본문 내용
 : 작성자 이름 (*팀블로그용 치환자)
: 글 내용 일부

<s_notice_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
 
<s_index_article_rep>
  <div class="list_content">
    <s_notice_rep_thumbnail>
      <img src="">
    </s_notice_rep_thumbnail>

    <a href="" class="link_post">
      <strong class="tit_post"></strong>
      <p class="txt_post"></p>
    </a>

    <div class="detail_info">
      <a href="" class="link_cate">
        
      </a>
      <span class="txt_bar"></span>
      
    </div>
  </div>
</s_index_article_rep>
 
=
 
 
 
 




 
 




 
 
 
 
 
 
 
글 치환자(보호글)
 
 
▶ 보호글 치환자
 
<s_article_protected>: 보호글 그룹치환자
: 보호글의 고유 주소
: 보호글의 제목
: 카테고리 링크
: 카테고리 명
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 보호글의 비밀번호 텍스트 박스의 Id값(label 사용 용도)
: 보호글의 비밀번호를 입력하고 엔터키나 확인버튼을 눌렀을 때 실행될 자바스크립트 코드가 들어갑니다.
: 작성자 이름 (*팀블로그용 치환자)
 
<s_article_protected>
  <div class="entryProtected">
    <h2><a href=""></a></h2>
    <span class="date"></span>
    <p>보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.</p>
    <p>
      <label for="">비밀번호 ::</label>
      <input type="password" maxlength="16" id="" name="" value="" onkeydown="if (event.keyCode == 13)" />
      <input type="button" class="submit" value="submit" onclick="" />
    </p>
  </div>
</s_article_protected>
 
 
 
 
 
 
글 치환자(페이지)
 
 
▶ 페이지 치환자
 
<s_page_rep>: '페이지'가 출력되는 영역입니다.\ (스킨에 페이지치환자가 존재하지 않는 경우 글 치환자에 페이지가 표시됩니다.)
: 고유 주소
: 제목
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 본문 내용
: 작성자 이름 (*팀블로그용 치환자)
 
<s_page_rep>
  <div>
    <h2><a href=""></a></h2>
    <div>
      
    </div>
  </div>
</s_page_rep>
 
 
 
 
 
 
글 치환자(리스트)
 
 
▶ 리스트 치환자
리스트 치환자는 카테고리, 검색, 태그의 글 리스트를 표시합니다.
 
 
▶ 리스트 그룹
 
<s_list>: 리스트 그룹 치환자
: 카테고리 이름, 검색어, 태그명
: 글의 총 개수
: 리스트 설명 (카테고리인 경우 카테고리 설명, 그외 블로그 설명)
: 리스트 스타일 값 (class attribute로 활용 가능)
<s_list_image>: 리스트 대표 이미지가 있는 경우 동작
: 리스트 대표 이미지 (카테고리인 경우 카테고리 대표이미지, 그외 블로그 대표이미지)
 
 
▶ 아이템 반복 그룹
 
<s_list_empty>: 리스트에 글이 없는 경우 보이는 영역

<s_list_rep>: 리스트 아이템이 반복되는 영역
: 글의 고유 주소
: 글 작성 날짜 (yyyy.mm.dd)
: 글 작성 세부시간 - 연도 (yyyy)
: 글 작성 세부시간 - 월 (mm)
: 글 작성 세부시간 - 일 (dd)
: 글 작성 세부시간 - 시 (HH)
: 글 작성 세부시간 - 분 (MM)
: 글 작성 세부시간 - 초 (SS)
: 글의 제목
: 글이 속한 카테고리 이름
: 글이 속한 카테고리 글 목록 url
: 댓글 수
: 작성자 이름
: 글 내용 요약
: 대표 이미지 원본 주소

<s_list_rep_thumbnail>: 대표 이미지가 있는 경우 치환
: 대표 이미지
 
 
 
▶ 리스트 스타일
리스트 스타일을 사용하기 위해서는 스킨 정보 파일에 리스트 스타일 아이템을 정의해야 합니다. 리스트 스타일을 정의하면 카테고리 관리화면에서 리스트 스타일이 표시되고 사용자가 선택할 수 있습니다. 이를 사용하여 카테고리별로 다른 스타일을 적용할 때 사용할 수 있습니다.
 
<default>
    <liststyle>default liststyle 값</liststyle>
</default>
 
<liststyle>
  <item>
    <label>표시할 이름</label>
    <value>사용될 값</value>
  </item>
</liststyle>
 
 
▷ 사용 예
 
<!-- 스킨 예 -->
<s_list>
  <div class="searchList ">
    <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>
 
<!-- 변환 예 -->
<div class="searchList grid">
  <div style="background-image:url('https://sample.com/image.jpg')">
    <h3>'업데이트 소식'에 해당되는 글 2건</h3>
    <p>새롭게 업데이트되는 내용을 알려드립니다.</p>
  </div>
  <ol>
    <li>
      <span class="date">2016.01.25</span>
      <a href="/2289">1월 초대장이 배포되었습니다.</a>
      <span class="cnt">8</span>
      <img src="https://s1.daumcdn.net/cfile/tistory/1234">
    </li>
    <li>
      <span class="date">2015.12.22</span>
      <a href="/2283">12월 초대장이 배포되었습니다.</a>
      <span class="cnt">19</span>
      <img src="https://s1.daumcdn.net/cfile/tistory/5678">
    </li>
  </ol>
</div>
 
 
 
▶ 페이징
리스트, 글, 방명록에서 공통으로 사용하는 페이징 치환자
 
<s_paging>: 페이지가 출력되는 영역입니다
<s_paging_rep>: 페이지가 반복 출력됩니다
: 이전 페이지 링크
: 페이지 링크
: 페이지 번호
: 다음 페이지 링크
 
<s_paging>
  <div class="paging">
    <a  class="">◀ PREV </a>
    <span class="numbox">
      <s_paging_rep>
        <a  class="num">[]</a>
      </s_paging_rep>
    </span>
    <a  class="">NEXT ▶</a>
  </div>
</s_paging>
 
 
 
[ 사진 출처 ] 티스토리 가이드 캡쳐
 
 
 
 
 
 
 
지금까지 티스토리 스킨 글 치환자(댓글, 공지사항, 보호글, 페이지)에 대해 알아보았다.
 
 
 
 
도움이 되셨다면 로그인 없이 가능한
아래 하트♥공감 버튼을 꾹 눌러주세요! 
 
 
 
 

 



 
 
 
                    
        

  

    
반응형
    
    
    
  

        

                            
        









        

                            
        
 


        






: 본문 내용
Barista7: 작성자 이름 (*팀블로그용 치환자)

 

<s_page_rep>
  <div>
    <h2><a href="/1192">티스토리 스킨 - 글 치환자(댓글, 공지사항, 보호글, 페이지)</a></h2>
    <div>
      
                    



                                                    



            
티스토리 블로그를 시작하면서 처음에는 티스토리에서 제공되는 무료 스킨을 사용했다. 그러다 FastBoot 1.6.2 버전 스킨을 접하면서 FastBoot 스킨으로 변경하였고, 지금까지 사용중이다.

티스토리 시스템은 조금씩 변화가 있는데, FastBoot 스킨의 발전적인 변화는 없다. 그저 블로거들이 직접 오류를 수정하고, 포스팅한 글에 의존하면서 하루하루 조금씩 스킨을 수정하고 있는 실정이다.

티스토리 블로그가 어떤구조로 되어있는지 어떤 파일들이 있는지 모른채 시작했었다. 오류를 하나씩 수정하면서 어떤파일이 있는지 알게 되었고, html, css, js에 사용된 코드를 공부해야겠다는 생각이 들었다.

그래서 티스토리 블로그의 기본인 파일 구조부터 시작해서 티스토리 치환자에 대해 하나씩 알아보고 정리해보았다.
 
 
 
▶ 티스토리 스킨(글 치환자)
1. 댓글
2. 공지사항
3. 보호글
4. 페이지
5. 리스트 페이징
 
 
 
 




 
 




 
 
 
 
 
 
티스토리 스킨 - 글 치환자(댓글, 공지사항, 보호글, 페이지)
 
 


 
 
▷ 티스토리 블로그 robots.txt 확인 및 분석 : https://barista7.tistory.com/1150
▷ 티스토리 스킨 가이드 : https://tistory.github.io/document-tistory-skin/
▷ 티스토리 스킨 - 파일 구조, 스킨 정보 파일, 치환자 구조 : https://barista7.tistory.com/1159
▷ 티스토리 스킨 - 공통 치환자(공통, 홈 커버, 스킨 옵션) : https://barista7.tistory.com/1162
▷ 티스토리 스킨 - 컨텐츠 치환자(태그 클라우드, 방명록) : https://barista7.tistory.com/1179
▷ 티스토리 스킨 - 글 치환자(댓글, 공지사항, 보호글, 페이지) : https://barista7.tistory.com/1192
▷ 티스토리 스킨 - 글 치환자(구조, 최근공지, 최근글, 인기글, 댓글) : https://barista7.tistory.com/1203
▷ 티스토리 스킨 - 글 치환자(카테고리, 랜덤태그, 방문자수, 검색) : https://barista7.tistory.com/1237
 
=
 
 
 
 




 
 




 
 
 
 
 
 
 
글 치환자
 
 
▣ 글 치환자
▶ 글 정보
 
<s_article_rep>: 글 그룹 치환자
: 블로그 글의 고유 주소
: 블로그 글의 제목
: 카테고리 링크
: 카테고리 명
: 글쓴 날짜/시간 (yyyy. m. d. HH:MM)
: 글쓴 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 작성자 이름 (*팀블로그용 치환자)
: 블로그 본문 내용

<s_article_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
: 댓글을 열고 닫는 온클릭 이벤트

<s_rp_count>: 댓글의 갯수를 출력하는 영역
: 답글 수
 
<s_article_rep>
  <div class="titleWrap">
    <h2><a href=""></a></h2>
    <div class="category">
      <a href=""></a>
    </div>
    <div class="date"></div>
  </div>

  <div class="article">
    
  </div>
</s_article_rep>
 
 
▶ 관리기능
 
<s_ad_div> : 글 관리기능 그룹치환자 (관리 권한 있는 경우만 표시)
: 수정
: 수정 온클릭 이벤트
: 글의 현재 상태
: 상태 변경 온클릭 이벤트
: 이후 상태
: 트랙백 온클릭 이벤트
: 삭제 온클릭 이벤트
 
<s_ad_div>
    <div class="admin">
      <a href="">수정</a> :
      <a href="#" onclick="">수정(창으로)</a> |
      ()→<a href="#" onclick=""></a> |
      <a href="#" onclick="">관련글(트랙백)</a> |
      <a href="#" onclick="">삭제</a>
    </div>
  </s_ad_div>
 
 
 
▶ 태그
 
<s_tag_label>: 글과 관련된 태그가 출력되는 영역입니다.
: 태그 반복 출력

 <s_tag_label>
    <div class="tagTrail">
      <span class="tagText">TAG </span> 
    </div>
  </s_tag_label>
 
 
 
▶ 퍼머링크 / 인덱스
퍼머링크 페이지에서와 인덱스 페이지에서 표시될 내용을 구분할 수 있습니다.(퍼머링크 페이지/인덱스 페이지 영역 밖에서 사용되는 치환자는 둘 모두에서 표시됩니다)
 
1) 퍼머링크
 
<s_permalink_article_rep>: 퍼머링크 페이지일 때만 표시되는 영역입니다
(내부에서 사용하는 치환자는 <s_article_rep> 내부에서 사용하는 치환자와 동일합니다)
 
 
2) 인덱스
 
<s_index_article_rep>: 인덱스 페이지일 때만 표시되는 영역입니다
: 블로그 글의 고유 주소
: 블로그 글의 제목
: 카테고리 주소
: 카테고리 이름
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 작성자 이름
: 글 내용 요약

<s_article_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소

<s_rp_count>: 댓글의 갯수를 출력하는 영역
: 답글 수
 
<s_index_article_rep>
  <div class="list_content">
    <s_article_rep_thumbnail>
      <img src="">
    </s_article_rep_thumbnail>

    <a href="" class="link_post">
      <strong class="tit_post"></strong>
      <p class="txt_post"></p>
    </a>

    <div class="detail_info">
      <a href="" class="link_cate">
        
      </a>
      <span class="txt_bar"></span>
      
    </div>
  </div>
</s_index_article_rep>
 
 
 
▶ 카테고리의 다른 글
글이 속한 카테고리의 다른 글을 보여줄 수 있습니다.\ 카테고리에 속하지 않은 글에는 표시되지 않습니다.
 
<s_article_related>: 카테고리 글 더보기 영역
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 발행시간

<s_article_related_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
: 대표 이미지 썸네일 주소
 
<s_article_related>
  <div class="area_related">
    <strong class="tit_related">'' Related Articles</strong>
    <ul class="list_related">
      <s_article_related_rep>
        <li class="">
          <a href="" class="link_related">
            <s_article_related_rep_thumbnail>
              <span class="thumb_related">
                <img src="" class="img_related" alt="">
              </span>
            </s_article_related_rep_thumbnail>
            <span class="txt_related"></span>
            <span class="date_related"></span>
            <span class="frame_related"></span>
          </a>
        </li>
      </s_article_related_rep>
    </ul>
    <a href="" class="link_more">more</a>
  </div>
</s_article_related>
 
 
 
▶ 이전 글 / 다음 글
글의 이전 글과 다음 글을 보여줍니다. 페이징 치환자의 이전/다음 페이지 url과 동일한 글입니다.
 
<s_article_prev>: 이전 글 그룹치환자. 이전 글이 있는 경우 사용됩니다.
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 작성시간
<s_article_prev_thumbnail>: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
: 대표 이미지 썸네일 주소
 
<s_article_next>: 다음 글 그룹치환자. 다음 글이 있는 경우 사용됩니다.
: 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
: 글 주소
: 글 제목
: 글 작성시간
<s_article_next_thumbnail>: 대표 이미지 썸네일이 표시되는 그룹치환자 (대표 이미지가 있는 경우 표시)
: 대표 이미지 썸네일 주소
 
 
 
 
 
 
글 치환자(댓글)
 
 
▣ 글 치환자(댓글)
▶ 댓글 그룹
 
<s_rp> : 댓글으로 접근시 이 영역 내부의 치환자가 출력됩니다.
 
<s_rp>
  <div class="comment">
    <h3>댓글을 달아 주세요 </h3>
    <div class="commentList">18-6-1 리스트 </div>
    <div class="commentWrite">18-6-2 글쓰기 </div>
  </div>
</s_rp>
 
 
 
▶ 입력 폼
 
<s_rp_input_form> : 댓글을 달기 위한 입력폼을 출력합니다
 : 댓글주소. 댓글들을 구분하기위해 사용합니다. 한 화면에 있는 댓글들은 각각 고유의 값을 가지고 있습니다.
 : 댓글 입력 박스 이름
 : 댓글 입력 온클릭 이벤트

<s_rp_member> : 로그인을 하지 않았거나 블로그 소유자가 아닌경우 보여지는 영역
 : 비밀글 체크박스 이름

<s_rp_guest> : 로그인을 하지 않았을경우 보여지는 영역
 : 이름입력 박스 이름
 : 이름
 : 비밀번호 입력 박스 이름
 : 비밀번호
 : 홈페이지 입력 박스 이름
 : 홈페이지
 
<s_rp_input_form>
  <div class="commentWrite">
    <s_rp_member>
      <s_rp_guest>
        <p>
          <input type="text" name="" value="" />
          <label for="name"> : 이름 </label>
        </p>
        <p>
          <input type="password" maxlength="8" name="" value="" />블로그 관리자일 경우 password field에 미리 비밀번호를 넣어놓기 위해 만들어 놓았던 치환자였으나, 지금은 사용되지 않음.. (현재는 블로그 관리자일 경우 password field가 나타나지
          않음.)
          <label for="password"> : 패스워드 </label>
        </p>
        <p>
          <input type="text" class="homepage" name="" value="" />
          <label for="homepage"> : 홈페이지 </label>
        </p>
      </s_rp_guest>
      <p class="secretWrap">
        <input type="checkbox" name="" class="checkbox" />
        <label for="secret"> 비밀글 </label>
      </p>
    </s_rp_member>
    <p>
      <textarea name="" rows="10" cols="50"></textarea>
    </p>
    <p>
      <input type="submit" value="댓글 달기" onclick="" />
    </p>
  </div>
</s_rp_input_form>
 
 
▶ 댓글 리스트 구조
 
<s_rp_container> : 등록된 '댓글' 리스트를 출력할 영역입니다
<s_rp_rep> : '댓글' 리스트의 반복열입니다
<s_rp2_container> : '댓글'의 댓글 리스트를 출력할 영역입니다.
<s_rp2_rep> : '댓글' 댓글 리스트의 반복열입니다
 
 
▶ 댓글 내용 (rep 내부)
 
 : 댓글의 고유 ID
 : 댓글의 글의 목록에 반복되는 스타일 + admin 아이디 앞에 아이콘
 : 글쓴사람 이름
 : 댓글작성자의 프로필 이미지
 : 글쓴 날짜
 : 글 내용
 : 댓글 주소
 : 답글 삭제 온클릭 이벤트
 : 답글 수정 온클릭 이벤트
 
<div class="commentList">
  <s_rp_container>
    <ol>
      <s_rp_rep>
        <li id=''>
          <div class="">
            <span class="image"></span>
            <span class="name"></span>
            <span class="date"> </span>
            <span class="control">
              <a href="" class="address">&nbsp;
                <span>댓글주소</span>
              </a>
              <a href="#" onclick="" class="modify">&nbsp;
                <span>수정/삭제</span>
              </a>
              <a href="#" onclick="" class="write">&nbsp;
                <span>댓글쓰기</span>
              </a>
            </span>
            <p></p>
          </div>
          <s_rp2_container>
            <ul>
              <s_rp2_rep>
                <li id=''>
                  <div class="">
                    <span class="image"></span>
                    <span class="name"></span>
                    <span class="date"> </span>
                    <span class="control">
                      <a href="" class="address">&nbsp;
                        <span>댓글주소</span>
                      </a>
                      <a href="#" onclick="" class="modify">&nbsp;
                        <span>수정/삭제</span>
                      </a>
                    </span>
                    <p></p>
                  </div>
                </li>
              </s_rp2_rep>
            </ul>
          </s_rp2_container>
        </li>
      </s_rp_rep>
    </ol>
  </s_rp_container>
</div>
 
 
 
 
 
 
글 치환자(공지사항)
 
 
▶ 공지사항 치환자
 
<s_notice_rep>: 공지사항 그룹 치환자
 : '공지사항'에 등록된 글의 고유 주소
 : 글 제목
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
 : 본문 내용
 : 작성자 이름 (*팀블로그용 치환자)

<s_notice_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
 
<s_notice_rep>
  <div class="entryNotice">
    <div class="titleWrap">
      <h2><a href=""></a></h2>
      <span class="date"> </span>
    </div>
    <div class="article">
      
    </div>
  </div>
</s_notice_rep>
 
 
 
▶ 퍼머링크 / 인덱스
퍼머링크 페이지에서와 인덱스 페이지에서 표시될 내용을 구분할 수 있습니다.\ (퍼머링크 페이지/인덱스 페이지 영역 밖에서 사용되는 치환자는 둘 모두에서 표시됩니다)
 
1) 퍼머링크
 
<s_permalink_article_rep>: 퍼머링크 페이지일 때만 표시되는 영역입니다
내부에서 사용하는 치환자는 <s_article_rep> 내부에서 사용하는 치환자와 동일합니다)
 
 
2) 인덱스
 
<s_index_article_rep>: 인덱스 페이지일 때만 표시되는 영역입니다
 : '공지사항'에 등록된 글의 고유 주소
 : 글 제목
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
 : 본문 내용
 : 작성자 이름 (*팀블로그용 치환자)
: 글 내용 일부

<s_notice_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)
: 대표 이미지 썸네일 주소
: 대표 이미지 원본 주소
 
<s_index_article_rep>
  <div class="list_content">
    <s_notice_rep_thumbnail>
      <img src="">
    </s_notice_rep_thumbnail>

    <a href="" class="link_post">
      <strong class="tit_post"></strong>
      <p class="txt_post"></p>
    </a>

    <div class="detail_info">
      <a href="" class="link_cate">
        
      </a>
      <span class="txt_bar"></span>
      
    </div>
  </div>
</s_index_article_rep>
 
=
 
 
 
 




 
 




 
 
 
 
 
 
 
글 치환자(보호글)
 
 
▶ 보호글 치환자
 
<s_article_protected>: 보호글 그룹치환자
: 보호글의 고유 주소
: 보호글의 제목
: 카테고리 링크
: 카테고리 명
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 보호글의 비밀번호 텍스트 박스의 Id값(label 사용 용도)
: 보호글의 비밀번호를 입력하고 엔터키나 확인버튼을 눌렀을 때 실행될 자바스크립트 코드가 들어갑니다.
: 작성자 이름 (*팀블로그용 치환자)
 
<s_article_protected>
  <div class="entryProtected">
    <h2><a href=""></a></h2>
    <span class="date"></span>
    <p>보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.</p>
    <p>
      <label for="">비밀번호 ::</label>
      <input type="password" maxlength="16" id="" name="" value="" onkeydown="if (event.keyCode == 13)" />
      <input type="button" class="submit" value="submit" onclick="" />
    </p>
  </div>
</s_article_protected>
 
 
 
 
 
 
글 치환자(페이지)
 
 
▶ 페이지 치환자
 
<s_page_rep>: '페이지'가 출력되는 영역입니다.\ (스킨에 페이지치환자가 존재하지 않는 경우 글 치환자에 페이지가 표시됩니다.)
: 고유 주소
: 제목
: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)
: 글 발행 날짜 (yyyy. m. d.)
: 글쓴 세부시간 - 연도 (yyyy)
: 글쓴 세부시간 - 월 (mm)
: 글쓴 세부시간 - 일 (dd)
: 글쓴 세부시간 - 시 (HH)
: 글쓴 세부시간 - 분 (MM)
: 글쓴 세부시간 - 초 (SS)
: 본문 내용
: 작성자 이름 (*팀블로그용 치환자)
 
<s_page_rep>
  <div>
    <h2><a href=""></a></h2>
    <div>
      
    </div>
  </div>
</s_page_rep>
 
 
 
 
 
 
글 치환자(리스트)
 
 
▶ 리스트 치환자
리스트 치환자는 카테고리, 검색, 태그의 글 리스트를 표시합니다.
 
 
▶ 리스트 그룹
 
<s_list>: 리스트 그룹 치환자
: 카테고리 이름, 검색어, 태그명
: 글의 총 개수
: 리스트 설명 (카테고리인 경우 카테고리 설명, 그외 블로그 설명)
: 리스트 스타일 값 (class attribute로 활용 가능)
<s_list_image>: 리스트 대표 이미지가 있는 경우 동작
: 리스트 대표 이미지 (카테고리인 경우 카테고리 대표이미지, 그외 블로그 대표이미지)
 
 
▶ 아이템 반복 그룹
 
<s_list_empty>: 리스트에 글이 없는 경우 보이는 영역

<s_list_rep>: 리스트 아이템이 반복되는 영역
: 글의 고유 주소
: 글 작성 날짜 (yyyy.mm.dd)
: 글 작성 세부시간 - 연도 (yyyy)
: 글 작성 세부시간 - 월 (mm)
: 글 작성 세부시간 - 일 (dd)
: 글 작성 세부시간 - 시 (HH)
: 글 작성 세부시간 - 분 (MM)
: 글 작성 세부시간 - 초 (SS)
: 글의 제목
: 글이 속한 카테고리 이름
: 글이 속한 카테고리 글 목록 url
: 댓글 수
: 작성자 이름
: 글 내용 요약
: 대표 이미지 원본 주소

<s_list_rep_thumbnail>: 대표 이미지가 있는 경우 치환
: 대표 이미지
 
 
 
▶ 리스트 스타일
리스트 스타일을 사용하기 위해서는 스킨 정보 파일에 리스트 스타일 아이템을 정의해야 합니다. 리스트 스타일을 정의하면 카테고리 관리화면에서 리스트 스타일이 표시되고 사용자가 선택할 수 있습니다. 이를 사용하여 카테고리별로 다른 스타일을 적용할 때 사용할 수 있습니다.
 
<default>
    <liststyle>default liststyle 값</liststyle>
</default>
 
<liststyle>
  <item>
    <label>표시할 이름</label>
    <value>사용될 값</value>
  </item>
</liststyle>
 
 
▷ 사용 예
 
<!-- 스킨 예 -->
<s_list>
  <div class="searchList ">
    <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>
 
<!-- 변환 예 -->
<div class="searchList grid">
  <div style="background-image:url('https://sample.com/image.jpg')">
    <h3>'업데이트 소식'에 해당되는 글 2건</h3>
    <p>새롭게 업데이트되는 내용을 알려드립니다.</p>
  </div>
  <ol>
    <li>
      <span class="date">2016.01.25</span>
      <a href="/2289">1월 초대장이 배포되었습니다.</a>
      <span class="cnt">8</span>
      <img src="https://s1.daumcdn.net/cfile/tistory/1234">
    </li>
    <li>
      <span class="date">2015.12.22</span>
      <a href="/2283">12월 초대장이 배포되었습니다.</a>
      <span class="cnt">19</span>
      <img src="https://s1.daumcdn.net/cfile/tistory/5678">
    </li>
  </ol>
</div>
 
 
 
▶ 페이징
리스트, 글, 방명록에서 공통으로 사용하는 페이징 치환자
 
<s_paging>: 페이지가 출력되는 영역입니다
<s_paging_rep>: 페이지가 반복 출력됩니다
: 이전 페이지 링크
: 페이지 링크
: 페이지 번호
: 다음 페이지 링크
 
<s_paging>
  <div class="paging">
    <a  class="">◀ PREV </a>
    <span class="numbox">
      <s_paging_rep>
        <a  class="num">[]</a>
      </s_paging_rep>
    </span>
    <a  class="">NEXT ▶</a>
  </div>
</s_paging>
 
 
 
[ 사진 출처 ] 티스토리 가이드 캡쳐
 
 
 
 
 
 
 
지금까지 티스토리 스킨 글 치환자(댓글, 공지사항, 보호글, 페이지)에 대해 알아보았다.
 
 
 
 
도움이 되셨다면 로그인 없이 가능한
아래 하트♥공감 버튼을 꾹 눌러주세요! 
 
 
 
 

 



 
 
 
                    
        

  

    
반응형
    
    
    
  

        

                            
        









        

                            
        
 


        







    </div>
  </div>
</s_page_rep>

 

 

 

 

 

 

글 치환자(리스트)

 

 

▶ 리스트 치환자
리스트 치환자는 카테고리, 검색, 태그의 글 리스트를 표시합니다.

 

 

▶ 리스트 그룹

 

<s_list>: 리스트 그룹 치환자
: 카테고리 이름, 검색어, 태그명
: 글의 총 개수
: 리스트 설명 (카테고리인 경우 카테고리 설명, 그외 블로그 설명)
: 리스트 스타일 값 (class attribute로 활용 가능)
<s_list_image>: 리스트 대표 이미지가 있는 경우 동작
: 리스트 대표 이미지 (카테고리인 경우 카테고리 대표이미지, 그외 블로그 대표이미지)

 

 

▶ 아이템 반복 그룹

 

<s_list_empty>: 리스트에 글이 없는 경우 보이는 영역

<s_list_rep>: 리스트 아이템이 반복되는 영역
: 글의 고유 주소
: 글 작성 날짜 (yyyy.mm.dd)
: 글 작성 세부시간 - 연도 (yyyy)
: 글 작성 세부시간 - 월 (mm)
: 글 작성 세부시간 - 일 (dd)
: 글 작성 세부시간 - 시 (HH)
: 글 작성 세부시간 - 분 (MM)
: 글 작성 세부시간 - 초 (SS)
: 글의 제목
: 글이 속한 카테고리 이름
: 글이 속한 카테고리 글 목록 url
: 댓글 수
: 작성자 이름
: 글 내용 요약
: 대표 이미지 원본 주소

<s_list_rep_thumbnail>: 대표 이미지가 있는 경우 치환
: 대표 이미지

 

 

 

▶ 리스트 스타일
리스트 스타일을 사용하기 위해서는 스킨 정보 파일에 리스트 스타일 아이템을 정의해야 합니다. 리스트 스타일을 정의하면 카테고리 관리화면에서 리스트 스타일이 표시되고 사용자가 선택할 수 있습니다. 이를 사용하여 카테고리별로 다른 스타일을 적용할 때 사용할 수 있습니다.

 

<default>
    <liststyle>default liststyle 값</liststyle>
</default>

 

<liststyle>
  <item>
    <label>표시할 이름</label>
    <value>사용될 값</value>
  </item>
</liststyle>

 

 

▷ 사용 예

 

<!-- 스킨 예 -->
<s_list>
  <div class="searchList ">
    <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>

 

<!-- 변환 예 -->
<div class="searchList grid">
  <div style="background-image:url('https://sample.com/image.jpg')">
    <h3>'업데이트 소식'에 해당되는 글 2건</h3>
    <p>새롭게 업데이트되는 내용을 알려드립니다.</p>
  </div>
  <ol>
    <li>
      <span class="date">2016.01.25</span>
      <a href="/2289">1월 초대장이 배포되었습니다.</a>
      <span class="cnt">8</span>
      <img src="https://s1.daumcdn.net/cfile/tistory/1234">
    </li>
    <li>
      <span class="date">2015.12.22</span>
      <a href="/2283">12월 초대장이 배포되었습니다.</a>
      <span class="cnt">19</span>
      <img src="https://s1.daumcdn.net/cfile/tistory/5678">
    </li>
  </ol>
</div>

 

 

 

▶ 페이징
리스트, 글, 방명록에서 공통으로 사용하는 페이징 치환자

 

<s_paging>: 페이지가 출력되는 영역입니다
<s_paging_rep>: 페이지가 반복 출력됩니다
: 이전 페이지 링크
: 페이지 링크
: 페이지 번호
: 다음 페이지 링크

 

<s_paging>
  <div class="paging">
    <a  class="">◀ PREV </a>
    <span class="numbox">
      <s_paging_rep>
        <a  class="num">[]</a>
      </s_paging_rep>
    </span>
    <a  class="">NEXT ▶</a>
  </div>
</s_paging>

 

 

 

[ 사진 출처 ] 티스토리 가이드 캡쳐

 

 

 

 

 

 

 

지금까지 티스토리 스킨 글 치환자(댓글, 공지사항, 보호글, 페이지)에 대해 알아보았다.

 

 

 

 

도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요!