티스토리 스킨 제작 도움말 : COLOR 타입을 알아보자

이번에는 타입 중 아직까지 언급을 하지 않은 마지막 단계인 COLOR(컬러)입니다. 어떤 설정인지 단어만 봐도 바로 이해할 수 있을겁니다. 바로 그렇습니다. 색 지정에 대한 설정이 가능한 옵션을 부여합니다. 친효스킨에서는 컬러 설정 부분이 상당히 많이 쓰입니다. 대표적으로 댓글과 메인 테마 색상을 설정하는데 이 옵션이 사용되었습니다. 댓글의 경우는 세부적으로 나뉘어 다양한 영역에 대한 색 지정이 가능합니다.

COLOR 타입 또한 STRING 처럼 HTML 문서 내의 <head>안쪽에 존재하는 <style>영역에서 CSS를 제어할 수 있습니다. 또한 <body>내의 인라인 방식의 스타일도 제어가 가능합니다. 하지만 굳이 인라인 방식까지 제어할 필요는 없는 것 같습니다. 그냥 <style>내에서도 충분합니다. COLOR 타입은 STRING과 똑같다고 보시면 됩니다. 그럼 바로 살펴보겠습니다.

HTML 살펴보기

<s_if_var_articleLinkColor > .article p > a,
.article p > a::before,
#contents .article .tx-link,
#contents .article table a,
#contents .article .tx-quote-tistory p a {
    color:  !important;
}
</s_if_var_articleLinkColor >

<head>안쪽에 마크업 되어있는 <style>의 수 많은 코드 중 일부를 가지고 왔습니다. articleLinkColor라고 적혀있는것으로 보아하니, 본문의 링크 컬러 색상을 설정할 수 있도록 세팅된 상태로 보여집니다. STRING에서처럼 기본적으로 그룹 치환자가 색 영역을 적용시킬 매소드를 모두 감싸고 있고, 색을 지정할 color에 값치환자를 적용시켰습니다. !important를 추가 마크업 함으로서 가장 우선적으로 적용되도록 하였습니다.

값치환자, 그룹치환자의 네이밍은 모두 같게 만들어줍니다. 위의 예시에서는 방금 언급했던 articleLinkColor라고 되어있습니다. 이건 제가 그냥 저만 알아볼 수 있도록 만든것일 뿐입니다. 여러분들은 여러분들의 마음대로 만드시면 됩니다. 단 수차례 강조했던 것처럼 숫자가 먼저 오면 안 됩니다. 반드시 알파벳 혹은 알파벳+숫자 조합으로 사용하시기 바랍니다. 알파벳은 대소문자 구별이 됩니다. 왠만하면 소문자만 사용하시는것을 추천합니다.

CSS 스타일을 지정하는 것이기에 선택자도 제대로 마크업 해줘야 합니다. 위의 예시에서는 적용 범위가 총 5개입니다. 선택자를 쉼표로 구별함으로서 해당 경로의 color를 모두 한꺼번에 적용시킬 수 있습니다. 단순하게 생각하시면 됩니다. CSS를 그룹 치환자로 감싸주고 스타일 매소드를 값치환자를 사용한다는것만 기억하시면 됩니다.

index.xml 살펴보기

<variable>
    <name>articleLinkColor</name>
    <label>
        <![CDATA[ 본문 링크색상 ]]>
    </label>
    <type>COLOR</type>
    <option />
    <default>#1D67B1</default>
    <description>
        <![CDATA[ 본문 기본 링크 색상을 선택합니다. ]]>
    </description>
</variable>

이제 index.xml 페이지와 연결을 시켜줘야 합니다. 치환자 네이밍을 그대로 사용하면 된다고 많이 언급했을 것입니다. 친효스킨의 index.xml 문서를 열어보시면 위와 같은 코드를 찾을 수 있습니다. <name>안쪽에 위에서 말씀드렸던 articleLinkColor가 그대로 입력되어 있음을 확인할 수 있습니다. 이렇게해서 HTML과 index 문서가 서로 동기화 되었습니다. <label>안의 <![CDATA[ 안쪽에 스킨 설정 페이지에서 보여질 텍스트를 입력합니다. <type>은 COLOR로 입력합니다. 그리고 <default>안쪽에는 기본 색상값을 16진수 코드로 입력합니다. 16진수 헥사코드를 사용하기에 #을 붙여줍니다. <desctiption>에는 설명을 입력하면 되는데 스킨 편집 화면에서는 보이지 않습니다.