친절한효자손 취미생활

이번에는 index 페이지에 있는 여러 타입들 중에서 SELECT에 대해서 자세히 알아볼 것입니다. 친효스킨에도 Select 타입의 스킨 설정 옵션이 몇 가지 적용되어 있습니다. 단어의 의미를 그대로 직역해 보시기 바랍니다. 말 그대로 선택이라는 의미입니다. 그렇습니다. 여러가지 옵션들 중에서 선택을 필요로할때 적용할 수 있는 스킨 옵션입니다.

 

지금까지 소개해드렸던 스킨 제작 가이드 중에서 아마 설명이 많이 복잡하게 들어갈 것 같습니다. 이게 단순하게 작업이 진행되는것이 아니기 때문입니다. BOOL 타입의 경우는 그룹치환자를 만들어서 감싸주고 치환자 매소드를 index 페이지에 연결만 시켜주면 On / Off 스위치를 스킨설정 페이지에 만들 수 있었습니다. 그러나 SELECT 타입은 이렇게 단순하지가 않습니다.

 

친효스킨의 여러 옵션 중 하나인 본문 BOLD 처리에 대한 선택 옵션입니다. 보시다시피 형광펜모드 혹은 오리지널인 두껍게 모드 둘 중 하나를 선택할 수 있습니다. 선택한 옵션으로 본문에 두껍게 처리에 대한 결과가 다르게 표시됩니다. 이 옵션은 어떻게 만들어낼까요?

 

CSS 먼저 세팅할 것

먼저 생각해야 할것은 바로 CSS입니다. 형광펜모드와 두껍게, 이 두가지의 서로 다른 스타일을 선택하게 만든다는 의미는 두 가지의 CSS 스타일을 필요로 한다는 뜻입니다. 그러므로 웹코딩이 조금 더 복잡해질 것입니다. 친효스킨을 기준으로 CSS에 세팅되어있는 코드는 다음과 같습니다.

 

/* 친효애드온: 형광펜모드 - 본문 글씨 두껍게 스타일 시작 */
.rgy-chAddOn-articleBoldOn .tt_article_useless_p_margin > p > b,
.rgy-chAddOn-articleBoldOn .article > p > b,
.rgy-chAddOn-articleBoldOn div#toc-contents > p > b {
    padding: 1px 4px;
    margin: 0 2px;
    border-radius: 3px;
    font-weight: normal;
    color: #222;
    background-color: #C0FFEE;
}

.rgy-chAddOn-articleBoldOff .article > p > b,
.rgy-chAddOn-articleBoldOff .tt_article_useless_p_margin > p > b,
.rgy-chAddOn-articleBoldOff div#toc-contents > p > b {
    font-weight: bold;
}

지금 앞에 보시면 뭔가 서로 다른 클래스명이 마크업 되어있음을 확인할 수 있습니다. 하나는 .rgy-chaddOn-articleBlodOn 이고 다른 하나는 rgy-chaddOn-articleBlodOff 입니다. CSS는 경로게 세분화될수록 서로 다른 스타일을 적용시킬 수 있습니다. 위의 두 가지는 완전 서로 다른 CSS 경로입니다. 그렇다면 방금 언급한 클래스명을 제어할 무언가가 필요할 것입니다. 이것을 위해서 index.xml 페이지가 필요합니다.

 

index.xml 살펴보기

<variable>
    <name>rgy-chAddOn-articleBold</name>
    <label>
        <![CDATA[ 본문 BOLD 처리 ]]>
    </label>
    <type>SELECT</type>
    <option>
        <![CDATA[[{"name":"rgy-chAddOn-articleBoldOn","label":"형광펜모드","value":"rgy-chAddOn-articleBoldOn"},{"name":"rgy-chAddOn-articleBoldOff","label":"두껍게","value":"rgy-chAddOn-articleBoldOff"}]]]>
    </option>
    <default>rgy-chAddOn-articleBoldOn</default>
    <description>
        <![CDATA[ 본문의 Bold 처리를 형광펜모드 또는 굵게 설정합니다. ]]>
    </description>
</variable>

위의 코드는 친효스킨의 index.xml 페이지에 있는 형광펜 기능의 일부분입니다. 보시면 안쪽에 뭔가 복잡하게 들어가 있는것을 확인할 수 있습니다. 먼저 <option> 부분을 살펴봅시다.

 

name : 클래스명 입력

label : 스킨 편집 옵션에서 보여지는 선택 옵션 이름

value : 클래스명 다시 한 번 똑같이 입력

 

이런 형태로 작성이 되어있음을 확인할 수 있습니다. 대괄호와 소괄호, 따옴표, 쉼표등을 주의해서 제대로 작성해야합니다. 안 그러면 index.xml 페이지 전체가 망가집니다. 그러면 스킨이 정상적으로 출력이 되지 않게 됩니다. 소괄호의 경우 선택 옵션별로 묶여있음을 알 수 있습니다.

 

