구글 블로그(blogger) 템플릿 변수 정의 (variable definitions)

그림1

블로거 템플릿을 편집할 때 스킨 부분을 클릭하면 가장 먼저 보이는 것이 바로 'variable definitions' 입니다. 'variable definitions'은 우리 말로는 '변수 정의', 또는 '변수 설정' 등으로 표현할 수 있습니다.

그림2

쉽게 말하면, 필요할 때마다 꺼내쓸 수 있도록, 몇가지 값(value)들을 미리 설정해놓는다는 것입니다. 그 동안 블로거를 하면서 이 부분은 거의 건드리질 않았는데, 이번에 폰트 설정하면서 공부를 해보니 꽤 유용한 기능임을 알 수 있었습니다.

먼저, 이 기능을 활용할 수 있으려면, 각각의 단어들이 무엇을 의미하는지를 알아야 할 텐데요.

name : name은 해당 변수의 고유한 이름, 또는 ID 입니다. 변수 이름에는 빈 공간(스페이스바)을 입력할 수 없습니다. 아래에서 다시 설명하겠지만, 변수를 꺼내 쓸 때 이 name을 이용합니다.

description : 해당 변수에 대한 간단한 설명입니다. description은 일종의 "display name"으로, 여기에 입력한 텍스트는 템플릿 디자이너의 고급 설정에 표시됩니다.

예1 :

 <Variable name="HTML1.background.color" description="쿵쿵따" type="color" default="#fb5e53" value="transparent"/>  

그림3

type : type은 변수의 유형입니다. color나 font, length, string(문자열), automatic 등으로 설정할 수 있습니다. color나 font 유형은 템플릿 디자이너를 통해서 수정할 수 있는 유형입니다. 나머지 유형의 변수는 HTML 편집 모드를 통해서만 수정할 수 있습니다.

default : 해당 변수에 대한 템플릿의 기본(default) 값(value)입니다. 템플릿 디자이너의 고급 설정 화면에서 '고급 변경사항 적용 취소'를 누르면 이 기본(default) 값으로 돌아갑니다. <예1-그림3>에서, 색상의 기본(default) 값이 "#fb5e53" 으로 설정되어 있으므로, 하단의 '쿵쿵따의 고급 변경사항 적용 취소' 버튼을 누르면 <그림4>에서처럼 default 값인 "#fb5e53"이 출력되게 됩니다.

그림4

value : 해당 변수의 현재 값(value)입니다. 현재의 템플릿이 어떤 값을 갖게 하려면, 바로 이 value 값에 주어져야 합니다.


이렇게 5가지로 정의된 변수(variables)들은 그룹으로도 묶을 수 있습니다.

예2 :

   <Group description="내가 만든 메뉴" selector="#HTML2">  
    <Variable name="HTML2Font" description="짜장면" type="font"  
      default="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>  
    <Variable name="HTML2Fontcolor" description="짱뽕" type="color" default="#666666" value="#FFFFFF"/>  
   </Group>  

<Group> ... </Group> 태그에서,

description : 개별 변수에서와 마찬가지로 <Group> 태그의 description도 해당 그룹에 대한 설명이며, 여기에 입력된 텍스트는 템플릿 디자이너의 고급 설정에 표시됩니다.

그림5

selector : CSS에서의 선택자(selector)와 같은 개념입니다. 템플릿 디자이너에서 [고급]의 하위메뉴를 클릭하면 하단 화면에 해당 요소가 붉은 점선 하일라이트로 보여지게 되는데, 어떤 요소가 하일라이트될지를 결정하는 것이 바로 <Group> 태그의 selector 입니다.


이렇게 지정해둔 변수들은 템플릿 디자이너에서뿐만 아니라, 다른 요소들의 스타일을 설정할 때도 활용할 수 있습니다.

