blogger

blogger - b:skin 태그

8월 03, 2020
XML 블로거의 CSS 를 설정하는 태그로 <head> 에 삽입되는 태그입니다. <b:skin> 태그에는 CSS 와 함께 사용되는 CSS 코드와 변수 선언을 설정할 수 있습니다. 변수는 블로거 편집기의 테마 > 맞춤 설정에서 CSS 색상 값, 폰트 및 문자열 값을 수정할 수 있습니다.

<b:template-skin> 태그는 블로거 편집기의 레이아웃 디스플레이를 담당하는 CSS 코드입니다. 따라서 이 태그는 가급적이면 수정하지 않는 게 좋습니다.

<b:skin>
  <![CDATA[ … ]]>
</b:skin>

<b:template-skin>
  <![CDATA[ … ]]>
</b:template-skin>

<b:skin> 과 <b:template-skin> 태그는 분리되어 있으며 중첩 될 수 없습니다. 그리고 스킨 태그는 필수로 포함되어야 하므로 XML 블로거에서 제거할 수 없습니다. 각 태그는 하나만 정의되어야 하므로 중복되어 정의할 수 없고, 또, <head>와 </head>내에 위치해야 합니다.

<b:skin> 태그에서 변수를 지정할 수 있는 간단한 예를 설명합니다.

<b:skin><![CDATA[
/*
<Variable name="main.color" description="메인 테마 색상" type="color" default="#0088ff" value="#0088ff"/>
*/

body {color: $(main.color)}
.class > li {background-color: $(main.color}}
]]></b:skin>

변수를 선언하려면 /* … */ 주석 안에 변수가 선언되어야 하며 name 속성의 값이 변수 이름, type 속성에는 color, font, string 중 하나가 올 수 있습니다. 예를 들어 color 라고 정의하면 색상 값으로 사용할 수 있습니다.

위 코드에서 CSS 에 선언된 변수를 사용하기 위해 $(변수이름) 으로 지정하면 $(변수이름) 이 가리키는 value 값으로 교체됩니다. 위 코드에서 $(main.color) 이 가리키는 색상 값은 “#0088ff” 입니다.


description 속성의 값 “메인 테마 색상”은 블로거 맞춤 설정(테마 디자이너)에서 표기될 내용입니다. default 속성은 나중에 설정된 값이 잘못되었을 경우 기본값으로 되돌릴 때 사용됩니다.

다음은 변수를 그룹화하여 관리하는 방법을 설명합니다.

<b:skin version='1.0.0'><![CDATA[
/*
<Group description="Theme Colors" selector="body">
 <Variable name="main.color" description="Theme Color" type="color" default="#D44E33" value="#D44E33"/>
 <Variable name="main.dark.color" description="Dark Color" type="color" default="#3E8DDB" value="#3E8DDB"/>
 <Variable name="main.read.more.color" description="Read More Color" type="color" default="#0073AA" value="#0073AA"/>
</Group>

<Variable name="body.link.color" description="Link Color" type="color" default="$(main.color)" value="#f2132d"/>
<Variable name="body.text.font" description="Font" hideEditor="true" type="font" default="14px Lato, sans-serif"  value="14px Lato, sans-serif"/>
*/

.button1 {background-color: $(main.color)}
.button2 {background-color: $(main.dark.color)}
.button3 {background-color: $(main.read.more.color)}
.button4 {background-color: $(main.link.color)}
.button5 {font-size: $(body.text.font)}
]]></b:skin>

3개를 그룹화한 변수와 일반 변수 두 개가 있습니다. <Group>태그로 변수를 묶으면 그룹화가 됩니다. 그룹의 selector 속성은 CSS 의 셀렉터와 동일하게 동작합니다. 여기서 셀렉터는 body 태그를 가리키므로 자동으로 body 를 선택합니다.


그림을 보는 바와 같이 “Theme Colors”, “링크 색상”의 두 개의 메뉴가 나옵니다. “Theme Colors” 는 3개를 그룹화하였기 때문에 한 화면에 변수 3개가 보여지고, 나머지 변수 두 개 중에서 “링크 색상”이라는 메뉴 하나만 나타나는 것을 볼 수 있을 텐데, 보이지 않는 변수 하나는 폰트 변수로 hideEditor="true" 로 설정하였기 때문에 “맞춤 설정”에서는 보여지지 않습니다.

CSS 변수를 단순한 문자열 출력에 사용할 수도 있습니다. 예를 들어 “하보니 PHP”라는 문자열 값을 변수에 담아 원하는 위치에 출력하고자 할 때 사용됩니다. type 속성에 “string” 으로 지정한 다음 문자열 변수를 출력할 때는 <data:skin.vars.변수이름/> 으로 접근합니다. 다음 예를 보도록 하죠.

<b:skin version='1.0.0'><![CDATA[
/*
<Variable name="habony.css" description="체이닝" type="string" default="하보니 PHP" value="하보니 CSS"/>
<Variable name="habonyphp" description="문자열" type="string" default="하보니 PHP" value="하보니 PHP"/>
*/
]]></b:skin>
</head>

<body>
1. <data:skin.vars.habony_css/><br/>
2. <data:skin.vars.habonyphp/>
<!--//
결과:
1. 하보니 CSS
2. 하보니 PHP
//-->

위 코드에서 변수 이름을 “habonyphp”로 하였고 value 값을 “하보니 PHP” 입니다. 이 변수를 원하는 곳에 출력하고자 할 때는 <data:skin.vars.habonyphp/> 로 지정하면 변수로 사용할 수 있습니다. 다만, 점(.)이 붙는 체이닝(변수)라면 <style> … </style>에서는 $(변수이름)형식으로 그대로 사용할 수 있지만 <body>에서는 점(.)을 언더바(_)로 변환해주어야 합니다.

<b:template-skin>은 블로거 레이아웃 편집기의 디스플레이를 담당합니다. 간혹 일반 CSS 코드와 충돌이 발생할 수 있으므로 다음과 같이 레이아웃 모드일 때만 활성화하도록 하면 실제 운영 중인 블로그 디자인에는 영향을 받지 않게 됩니다.

<b:if cond='data:view.isLayoutMode'>
  <b:template-skin>
    <![CDATA[ … ]]>
  </b:template-skin>
</b:if>

Tag:

0 Comments

0 댓글