<type>은 당연히 SELECT로 설정해야 합니다. 그래야 스킨편집 화면에 <option>에 명시된 내용대로 선택을 할 수 있도록 제어가 가능해집니다.

 

<default>는 여러 선택 옵션 중 기본값을 정의하는 부분입니다. 친효스킨의 경우는 형광펜모드가 기본값입니다. 그렇기에 아까 형광펜모드에 대한 클래스값인 rgy-chaddOn-articleBoldOn을 입력한 것입니다. 아시다시피 클래스명은 알파벳 대소문자를 구별합니다. <description>에는 해당 옵션에 대한 설명을 작성하시면 되는데 스킨 편집 화면에 표시가 되지는 않습니다.

 

이제 <name>부분을 살펴보겠습니다. 그런데 아까 CSS의 클래스명과는 조금 다릅니다. 이건 대체 어디에서 연결이 되는 것일까요? rgy-chAddOn-articleBold 까지만 적혀있고 뒤에 On이나 Off가 없습니다. 여기가 정말 중요한 포인트입니다. 아시다시피 index.xml과 HTML은 연결을 지어주는 name이 있어야합니다. 그런데 CSS에는 분명 이게 없습니다. 따라서 십중팔구 HTML에 마크업이 되어있어야 합니다.

 

HTML 살펴보기

그렇다면 대체 어디에서 제어를 해주는 것일까요? 친효스킨의 경우 이런 코드를 찾을 수 있습니다.

 

<!-- 콘텐츠 영역 시작 -->
<div id="contents" class="<s_if_var_rgy-contentsLR-element>[##_var_rgy-contentsLR-element_##]</s_if_var_rgy-contentsLR-element> <s_if_var_rgy-chAddOn-articleBold>[##_var_rgy-chAddOn-articleBold_##]</s_if_var_rgy-chAddOn-articleBold> <s_if_var_rgy-article-img-border>[##_var_rgy-article-img-border_##]</s_if_var_rgy-article-img-border> <s_if_var_rgy-article-autolink>[##_var_rgy-article-autolink_##]</s_if_var_rgy-article-autolink> <s_if_var_rgy-article-reply>[##_var_rgy-article-reply_##]</s_if_var_rgy-article-reply> <s_if_var_rgy-article-fontfamily>[##_var_rgy-article-fontfamily_##]</s_if_var_rgy-article-fontfamily>">

바로 이 부분입니다. 조금 복잡해 보이지요? 불필요한 부분을 제거해 보겠습니다.

 

<div id="contents" class="<s_if_var_rgy-chAddOn-articleBold>[##_var_rgy-chAddOn-articleBold_##]</s_if_var_rgy-chAddOn-articleBold>">

 

그러면 이런 부분을 만날 수 있습니다. 바로 여기가 index.xml과 링크가 되는 구간입니다. 그룹치환자가 들어있군요. 그룹 치환자에 대해서는 이미 한 차례 이상 설명을 드렸으니 더 이상은 언급을 하지 않겠습니다. 그런데 그룹치환자 안에 값 치환자가 들어있습니다. SELECT 타입의 옵션을 설정할때는 이 형태가 기본값이라고 이해하고 계시면 될 것 같습니다. 그룹 치환자 안에 있는 값 치환자가 index.xml의 SELECT 안에 있는 옵션들의 클래스값을 로드하게 됩니다. 그래서 선택한 값의 클래스값만 노출되고 결국 CSS에서 해당 경로의 스타일을 적용시키는 원리입니다.

 

보시면 위의 그룹 및 값 치환자가 콘텐츠 영역의 div안에 클래스명으로 마크업이 되어있음을 확인할 수 있습니다. 대부분 티스토리 반응형 스킨들을 살펴보면 <body>에 마크업하는데 저는 <body>태그에만 너무 몰빵하면 복잡해보여서 조금 영역을 나눠서 마크업했습니다. 어차피 본문에 대한 옵션이니 이것을 콘텐츠의 최상위 루트 태그에 넣어도 상관은 없을 것 같았습니다. 적용 결과 전혀 이상 없이 정상 작동함을 확인했구요. 이렇게 삼박자가 정확히 맞아떨어져야 스킨이 정상작동을 하게 됩니다. 다시 한 번 요약하겠습니다.

 

중요포인트

1. CSS 스타일을 미리 세팅해 놓을 것

2. index.xml 페이지에서 타입은 SELECT로, 옵션에는 CSS 스타일에 작성한 클래스명을 그대로 작성할 것

3. HTML에 그룹+값 치환자로 index.xml 페이지의 <name>과 동일하게 서로 작성할 것

 

이렇게 세 가지를 꼭 기억하시기 바랍니다. 개인적으로 가장 난이도가 있었던 부분입니다. 본문의 두껍게 옵션 선택은 간단해서 이 정도로 끝냈지만 사이드바에 대한 선택 옵션은 반응형 미디어쿼리까지 적용시켜야 했기에 조금 어려웠습니다. 여러분들께서는 오류 없이 무사히 잘 만들어보시기 바랍니다. 끝.

공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글

비밀글모드