컬러나 폰트를 요소마다 일일이 지정하게 되면, 템플릿을 변경할 때마다 모든 요소들을 일일이 다 수정해야 합니다. 그러나, 컬러나 폰트 값을 변수로 지정하면, 변수만 변경하면 이 변수와 연동되어 있는 다른 요소들의 값을 같이 수정할 수 있습니다. 활용하기에 따라서, 매우 편리하게 쓰일 수 있는 기능입니다.

그림6

예를 들어, 어떤 위젯의 폰트와 컬러를 설정할 때 <예3>에서 처럼 폰트와 컬러 값을 직접 설정할 수도 있겠지만,

예3 :

 #위젯id {  
 font:italic bold 12px Georgia, serif;  
 color: #2580a2;  
 }  

폰트와 컬러 값이 템플릿의 다른 요소들의 값과 크게 다르지 않다면, <예4>에서처럼 변수로 지정할 수 있을 것입니다.

예4:

 #위젯id {  
 font: $(body.font);  
 color: $(link.color);  
 }  
   

변수 정의(variable definitions)에 정의된 값을 지정할 때는,

$(name)

<예4>에서 처럼, $과 괄호를 입렵하고 괄호 안에 원하는 변수의 name 을 지정해주면 됩니다.


좀 더 직관적인 예를 들어보겠습니다.

 <Variable name="baseball" description="Link Color" type="color" default="#2198a6" value="#2580a2"/>  

변수가 이렇게 설정되어 있고,

  #위젯id {   
  color: $(baseball);   
  }   

이런식으로 위젯의 컬러 값으로 변수를 끌어다썼다면, 복잡해 보이지만 위젯의 컬러 값으로 선택되는 것은 결국 value의 값, 즉 #2580a2 입니다.



! 해외 블로거의 글을 참고하여 작성했습니다.
Template Variables, The Blogger Guide
How to Make Custom Templates Support Blogger Template Designer, Blogger Illustrated

CSS에서의 색상 설정

CSS에서 색상은 다음과 같은 방식으로 지정될 수 있다.

• RGB 색상
• Hexadecimal 색상
• RGBA 색상 ★
• HSL 색상
• HSLA 색상 ★
• 색상 키워드(이름)

RGB 색상

RGB 색상 값은 모든 주요 브라우저에서 지원된다. RGB 색상 값은 rgb(red 빨강, green 녹색, blue 파랑)으로 지정한다. 각 변수(빨강, 녹색, 파랑)는 색상의 강도를 정의하고 0부터 255 사이의 정수, 또는 퍼센트 값(0% ~ 100%)으로 지정할 수 있다.

예를 들어, rgb(0, 0, 255) 값은 파랑으로 표현된다. 파랑(blue)의 변수가 최대 값으로 설정되고, 나머지 값(red, green)은 0으로 설정되기 때문이다.

예1

 {
 width:100px;  
 height:100px;  
 background-color:rgb(165, 42, 42);  
 border:1px solid rgb(0, 0, 0);  
 }

예2

 {
 width:100px;  
 height:100px;  
 background-color:rgb(100%,67%,50%);  
 border:1px solid rgb(0%, 0%, 0%);  
 }

! 주의
rgb(255, 0, 51.2)  정수만을 입력해야 한다. 소수는 안됨.
rgb(100%, 0, 20%)  퍼센트 값과 정수 값을 섞어서 쓰면 안된다.

16진수 색상 코드. 일명 Hex 코드 (Hexadecimal Colors)

16진수 색상 값은 모든 주요 브라우저에서 지원된다. 16진수 색상은 #RRGGBB, 즉 RR(Red - 빨강), GG(Green - 녹색), (Blue- 파랑) 16진수 색상으로 지정한다. 모든 값은 0 ~ FF 사이여야 한다.

예를 들어, #0000FF 값은 파랑색으로 렌더링 된다. 파란색 구성요소의 최대 값(FF)으로 설정 되고 나머지는 0으로 설정 되기 때문이다.

6자리, 또는 3자리의 Hex 코드를 지정할 수 있다.

예3

 {  
 width:100px;  
 height:100px;  
 background-color:#2580a2;  
 border:1px solid #000000;  
 }  

