티스토리 스킨 제작 도움말 : <s_if_var>, <s_not_var> 그룹치환자 사용법

지난 시간에 이어서 추가 설명을 드리겠습니다. 바로 이전 시간에 커버 기능에 대해 소개해드렸습니다. 친효스킨에서 커버 기능을 구축하기위해 HTML와 CSS, index.xml에 관련 태그들을 모두 마크업했는데 몇 가지 자세히 설명을 못 드린 부분이 있습니다. 그것을 오늘 소개시켜드리고자 합니다.

 

친효스킨 2.4 버전까지는 네 가지의 스타일 커버가 적용되었습니다. 그 중에서 썸네일 관련 태그를 HTML에서 살펴보시면 다음의 영역을 확인할 수 있습니다.

 

HTML 살펴보기

<div class="rgy-cover-list-wrap-inner-left" onclick="location.href='';" style="background-image: url(<s_if_var_rgy-thumbnail></s_if_var_rgy-thumbnail><s_not_var_rgy-thumbnail>./images/ch.gif</s_not_var_rgy-thumbnail>);">

특히 style 부분에 보시면 다소 복잡한 태그들이 이것 저것 들어가있습니다. 제가 웹퍼블리싱 시간에 배우기로는 이런 형태가 아닌, 스타일을 정의하는 CSS 부분에 대해서만 마크업하도록 배웠습니다. 근데 뭔가 이상한 태그들이 더 추가가 되어있군요. 이것이 바로 티스토리에서 제공하는 그룹 치환자 중 if / not 치환자입니다. 각 치환자에 대한 개념은 다음과 같습니다.

 

<s_if_var_커스텀네임> : 이 태그안에 콘텐츠가 존재한다면 치환함

<s_not_var_커스텀네임> : 위의 <s_if_var_>안에 콘텐츠가 없다면 치환함

 

즉 이 둘은 대부분 붙어다닙니다. 값치환자가 아닌 그룹 치환자에서 사용 가능합니다. 그러면 친효스킨의 커버에서 쓰인 위의 예시 코드에서의 의미를 해석해 보겠습니다. style 부분만 집중해서 설명하겠습니다.

 

style="background-image: url(<s_if_var_rgy-thumbnail></s_if_var_rgy-thumbnail><s_not_var_rgy-thumbnail>./images/ch.gif</s_not_var_rgy-thumbnail>);"

 

HTML에서의 인라인 스타일을 정의하는 방법은 태그 안에 style=""을 추가하면 됩니다. 여러 CSS 스타일 중 썸네일과 관련된것은 아무래도 이미지와 직접적인 연관이 있는 background-image일 것입니다. 이미지의 경로를 지정해주기 위해서 url();을 사용하게 되고 괄호 안에 이미지의 경로를 입력하게 됩니다.

 

빨간색으로 표시한 <s_if_var> 관련 태그를 살펴보시면 안쪽에 형태의 값치환자가 있다는걸 확인할 수 있습니다. 사용자가 임의로 만든 값치환자를 사용했으니 이것은 필시 스킨편집 페이지에서 뭔가 사용자가 임의로 설정하는 값을 불러온다는것을 뜻합니다. 그러니 index.xml을 살펴보도록 하겠습니다. rgy-thumbnail을 검색하여 찾으면 될 것입니다.

 

index.xml 살펴보기

<variablegroup name="레이아웃 설정">
    <variable>
        <name>rgy-thumbnail</name>
        <label>
            <![CDATA[ 대표 썸네일 ]]>
        </label>
        <type>IMAGE</type>
        <option />
        <default></default>
        <description>
            <![CDATA[ 대표 썸네일 이미지를 설정합니다. ]]>
        </description>
    </variable>
</variablegroup>

그러면 이렇게 index.xml 페이지에 대표 썸네일을 지정할 수 있는 옵션이 세팅되어 있음을 확인할 수 있습니다. 데이터 타입을 살펴보니 <type> 안쪽에 IMAGE라고 마크업 되어있습니다. 즉 이것은 이미지를 로드할 수 있는 사용자 지정 옵션이라는것을 확인할 수 있습니다.

 

친효스킨 스킨편집 화면의 모습입니다. 이렇게 레이아웃 카테고리에 대표 썸네일이라는 제목으로 이미지 업로드가 가능한 버튼이 설정되어 있음을 확인할 수 있을 것입니다. 즉 index.xml 페이지에서 <type>의 IMAGE는 이미지 업로드 버튼과 연결이 된다는것을 알 수 있습니다.

 

그러면 <s_not_var_> 그룹치환자는 무엇인지 대충 감이 올 것입니다. 안쪽에 보시면 친효스킨의 기본 썸네일 이미지 경로가 있다는 것을 알 수 있습니다. 즉 <s_if_var_> 그룹치환자에서 이미지 업로드를 하면 이것을 최우선으로하여 썸네일을 출력하고 만약 대표 썸네일을 따로 지정하지 않는다면 그냥 기본 썸네일을 출력한다는 뜻으로 해석이 됩니다. 보통 티스토리에서의 if / not 그룹치환자는 이렇게 이미지 관련 설정을 적용할 때 많이 사용하는 편입니다. 끝.