2013년 10월 5일 토요일

구글 블로그(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



2013년 10월 4일 금요일

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;  
 }  


2013년 10월 3일 목요일

CSS 색상 키워드

! 설명은 하단을 참고.

구분 색상 이름  색상  RGB Hex
1Aquargb(0, 255, 255)#00FFFF
2Blackrgb(0, 0, 0)#000000
3Bluergb(0, 0, 255)#0000FF
4Fuchsiargb(255, 0, 255)#FF00FF
5Grayrgb(128, 128, 128)#808080
6Greenrgb(0, 128, 0)#008000
7Limergb(0, 255, 0)#00FF00
8Maroonrgb(128, 0, 0)#800000
9Navyrgb(0, 0, 128)#000080
10Olivergb(128, 128, 0)#808000
11Purplergb(128, 0, 128)#800080
12Redrgb(255, 0, 0)#FF0000
13Silverrgb(192, 192, 192)#C0C0C0
14Tealrgb(0, 128, 128)#008080
15Whitergb(255, 255, 255)#FFFFFF
16Yellowrgb(255, 255, 0)#FFFF00
17Orangergb(255, 165, 0)#FFA500
18Alicebluergb(240, 248, 255)#F0F8FF
19Antiquewhitergb(250, 235, 215)#FAEBD7
20Aquamarinergb(127, 255, 212)#7FFFD4
21Azurergb(240, 255, 255)#F0FFFF
22Beigergb(245, 245, 220)#F5F5DC
23Bisquergb(255, 228, 196)#FFE4C4
24Blanchedalmondrgb(255, 235, 205)#FFEBCD
25Bluevioletrgb(138, 43, 226)#8A2BE2
26Brownrgb(165, 42, 42)#A52A2A
27Burlywoodrgb(222, 184, 135)#DEB887
28Cadetbluergb( 95, 158, 160)#5F9EA0
29Chartreusergb(127, 255, 0)#7FFF00
30Chocolatergb(210, 105, 30)#D2691E
31Coralrgb(255, 127, 80)#FF7F50
32Cornflowerbluergb(100, 149, 237)#6495ED
33Cornsilkrgb(255, 248, 220)#FFF8DC
34Crimsonrgb(220, 20, 60)#DC143C
35Cyanrgb(0, 255, 255)#00FFFF
36Darkbluergb(0, 0, 139)#00008B
37Darkcyanrgb(0, 139, 139)#008B8B
38Darkgoldenrodrgb(184, 134, 11)#B8860B
39Darkgrayrgb(169, 169, 169)#A9A9A9
40Darkgreenrgb(0, 100, 0)#006400
41Darkkhakirgb(189, 183, 107)#BDB76B
42Darkmagentargb(139, 0, 139)#8B008B
43Darkolivegreenrgb(85, 107, 47)#556B2F
44Darkorangergb(255, 140, 0)#FF8C00
45Darkorchidrgb(153, 50, 204)#9932CC
46Darkredrgb(139, 0, 0)#8B0000
47Darksalmonrgb(233, 150, 122)#E9967A
48Darkseagreenrgb(143, 188, 143)#8FBC8F
49Darkslatebluergb(72, 61, 139)#483D8B
50Darkslategrayrgb(47, 79, 79)#2F4F4F
51Darkturquoisergb(0, 206, 209)#00CED1
52Darkvioletrgb(148, 0, 211)#9400D3
53Deeppinkrgb(255, 20, 147)#FF1493
54Deepskybluergb(0, 191, 255)#00BFFF
55Dimgrayrgb(105, 105, 105)#696969
56Dodgerbluergb(30, 144, 255)#1E90FF
57Firebrickrgb(178, 34, 34)#B22222
58Floralwhitergb(255, 250, 240)#FFFAF0
59Forestgreenrgb(34, 139, 34)#228B22
60Gainsbororgb(220, 220, 220)#DCDCDC
61Ghostwhitergb(248, 248, 255)#F8F8FF
62Goldrgb(255, 215, 0)#FFD700
63Goldenrodrgb(218, 165, 32)#DAA520
64Greenyellowrgb(173, 255, 47)#ADFF2F
65Honeydewrgb(240, 255, 240)#F0FFF0
66Hotpinkrgb(255, 105, 180)#FF69B4
67Indianredrgb(205, 92, 92)#CD5C5C
68Indigorgb(75, 0, 130)#4B0082
69Ivoryrgb(255, 255, 240)#FFFFF0
70Khakirgb(240, 230, 140)#F0E68C
71Lavenderrgb(230, 230, 250)#E6E6FA
72Lavenderblushrgb(255, 240, 245)#FFF0F5
73Lawngreenrgb(124, 252, 0)#7CFC00
74Lemonchiffonrgb(255, 250, 205)#FFFACD
75Lightbluergb(173, 216, 230)#ADD8E6
76Lightcoralrgb(240, 128, 128)#F08080
77Lightcyanrgb(224, 255, 255)#E0FFFF
78Lightgoldenrodyellowrgb(250, 250, 210)#FAFAD2
79Lightgrayrgb(211, 211, 211)#D3D3D3
80Lightgreenrgb(144, 238, 144)#90EE90
81Lightpinkrgb(255, 182, 193)#FFB6C1
82Lightsalmonrgb(255, 160, 122)#FFA07A
83Lightseagreenrgb( 32, 178, 170)#20B2AA
84Lightskybluergb(135, 206, 250)#87CEFA
85Lightslategrayrgb(119, 136, 153)#778899
86Lightsteelbluergb(176, 196, 222)#B0C4DE
87Lightyellowrgb(255, 255, 224)#FFFFE0
88Limegreenrgb(50, 205, 50)#32CD32
89Linenrgb(250, 240, 230)#FAF0E6
90Magentargb(255, 0, 255)#FF00FF
91Mediumaquamarinergb(102, 205, 170)#66CDAA
92Mediumbluergb(0, 0, 205)#0000CD
93Mediumorchidrgb(186, 85, 211)#BA55D3
94Mediumpurplergb(147, 112, 219)#9370DB
95Mediumseagreenrgb(60, 179, 113)#3CB371
96Mediumslatebluergb(123, 104, 238)#7B68EE
97Mediumspringgreenrgb(0, 250, 154)#00FA9A
98Mediumturquoisergb(72, 209, 204)#48D1CC
99Mediumvioletredrgb(199, 21, 133)#C71585
100Midnightbluergb(25, 25, 112)#191970
101Mintcreamrgb(245, 255, 250)#F5FFFA
102Mistyrosergb(255, 228, 225)#FFE4E1
103Moccasinrgb(255, 228, 181)#FFE4B5
104Navajowhitergb(255, 222, 173)#FFDEAD
105Oldlacergb(253, 245, 230)#FDF5E6
106Olivedrabrgb(107, 142, 35)#6B8E23
107Orangeredrgb(255, 69, 0)#FF4500
108Orchidrgb(218, 112, 214)#DA70D6
109Palegoldenrodrgb(238, 232, 170)#EEE8AA
110Palegreenrgb(152, 251, 152)#98FB98
111Paleturquoisergb(175, 238, 238)#AFEEEE
112Palevioletredrgb(219, 112, 147)#DB7093
113Papayawhiprgb(255, 239, 213)#FFEFD5
114Peachpuffrgb(255, 218, 185)#FFDAB9
115Perurgb(205, 133, 63)#CD853F
116Pinkrgb(255, 192, 203)#FFC0CB
117Plumrgb(221, 160, 221)#DDA0DD
118Powderbluergb(176, 224, 230)#B0E0E6
119Rosybrownrgb(188, 143, 143)#BC8F8F
120Royalbluergb(65, 105, 225)#4169E1
121Saddlebrownrgb(139, 69, 19)#8B4513
122Salmonrgb(250, 128, 114)#FA8072
123Sandybrownrgb(244, 164, 96)#F4A460
124Seagreenrgb(46, 139, 87)#2E8B57
125Seashellrgb(255, 245, 238)#FFF5EE
126Siennargb(160, 82, 45)#A0522D
127Skybluergb(135, 206, 235)#87CEEB
128Slatebluergb(106, 90, 205)#6A5ACD
129Slategrayrgb(112, 128, 144)#708090
130Snowrgb(255, 250, 250)#FFFAFA
131Springgreenrgb(0, 255, 127)#00FF7F
132Steelbluergb(70, 130, 180)#4682B4
133Tanrgb(210, 180, 140)#D2B48C
134Thistlergb(216, 191, 216)#D8BFD8
135Tomatorgb(255, 99, 71)#FF6347
136Turquoisergb(64, 224, 208)#40E0D0
137Violetrgb(238, 130, 238)#EE82EE
138Wheatrgb(245, 222, 179)#F5DEB3
139Whitesmokergb(245, 245, 245)#F5F5F5
140Yellowgreenrgb(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에서의 색상 설정