예4

 {  
 width:100px;  
 height:100px;  
 background-color:#f03;  
 border:1px solid #000;  
 }  

! Hex 코드는 RGB 값을 16진수로 표현한 것이므로, 사실 RGB의 범주에 들어가야 한다.


RGBA 색상 ★

RGBA 색상 값은 익스플로러 버젼 9 이상, 파이어폭스 3 이상, 크롬, 사파리, 오페라 버젼 10 이상에서 지원된다. RGBA 색상 값은 알파 채널(알파값, 즉 투명도)이 더해진 RGB 색상 값의 확장이다. RGBA 색상 값은 rgba(red 빨강, green 녹색, blue 파랑, alpha 투명도) 로 지정한다. 알파(투명도) 변수는 0.0(완전 투명)과 1.0(완전 불투명) 사이이다.

예5 완전 투명 Red rgba(255, 0, 0, 0.0)
10% 불투명한 Red rgba(255, 0, 0, 0.1)
30% 불투명한 Red rgba(255, 0, 0, 0.3)
70% 불투명한 Red rgba(255, 0, 0, 0.7)
100% 불투명 Red rgba(255, 0, 0, 1.0)

예6

 {  
 width:100px;  
 height:100px;  
 background-color:rgba(188, 143, 143, 0.4);  
 border:1px solid rgba(0, 0, 0, 1.0);  
 }  

HSL 색상

HSL 색상 값은 익스플로러 버젼 9 이상, 파이어폭스, 크롬, 사파리, 오페라 버젼 10 이상에서 지원된다. HSL은 각각 Hue(색조), Saturation(채도), Lightness(명도)로, 원통좌표계(cylindrical-coordinate)의 색상을 나타낸다.

그림1. source : wikipedia, HSL and HSV

HSL 색상 값은 HSL(색조, 채도, 명도)로 지정한다. Hue(색조)는 색상환(color wheel)에서의 각도(degree)이다. 0은 빨강, 120은 녹색, 240은 파랑이다. Saturation(채도)는 퍼센트 값이다. 0%은 회색 음영을 의미하고, 100%는 풀 컬러이다. Lightness(명도)는 퍼센트 값이다. 0%는 검정, 100%는 흰색을 의미한다.

예7

 {  
 width:100px;  
 height:100px;  
 background-color:hsl(120,100%,25%);  
 border:1px solid hsl(0, 0%, 0%);  
 }  

HSLA 색상 ★

HSLA 색상 값은 익스플로러 버젼 9 이상, 파이어폭스 버젼 3 이상, 크롬, 사파리, 오페라 버젼 10 이상에서 지원된다.

HSLA 색상 값은 알파(투명도) 값이 더해진, HSL 색상값의 확장이다. HSLA 색상 값은 HSLA(Hue, Saturation, Lightness, Alhpa)로 지정한다. 마지막 변수 alpha 로는 투명도를 설정한다. 알파 변수는 숫자 0.0과 1.0 사이이다.

예8 완전 투명 Steelblue hsla(207, 44%, 49%, 0)
9% 불투명한 Steelblue hsla(207, 44%, 49%, 0.09)
30% 불투명한 Steelblue hsla(207, 44%, 49%, 0.3)
60% 불투명한 Steelblue hsla(207, 44%, 49%, 0.6)
100% 불투명 Steelblue hsla(207, 44%, 49%, 1)

예9

 {  
 width:100px;  
 height:100px;  
 background-color:hsla(60, 100%, 25%, 0.4);  
 border:1px solid hsla(0, 0%, 0%, 1);  
 }  

색상 키워드

CSS에서는 색상의 이름(키워드)으로 색상을 지정할 수 있다. 색상 키워드에 대해서는 CSS 색상 키워드 라는 글을 참고.

예10

 {  
 width:100px;  
 height:100px;  
 background-color:tomato;  
 border:1px solid black;  
 }  

CSS 색상 키워드

! 설명은 하단을 참고.

