[티스토리 블로그 스킨 제작 가이드 강의 3] 치환자

안녕하세요. 블로그 크리에이터입니다.

이번 시간에는 치환자라는 개념에 대해서 알아보겠습니다. 이 개념을 잘 이해하신다면 나머지 티스토리 스킨 가이드 80% 정도는 쉽게 읽으실 수 있을거에요.

치환이란?

치환이란 우리가 보통 수학에서 많이 듣는데요. 어떤 값을 다른 문자로 바꿔서 보기 편하게 만든 다음 계산을 하곤 합니다. 쉽게 말하면 다른 무언가로 바꾼다고 보시면 되요.

티스토리에서는 그룹치환자, 값치환자 이렇게 두 가지 형태를 띄고 있습니다.

그룹 치환자

그룹치환자는 HTML 태그처럼 여는 태그와 닫는 태그로 이루어져있구요. 이름은 HTML 기본 태그와 겹치지 않는 독특한 이름으로 구성되어있습니다.

      <이름> ... </이름>
    

이후에 다룰 거지만 간단한 예를 들어보자면

값 치환자

값 치환자는 괄호와 샵, 그리고 밑줄로 구성되어있어요.

      [##_이름_##]
    

값 치환자는 해당 위치에 딱 어떤 값이 들어갑니다. 예를 들어 [##_title_##] 라고 넣으면 이 값은 블로그 제목으로 바뀌게 됩니다.

      [##_title_##]

블로그 크리에이터의 블로그
    

그 외에도 [##_blog_image_##]라고 넣으면 블로그 대표이미지가 들어간 img태그로 바뀌기도 하구요.

      [##_blog_image_##]

<img alt="블로그이미지" src="https://..." />
    

[##_blog_menu_##] 라고 넣으면 메뉴가 들어간 태그들이 나타나기도 합니다.

      [##_blog_menu_##]

<ul>
  <li class="t_menu_home first"><a href="/" target="">홈</a></li>
  <li class="t_menu_tag"><a href="/tag" target="">태그</a></li>
  <li class="t_menu_guestbook last"><a href="/guestbook" target="">방명록</a></li>
</ul>
    

이렇게 값 하나로 바뀌는 경우도 있고 여러 태그가 들어가는 경우도 있습니다.

그룹 치환자의 역할

반면에 그룹 치환자는 어떤 특정한 값으로 바뀌지는 않지만 대신 다른 기능을 가지고 있습니다.

1. 치환자 활성화

어떤 치환자들은 특정 그룹 치환자 안에서만 사용할 수 있어요. 예를 들어 태그들을 보여주는 그룹 치환자가 있습니다.

      <s_tag_rep> </s_tag_rep>
    

이 안에서만 사용할 수 있는 값 치환자들이 있는데요.

이 치환자들은 s_tag_rep라는 그룹 치환자 안에서만 사용할 수 있습니다.

      <s_tag_rep>
  <a 
    href="[##_tag_link_##]" 
    class="[##_tag_class_##]"
  > 
    [##_tag_name_##]
  </a>
</s_tag_rep>
    

만약 제가 태그1이라는 태그를 하나 만들었다면 이런 식으로 바뀌게 됩니다.

      <a 
  href="/tag/태그1" 
  class="cloud5"
> 
  태그1 
</a>
    

앞으로 배울 것들은 이렇게 치환자들이 어떤 값으로 바뀌는지 배우는 거에요. 그렇다고 암기는 하실 필요 없구요. 하나씩 배우고 활용하면서 필요한 치환자들을 그 때 그 때 찾아서 잘 활용만 해주시면 됩니다.

2. 조건에 따라 나타나기

그리고 그룹 치환자의 또다른 기능은 상황에 따라 나타나거나 사라지게 하는 겁니다. 카테고리를 클릭하면 글 목록이 나와야하고 글 목록에서 글을 선택하면 글 내용이 나와야합니다.

그룹 치환자는 현재 주소에 맞게 나타나거나 사라지게 해주는 역할도 해줍니다. 예를 들어 <s_guest>라는 그룹 치환자는 방명록에 들어갔을 때에만 나타나요.

      <s_guest>
  <div class="guestbook">
    <h3>방명록</h3>
    <div class="guestWrite">입력 폼</div>
    <div class="guestList">리스트</div>
  </div>
</s_guest>
    

다음과 같이 나타납니다.

      <div class="guestbook">
  <h3>방명록</h3>
  <div class="guestWrite">입력 폼</div>
  <div class="guestList">리스트</div>
</div>
    

아니면 썸네일이 있는지에 따라 나타나거나 사라지게 해주는 치환자도 있죠.

      <s_article_rep_thumbnail>
  <img src="[##_article_rep_thumbnail_url_##]" />
</s_article_rep_thumbnail>
    

썸네일이 있을 때 다음과 같이 나타납니다.

      <img src="https://..." />
    

이런 식으로 나타나거나 사라지게 해서 HTML 파일 하나로 여러 태그를 사용할 수 있습니다. 이런 것도 하나씩 알아볼거니까요 걱정하지 않으셔도 됩니다.

3. 반복적으로 나타내기

글 목록이나 댓글, 태그들은 HTML에서 그 개수만큼 태그를 만드는 게 아니라 그룹치환자가 대신해서 그 개수만큼 여러 개의 태그를 만들어줍니다.

예를 들어 위에서 다루었던 태그들 예시를 다시 들어볼게요.

      <s_tag_rep>
  <a 
    href="[##_tag_link_##]" 
    class="[##_tag_class_##]"
  > 
    [##_tag_name_##]
  </a>
</s_tag_rep>
    

만약 태그 1, 태그 2, 태그 3 이렇게 세 가지 태그를 만들었다면 위 그룹치환자와 값 치환자는 이런 식으로 치환됩니다.

      <a href="/tag/태그1" class="cloud5"> 태그1 </a>
<a href="/tag/태그2" class="cloud5"> 태그2 </a>
<a href="/tag/태그3" class="cloud5"> 태그3 </a>
    

네 이런 식으로 여러 개 만들어주는 기능도 있습니다.

마무리하며

지금은 이해가 안되더라도 상관없어요. 하나씩 더 자세하게 알아볼거니까요. 지금은 그룹 치환자랑 값 치환자라는 것이 있고 이것들은 스킨 편집에서 입력하면 어떤 값으로 바뀌는구나 정도만 아셔도 충분합니다.

네 이렇게해서 이번 시간에는 치환자에 대해서 알아보았습니다.

감사합니다.