구글 블로그 css 기본 구조


구글 블로그는 따로 css 페이지를 사용하지 않고 xml 파일 안의 <head></head> 태그 안에 작성합니다.

<b:skin></b:skin> 태그를 이용해서 css 구간을 정해주고 그 안에 <![CDATA[  ]]>를 작성하면 xml파일이 시스템에서 해석될 때 문자들이 변하는 것을 막아줍니다.

그리고 css 작성은 <![CDATA[  ]]> 사이에 합니다.
<head>
<!-- CSS STARTS -->
<b:skin><![CDATA[
]]></b:skin>
</head>

<b:skin></b:skin>내부에는 코멘트로 테마 정보를 작성하는게 좋습니다.

테마 정보가 없는 테마는 작성된 css가 전부 일렬로 저장되어서 읽기 힘들게 바뀌기 때문입니다.
<head>
<!-- CSS STARTS -->
<b:skin><![CDATA[
/*
-----------------------------------------------
Blogger Template Style
Name:    테마 이름
Designer: 테마 제작자 이름
URL:     웹사이트 주소
-----------------------------------------------
*/
]]></b:skin>
</head>


구글 블로그는 css 내부에서 변수사용이 가능합니다.
<Variable name="변수 이름" description="테마 맞춤 설정에 뜰 변수 이름 (설명) " type="변수 타입" default="변수의 기본 값" hideEditor="테마 맞춤 설정에서 숨기기"  value="변수값"/>


이 변수는 구글 블로그의 테마 맞춤 설정을 사용하기 위해서는 꼭 작성해야 합니다.

또는 반복되는 값들을 한번에 조정하는 용도로도 사용이 가능합니다.

name은 변수의 고유 id이기 때문에 뛰어쓰기 없이 이어붙여서 작성해야합니다.

description은 테마 맞춤 설정에서 이름으로 뜨기 때문에 한글로 작성해도 됩니다.

type은 변수의 종류로 color, font, length, automatic이 있습니다.


<!-- font -->
<Variable name="garamond12" description="12px Garamond" type="font" default="normal 400 12px EB Garamond, serif" hideEditor="true"  value="normal 400 12px EB Garamond, serif"/>

<!-- color -->
<Variable name="body.background.color" description="Background color" type="color" default="#fff"  value="#ffffff"/>

<!-- length -->
<Variable name="sidebar.width" description="Sidebar width" type="length" min="100px" max="1000px" default="284px"  value="284px"/>

hideEditor는 테마 맞춤 설정에서 숨길 것인지 보일 것인지 설정 할 수 있는데 값은 true와 false를 이용해 조정합니다.

작성하지 않아도 알아서 true값으로 설정되기 때문에 맞춤 테마 설정에서 보여지게 할 생각이라면 설정해도 됩니다.

default와 value는 css에서 사용하는 값을 넣어주면 되는데 font면 font의 값, color면 hax값이나 rgba 값으로 넣어주면 됩니다.

default와 value가 이해하기 어려울 수도 있는데 말 그대로 기본으로 지정된 값과 현재 지정된 값이란 차이이기 때문에 그냥 둘 다 같은 값을 넣어주면 됩니다.

<Variable name="montserrat12" description="12px Montserrat" type="font" default="normal 400 12px Montserrat, sans-serif" hideEditor="true"  value="normal 400 12px Montserrat, sans-serif"/>


참고로 먼저 쓰여진 변수는 변수 안에 사용하는 것이 가능합니다.
<Variable name="garamond20" description="20px Garamond" type="font" default="normal 400 20px EB Garamond, serif" hideEditor="true"  value="normal 400 20px EB Garamond, serif"/>

<Variable name="body.title.font.small" description="Title font (small)" type="font" default="$(garamond20)"  value="normal 400 20px EB Garamond, serif"/>


변수는 <Group description="그룹 이름"></Group> 안에 포함된 것과 그룹 밖에 설정된 변수가 있습니다.
<Variable name="garamond12" description="12px Garamond" type="font" default="normal 400 12px EB Garamond, serif" hideEditor="true"  value="normal 400 12px EB Garamond, serif"/>

<Group description="Body">
<Variable name="body.background.color" description="Background color" type="color" default="#fff"  value="#ffffff"/>
</Group>

description은 내부의 변수들을 대표하는 이름으로 정해주면 되는데, 대부분 Body, Header, Post, Comment, Search와 같은 웹페이지의 구조의 이름으로 하고 내부도 똑같이 맞추어 주는 편이 테마 맞춤 설정을 사용하는 사람에게 편합니다.

한글로도 설정이 가능하기 때문에 한글을 사용해도 됩니다.

css 변수 사용의 예시)
<Variable name="body.color" description="body color" type="color" default="#ffffff"  value="#ffffff"/>
.css-example{
color: $(body.color);
}
※ 테마 맞춤 설정을 사용하지 않는다면 변수 사용하는 것 없이 기본 작성법대로 css를 작성해도 됩니다.

댓글 없음:

댓글 쓰기