구분	색상 이름	색상	RGB	Hex
1	Aqua		rgb(0, 255, 255)	#00FFFF
2	Black		rgb(0, 0, 0)	#000000
3	Blue		rgb(0, 0, 255)	#0000FF
4	Fuchsia		rgb(255, 0, 255)	#FF00FF
5	Gray		rgb(128, 128, 128)	#808080
6	Green		rgb(0, 128, 0)	#008000
7	Lime		rgb(0, 255, 0)	#00FF00
8	Maroon		rgb(128, 0, 0)	#800000
9	Navy		rgb(0, 0, 128)	#000080
10	Olive		rgb(128, 128, 0)	#808000
11	Purple		rgb(128, 0, 128)	#800080
12	Red		rgb(255, 0, 0)	#FF0000
13	Silver		rgb(192, 192, 192)	#C0C0C0
14	Teal		rgb(0, 128, 128)	#008080
15	White		rgb(255, 255, 255)	#FFFFFF
16	Yellow		rgb(255, 255, 0)	#FFFF00
17	Orange		rgb(255, 165, 0)	#FFA500
18	Aliceblue		rgb(240, 248, 255)	#F0F8FF
19	Antiquewhite		rgb(250, 235, 215)	#FAEBD7
20	Aquamarine		rgb(127, 255, 212)	#7FFFD4
21	Azure		rgb(240, 255, 255)	#F0FFFF
22	Beige		rgb(245, 245, 220)	#F5F5DC
23	Bisque		rgb(255, 228, 196)	#FFE4C4
24	Blanchedalmond		rgb(255, 235, 205)	#FFEBCD
25	Blueviolet		rgb(138, 43, 226)	#8A2BE2
26	Brown		rgb(165, 42, 42)	#A52A2A
27	Burlywood		rgb(222, 184, 135)	#DEB887
28	Cadetblue		rgb( 95, 158, 160)	#5F9EA0
29	Chartreuse		rgb(127, 255, 0)	#7FFF00
30	Chocolate		rgb(210, 105, 30)	#D2691E
31	Coral		rgb(255, 127, 80)	#FF7F50
32	Cornflowerblue		rgb(100, 149, 237)	#6495ED
33	Cornsilk		rgb(255, 248, 220)	#FFF8DC
34	Crimson		rgb(220, 20, 60)	#DC143C
35	Cyan		rgb(0, 255, 255)	#00FFFF
36	Darkblue		rgb(0, 0, 139)	#00008B
37	Darkcyan		rgb(0, 139, 139)	#008B8B
38	Darkgoldenrod		rgb(184, 134, 11)	#B8860B
39	Darkgray		rgb(169, 169, 169)	#A9A9A9
40	Darkgreen		rgb(0, 100, 0)	#006400
41	Darkkhaki		rgb(189, 183, 107)	#BDB76B
42	Darkmagenta		rgb(139, 0, 139)	#8B008B
43	Darkolivegreen		rgb(85, 107, 47)	#556B2F
44	Darkorange		rgb(255, 140, 0)	#FF8C00
45	Darkorchid		rgb(153, 50, 204)	#9932CC
46	Darkred		rgb(139, 0, 0)	#8B0000
47	Darksalmon		rgb(233, 150, 122)	#E9967A
48	Darkseagreen		rgb(143, 188, 143)	#8FBC8F
49	Darkslateblue		rgb(72, 61, 139)	#483D8B
50	Darkslategray		rgb(47, 79, 79)	#2F4F4F
51	Darkturquoise		rgb(0, 206, 209)	#00CED1
52	Darkviolet		rgb(148, 0, 211)	#9400D3
53	Deeppink		rgb(255, 20, 147)	#FF1493
54	Deepskyblue		rgb(0, 191, 255)	#00BFFF
55	Dimgray		rgb(105, 105, 105)	#696969
56	Dodgerblue		rgb(30, 144, 255)	#1E90FF
57	Firebrick		rgb(178, 34, 34)	#B22222
58	Floralwhite		rgb(255, 250, 240)	#FFFAF0
59	Forestgreen		rgb(34, 139, 34)	#228B22
60	Gainsboro		rgb(220, 220, 220)	#DCDCDC
61	Ghostwhite		rgb(248, 248, 255)	#F8F8FF
62	Gold		rgb(255, 215, 0)	#FFD700
63	Goldenrod		rgb(218, 165, 32)	#DAA520
64	Greenyellow		rgb(173, 255, 47)	#ADFF2F
65	Honeydew		rgb(240, 255, 240)	#F0FFF0
66	Hotpink		rgb(255, 105, 180)	#FF69B4
67	Indianred		rgb(205, 92, 92)	#CD5C5C
68	Indigo		rgb(75, 0, 130)	#4B0082
69	Ivory		rgb(255, 255, 240)	#FFFFF0
70	Khaki		rgb(240, 230, 140)	#F0E68C
71	Lavender		rgb(230, 230, 250)	#E6E6FA
72	Lavenderblush		rgb(255, 240, 245)	#FFF0F5
73	Lawngreen		rgb(124, 252, 0)	#7CFC00
74	Lemonchiffon		rgb(255, 250, 205)	#FFFACD
75	Lightblue		rgb(173, 216, 230)	#ADD8E6
76	Lightcoral		rgb(240, 128, 128)	#F08080
77	Lightcyan		rgb(224, 255, 255)	#E0FFFF
78	Lightgoldenrodyellow		rgb(250, 250, 210)	#FAFAD2
79	Lightgray		rgb(211, 211, 211)	#D3D3D3
80	Lightgreen		rgb(144, 238, 144)	#90EE90
81	Lightpink		rgb(255, 182, 193)	#FFB6C1
82	Lightsalmon		rgb(255, 160, 122)	#FFA07A
83	Lightseagreen		rgb( 32, 178, 170)	#20B2AA
84	Lightskyblue		rgb(135, 206, 250)	#87CEFA
85	Lightslategray		rgb(119, 136, 153)	#778899
86	Lightsteelblue		rgb(176, 196, 222)	#B0C4DE
87	Lightyellow		rgb(255, 255, 224)	#FFFFE0
88	Limegreen		rgb(50, 205, 50)	#32CD32
89	Linen		rgb(250, 240, 230)	#FAF0E6
90	Magenta		rgb(255, 0, 255)	#FF00FF
91	Mediumaquamarine		rgb(102, 205, 170)	#66CDAA
92	Mediumblue		rgb(0, 0, 205)	#0000CD
93	Mediumorchid		rgb(186, 85, 211)	#BA55D3
94	Mediumpurple		rgb(147, 112, 219)	#9370DB
95	Mediumseagreen		rgb(60, 179, 113)	#3CB371
96	Mediumslateblue		rgb(123, 104, 238)	#7B68EE
97	Mediumspringgreen		rgb(0, 250, 154)	#00FA9A
98	Mediumturquoise		rgb(72, 209, 204)	#48D1CC
99	Mediumvioletred		rgb(199, 21, 133)	#C71585
100	Midnightblue		rgb(25, 25, 112)	#191970
101	Mintcream		rgb(245, 255, 250)	#F5FFFA
102	Mistyrose		rgb(255, 228, 225)	#FFE4E1
103	Moccasin		rgb(255, 228, 181)	#FFE4B5
104	Navajowhite		rgb(255, 222, 173)	#FFDEAD
105	Oldlace		rgb(253, 245, 230)	#FDF5E6
106	Olivedrab		rgb(107, 142, 35)	#6B8E23
107	Orangered		rgb(255, 69, 0)	#FF4500
108	Orchid		rgb(218, 112, 214)	#DA70D6
109	Palegoldenrod		rgb(238, 232, 170)	#EEE8AA
110	Palegreen		rgb(152, 251, 152)	#98FB98
111	Paleturquoise		rgb(175, 238, 238)	#AFEEEE
112	Palevioletred		rgb(219, 112, 147)	#DB7093
113	Papayawhip		rgb(255, 239, 213)	#FFEFD5
114	Peachpuff		rgb(255, 218, 185)	#FFDAB9
115	Peru		rgb(205, 133, 63)	#CD853F
116	Pink		rgb(255, 192, 203)	#FFC0CB
117	Plum		rgb(221, 160, 221)	#DDA0DD
118	Powderblue		rgb(176, 224, 230)	#B0E0E6
119	Rosybrown		rgb(188, 143, 143)	#BC8F8F
120	Royalblue		rgb(65, 105, 225)	#4169E1
121	Saddlebrown		rgb(139, 69, 19)	#8B4513
122	Salmon		rgb(250, 128, 114)	#FA8072
123	Sandybrown		rgb(244, 164, 96)	#F4A460
124	Seagreen		rgb(46, 139, 87)	#2E8B57
125	Seashell		rgb(255, 245, 238)	#FFF5EE
126	Sienna		rgb(160, 82, 45)	#A0522D
127	Skyblue		rgb(135, 206, 235)	#87CEEB
128	Slateblue		rgb(106, 90, 205)	#6A5ACD
129	Slategray		rgb(112, 128, 144)	#708090
130	Snow		rgb(255, 250, 250)	#FFFAFA
131	Springgreen		rgb(0, 255, 127)	#00FF7F
132	Steelblue		rgb(70, 130, 180)	#4682B4
133	Tan		rgb(210, 180, 140)	#D2B48C
134	Thistle		rgb(216, 191, 216)	#D8BFD8
135	Tomato		rgb(255, 99, 71)	#FF6347
136	Turquoise		rgb(64, 224, 208)	#40E0D0
137	Violet		rgb(238, 130, 238)	#EE82EE
138	Wheat		rgb(245, 222, 179)	#F5DEB3
139	Whitesmoke		rgb(245, 245, 245)	#F5F5F5
140	Yellowgreen		rgb(154, 205, 50)	#9ACD32

- CSS에서는 색상의 이름(키워드)으로도 색상을 설정할 수 있다.

예1 - hotpink

 {  
 width:100px;  
 height:100px;  
 background-color:hotpink;  
 border:1px solid black;  
 }  

- CSS 1 에서는 16가지 색상 키워드를 지원하였고(1번~16번), CSS 2 에서는 오렌지(orange) 키워드가 추가되었으며(17번), CSS 3 에서는 140가지 색상 키워드를 지원하고 있다. (source : w3schools)

- 이 색상 키워드들은 종종 '확장 색상 키워드(extended color keywords)', 또는 'X11 색상', 또는 'SVG 색상' 이라고도 불린다.

- 'Aqua'와 'Cyan', 그리고 'Magenta'와 'Fuchsia'는 각각 같은 색상이다.

- 'gray'라는 이름이 붙은 7가지 색상들은 'grey'라고도 표기할 수 있다.

darkgray / darkgrey
darkslategray / darkslategrey
dimgray / dimgrey
lightgray / lightgrey
lightslategray / lightslategrey
gray / grey
slategray / slategray

! 'e'로 표기한 grey 색상 키워드는 익스플로러 8 이후 버젼에서만 지원된다. 익스플로러 3 ~ 6 버젼에서는 'a'로 표기한 gray 색상 키워드만을 지원한다. (source : MDN)

- 'Cyan'이나 'Grey'처럼 겹치는 색상을 모두 합하면 147 색상, 겹치는 색상을 제외하면, 138 색상이다.

- transparent 키워드

transparent 키워드는 완전히 투명한 색상을 나타낸다. 기술적으로, 투명(transparent) 키워드는 검정색에 알파 채널을 0으로 한 것이며, rgba(0, 0, 0, 0)과 같다. (source: MDN)

예2 - transparent

 {  
 width:100px;  
 height:100px;  
 background-color:transparent;  
 border:1px solid black;  
 }  

! 관련 글.

CSS에서의 색상 설정