블로거 사용자를 위한 코드 모음

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

2013-10-05T15:27:00.000+09:00

그림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에서의 색상 설정

2013-10-04T00:38:00.001+09:00

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 색상 키워드

2013-10-03T18:47:00.000+09:00

! 설명은 하단을 참고.

구분	색상 이름	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에서의 색상 설정

CSS transition 이해하기

2013-09-28T16:01:00.001+09:00

! 이 글의 예문에 적용된 transition 효과는 익스플로러 9 버젼 이하에서는 작동하지 않습니다.

transition-property
transition-duration
transition-timing-function
transition-delay

transition은 위 4가지 속성의 축약 속성(shorthand property)이다. 영어로 shorthand property 라고 지칭하니, 함축속성, 또는 대표속성이라고도 표현할 수 있을 것이다. 쉽게 말하면, transition 하나로 위 4가지를 다 표현할 수 있다는 얘기다.

예를 들어,

 transition-property:width;  
 transition-duration: 1s;  
 transition-timing-function: ease;  
 transition-delay: .5s;

 transition: width 1s ease .5s;

위 두개의 코드는 서로 같은 코드이다.

transition-property

transition 구문의 첫번째 자리에 오는 transition-property 는 어떤 속성에 transition 효과를 줄지를 설정한다.

transition-property의 값(value)

none : transition 효과를 지정하지 않는다.
all : 모든 속성이 transition 효과를 얻는다.
property : transition 효과를 얻게될 속성을 지정한다.

모든(all) 속성을 지정하는 것과 일부 속성을 지정하는 것은 다음과 같은 차이가 있다.

예1

 .transitionpost1 {  
 width: 100px;  
 height: 50px;  
 background-color:DarkSeaGreen;  
 border:1px solid black;  
 transition:all 1s ease .1s;   
 }  
   
 .transitionpost1:hover {  
 width: 300px;  
 height:100px;  
 }

<예1>에서는 transition-property를 all 로 설정했기 때문에, 너비 확장과 높이 확장 모두 transition 효과를 얻는다. 즉, 너비 확장과 높이 확장 모두 시간에 걸쳐 점진적으로 이루어진다.

예2

 .transitionpost2 {  
 width: 100px;  
 height: 50px;  
 background-color:DarkSeaGreen;  
 border:1px solid black;  
 transition:width 1s ease .1s;   
 }  
   
 .transitionpost2:hover {  
 width: 300px;  
 height:100px;  
 }

<예2>는 다른 조건들을 <예1>과 동일하게 하되, transition-property를 all 이 아닌 width로 설정했다. <예2>의 도형은 마우스 커서를 올렸을 때 똑같이 너비 300px, 높이 100px로 확장하지만, 높이 변화는 transition의 효과를 얻지 못한다.

복수의 속성을 지정할 때는 콤마로 구분하여 각각의 값을 설정한다.

예3

예3 - 너비 변화는 1초, 배경색상 변화는 13초에 걸쳐 일어난다.
transition 속성을 지정하지 않은 height(높이)는 변화는 하되, 점진적으로 변화하는 transition 효과는 얻지 못한다.

 .transitionpost3 {  
 width: 100px;  
 height: 50px;  
 background-color:#8FBC8F;  
 border:1px solid black;  
 transition:width 1s ease, background-color 13s ease;  
 }  
   
 .transitionpost3:hover {  
 width: 300px;  
 height: 100px;
 background-color:#000000;  
 }

transition-duration

transition 구문의 두번째 자리에 오는 transition-duration은 변화가 몇초, 또는 몇 밀리세컨드(1/1000초)에 걸쳐 일어날지를 설정한다. 6s, 0.5s, .3s, 120ms 이라고 적혀 있다면, 이는 각각 6초, 0.5초, 0.3초, 120밀리세컨드 라는 뜻이다.

예4

예4 - 너비 변화는 11초, 높이 변화는 432ms(밀리세컨드), 배경색상 변화는 0.3초에 걸쳐 일어난다.

 .transitionpost4 {  
 width: 100px;  
 height: 50px;  
 background-color:#8FBC8F;  
 border:1px solid black;  
 transition:width 11s ease, height 432ms ease, background-color .3s ease;  
 }  
   
 .transitionpost4:hover {  
 width: 300px;  
 height:100px;  
 background-color:#2580a2;  
 }

transition-timing-fuction

transition 구문의 세번째 자리에 오는 transition-timing-functing은 변화가 일어나는 속도를 설정한다. 속도 커브의 함수를 설정한다는 것이 더 정확한 표현이겠지만, 어려운 말 보다는 실제 움직임을 보면서 이해하는 것이 편하다.

transition-timing-function의 값(value)으로는

linear

transition-timing-function을 linear로 설정하면 변화가 시작부터 종료까지 동일한 속도로 일어난다.

ease

ease는 극초반은 느리게, 초반은 빠르게, 종료지점은 느리게 변화가 진행된다.

ease-in

ease-in은 시작지점의 변화가 천천히 진행된다.

ease-out

ease-out은 종료지점의 변화가 천천히 진행된다.

ease-in-out

ease-in-out은 시작지점과 종료지점의 변화가 천천히 진행된다.

주로 쓰이는 5가지 외에 함수 값을 직접 지정하는 cubic-bezier,

cubic-bezier(1,.02,1,.47)

그리고, 변화가 점진적으로 진행되지 않고, 주어진 설정과 간격에 따라 일시에 진행되는 step-start, step-end, steps 가 있다.

step-start

step-start는 모든 변화가 시작지점에 이루어진다.

step-end

step-end는 모든 변화가 종료지점에 이루어진다.
("transition:width 2s step-end;" 로 설정하였으므로, 마우스 오버 후 2초 뒤에 변화가 일어난다.)

steps(4, start)

steps는 설정한 단계에 따라 간격을 두고 변화가 일어난다.

주로 쓰이는 것은 linear, ease, ease-in, ease-out, ease-in-out 이렇게 5가지이다. 이 5가지만 알고 있어도 transition을 활용하는데에는 큰 무리가 없다.

cubic-bezier로 함수 값을 직접 지정하려면, cubic-bezier 곡선 그래프를 이해해야 한다. cubic-bezier 곡선 그래프를 이해하는 것은 나머지 값들이 어떻게 다른지를 이해하는데에도 도움이 된다.

그림1

cubic-bezier 곡선에서 그래프의 가로축은 시간, 세로축은 변화의 진행 정도를 의미한다. 가로축과 세로축 모두 시작값은 0이며, 종료값은 1이다.

그림2

예를 들어, linear의 cubic-bezier 곡선은 <그림2>와 같은 모습을 하고 있다. transition-timing-function을 linear로 설정할 때 변화가 시작부터 종료까지 동일한 속도로 일어나는 것은 linear의 그래프가 시간이 흐른 만큼 변화가 동일한 비율로 일어나는 직선의 모습을 하고 있기 때문이다.

그림3

ease-in-out의 경우 시작지점과 종료지점의 변화는 시간 진행에 비해 더디게 진행되는 곡선의 모습을 하고 있다. ease-in-out으로 설정할 때 시작지점과 종료지점의 변화가 천천히 진행되는 이유는 이와 같은 이유 때문이다.

linear나 ease-in-out, ease, ease-in, ease-out 처럼 주어진 값(곡선)이 아닌, 자신이 원하는 함수(곡선)를 설정하고자 할 때 transition-timing-function의 값으로 cubic-bezier를 설정한다.

cubic-bezier(x1, y1, x2, y2)

! cubic-bezier 숫자값 지정시 x1과 x2의 값은 0과 1 사이여야 한다. y1과 y2는 0~1 범위를 초과할 수 있다.

cubic-bezier를 설정할 때 괄호안 4개의 숫자는 곡선을 함수로 나타낸 것이다. 원하는 함수값과 곡선을 얻을 수 있도록 도와주는 사이트가 많이 있으므로, 해당 사이트에서 원하는 곡선 모양을 만든 후 함수값을 추출하면 된다.

! 참고.
cubic-bezier.com
CSS cubic-bezier Builder - Rob La Placa

그림4

만약 <그림4>와 같은 곡선을 함수값으로 지정하면 어떻게 되는가. <그림4>의 곡선을 함수값으로 설정하면, 실제로 변화가 진행되다가 마이너스 변화 과정을 겪은 후 다시 변화가 진행된다.

예5

 .transitionpost5 {  
 width: 100px;  
 height: 50px;  
 background-color:DarkSeaGreen;  
 border:1px solid black;  
 transition:width 2s cubic-bezier(0,1.59,1,-0.75);  
 }  

 .transitionpost5:hover {  
 width: 300px;  
 }

그림5

step-start의 cubic-bezier 그래프는 <그림5>와 같으며, step-start는 steps(1,start)와 같다. step-start는 시작 지점에서 모든 변화가 완료된다.

그림6

step-end의 cubic-bezier 그래프는 <그림6>과 같으며, step-start는 steps(1,end)와 같다. step-start는 종료 지점에서 모든 변화가 완료된다.

그림7

steps는 step-start, step-end와 같은 개념이되, 단계(간격)를 지정할 수 있다. 각 단계의 시작 지점에서 변화가 일어날지, 아니면 종료 지점에서 변화가 일어날지는 변수(start, 또는 end)로 설정한다.

steps(단계, start), 또는 steps(단계, end)

예6

예6 - 너비 변화가 2초 동안 8단계를 거쳐 각 단계의 종료 시점에 일어난다.

 .transitionpost6 {  
 width: 100px;  
 height: 50px;  
 background-color:DarkSeaGreen;  
 border:1px solid black;  
 transition:width 2s steps(8, end);  
 }  
   
 .transitionpost6:hover {  
 width: 300px;  
 }

steps의 두번째 변수(start, 또는 end)는 생략이 가능하다. 두번째 변수를 생략하면, default값인 end 값이 주어진다.

예7

 .transitionpost7 {  
 width: 100px;  
 height: 50px;  
 background-color:DarkSeaGreen;  
 border:1px solid black;  
 transition:width 2s steps(7);  
 }  
   
 .transitionpost7:hover {  
 width: 300px;  
 }

! 참고 - linear, ease, ease-in, ease-out, ease-in-out 의 cubic bezier 그래프

그림8

transition-delay

transition 구문의 마지막 네번째 자리에 오는 transition-delay 는 transition 효과가 언제 시작할지를 설정한다. 말 그대로, 딜레이(delay)를 설정한다.

예8

예8 - 마우스 커서를 올리면 1초가 지난 후 2초에 걸쳐 너비가 확장된다.

 .transitionpost8 {  
 width: 100px;  
 height: 50px;  
 background-color:DarkSeaGreen;  
 border:1px solid black;  
 transition:width 2s ease-in 1s;  
 }  
   
 .transitionpost8:hover {  
 width: 300px;  
 }

transition의 default 값

transition의 default 값은

all 0 ease 0

이다.

transition 구문에서 생략된 값은 default 값으로 대체된다. transition 효과가 나타나기 위해서 반드시 주어져야 하는 값, 즉 생략해선 안되는 값은 transition-duration 이다. 0초에 걸친 점진적인 변화라는 것은 있을 수 없기 때문이다.

예9

 .transitionpost9 {  
 width: 100px;  
 height: 50px;  
 background-color:DarkSeaGreen;  
 border:1px solid black;  
 transition:2s;  
 }  
   
 .transitionpost9:hover {  
 width: 300px;  
 }

<예9>에서는 transition의 값으로 '2s'만 입력했다. 생략된 값은 default 값으로 대체되므로,

 transition:2s;

는

 transition:all 2s ease 0;

과 같다.

transition 효과를 얻을 수 있는 속성들(properties)

꼭 그렇다고는 할 수 없지만, 보통 숫자값을 갖는 속성(property)들은 transition을 통해 점진적인 효과를 낼 수 있다.

예 : opacity, border-radius, margin, color, font-size, padding 등등

transition 효과가 가능한 속성(property)의 목록은

http://www.w3.org/TR/css3-transitions/

페이지 하단의 7.1. Properties from CSS 에 열거된 항목. 또는,

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

페이지에서 animatable이 yes인 항목들을 통해 확인할 수 있다.

! 브라우저마다 약간씩 다르고, 또 이 항목들은 바뀔 수 있으므로 웹 사이트나 블로그 설계 시 주의를 기울여야 한다.

예10

 .transitionpost10 {  
 opacity:1;  
 width: 100px;  
 height: 50px;  
 background-color:DarkSeaGreen;  
 border:1px solid black;  
 transition:opacity .5s ease-in;  
 }  
   
 .transitionpost10:hover {  
 opacity:0;  
 }

예11

 .transitionpost11 {  
 border-radius:0;  
 width: 100px;  
 height: 50px;  
 background-color:DarkSeaGreen;  
 border:1px solid black;  
 transition:border-radius .5s ease-in-out;  
 }  
   
 .transitionpost11:hover {  
 border-radius:50%;  
 }

예12

 .transitionpost12 {  
 margin-left:0;  
 width: 100px;  
 height: 50px;  
 background-color:DarkSeaGreen;  
 border:1px solid black;  
 transition:margin-left 1.5s ease-in-out;  
 }  
   
 .transitionpost12:hover {  
 margin-left:200px;  
 }

예13

긴 글 읽느라 고생하셨습니다.
감사합니다. :D

! 참고한 글 및 참고할 만한 글
W3C CSS Transitions
Mozilla Developer Network, timing-function
Mozilla Developer Network, Using CSS transitions
CSS-Tricks, transition-timing-function
w3schools.com, CSS3 transitions
w3schools.com, CSS3 transition-property Property
w3schools.com, CSS3 transition-duration Property
w3schools.com, CSS3 transition-timing-function Property
w3schools.com, CSS3 transition-delay Property

동적뷰 본문 줄 간 간격 설정하기

2013-09-23T21:35:00.000+09:00

 .article .article-content {  
 line-height:1.7;  
 }

동적뷰에서 본문 줄 간 간격을 설정해주는 코드입니다. line-height에는 원하는 값을 입력하시면 됩니다. 기본(default)으로 설정되어 있는 줄 간 간격은 1.4입니다.

코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 입니다.

! 참고로, 위의 선택자(selector), 즉 '.article .article-content'로 동적뷰 본문의 폰트 크기 또한 설정이 가능합니다. 본문 폰트 크기와 줄 간 간격을 같이 설정한다면, 코드의 모습은 다음과 같은 형태가 되겠죠.

 .article .article-content {  
 line-height:1.7;  
 font-size:12px;  
 }

지난 번에 동적뷰 본문 폰트 크기 설정 이라는 글에서 알려드린 코드를 이미 쓰고 계시다면, 해당 코드를 삭제하신 후 이 코드로 대체하시면 됩니다.

데모 보기

! 코드 적용 전 템플릿을 반드시 백업해두시기 바랍니다.
! 테스트용 블로그에서 충분한 테스트를 해본 후 사용하세요.

동적뷰 검색바 폰트 크기 설정하기

2013-09-23T20:25:00.000+09:00

동적뷰에서 검색바 '검색' 글씨의 폰트 크기를 설정해주는 코드입니다.

 #header input#search {  
 font-size:12px;  
 }

코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 입니다. font-size의 값은 자신이 원하는 값으로 대체하시면 됩니다.

데모 보기

동적뷰 블로그 제목 마우스 오버 시 밑줄 제거

2013-09-23T18:59:00.000+09:00

동적뷰에서 블로그 제목에 마우스를 갖다대면 밑줄이 생깁니다. 아래 코드는 마우스 오버 시 밑줄이 생기지 않도록 설정해주는 코드입니다.

 #header .header-bar .title a {   
 text-decoration:none;  
 }

코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 입니다.

데모 보기

동적뷰 헤더바 폰트 크기 설정하기

2013-09-22T14:05:00.001+09:00

그림1

코드1

 .header-drawer .menu span{  
 font-size: 11px !important;  
 }

코드2

 .header-drawer .tabs{  
 font-size: 11px !important;  
 }

코드3

 #header .menu .menu-item {  
 font-size: 11px !important;  
 }

동적뷰에서 헤더바의 폰트 크기를 설정해주는 코드들입니다. (코드1과 코드2의 출처는 Southerspeakers입니다.)

코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 입니다. <그림1>을 참고하시고, font-size에 각각 원하는 값을 입력하시면 됩니다.

데모 보기

동적뷰 블로그 제목과 설명 폰트 크기 설정하기

2013-09-22T13:42:00.000+09:00

코드1 - 블로그 제목 폰트 크기

 #header .header-bar .title h1 {  
 font-size: 16px;  
 }

코드2 - 블로그 설명 폰트 크기

 #header .header-bar .title h3 {  
 font-size: 12px;  
 }

코드1과 코드2는 각각 동적뷰에서 블로그 제목과 설명의 폰트 크기를 조절해주는 코드입니다.

코드 삽입위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS 추가] 입니다. 코드를 삽입하실 때 'font-size'의 값을 자신이 원하는 값으로 대체하시면 됩니다.

데모 보기

동적뷰 본문 제목 폰트 크기 및 컬러 설정

2013-09-22T13:27:00.000+09:00

H******님께서 동적뷰 본문 폰트 크기 설정하는 방법에 대해 질문해주셔서, 부족한 CSS 실력으로 한번 찾아봤습니다.

몇가지를 선택자(selector)를 찾아냈는데. 주로 사용하시는 뷰에 따라서 골라 쓰시면 될 것 같습니다.

코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 로, 모두 같습니다. 코드를 삽입하실 때 color, font-size, font-weight의 값은 자신이 원하는 값으로 대체하시면 됩니다. 또, 굳이 변경을 원하지 않는 속성은 삭제해도 괜찮습니다.

코드1. (투자한 시간이 아까워서 적긴 했습니다만, 코드1은 비추천입니다.)

 .title * {  
 font-size:8px;  
 }

코드1.로는 본문 폰트 크기 설정이 가능합니다. 다만, 이 선택자(selector)로는 폰트 컬러 설정이 불가능했습니다. font-weight(굵게,이탤릭체 등) 설정이 가능하긴 했으나, font-weight의 설정이 본문 제목 뿐만 아니라 블로그 제목에도 영향을 주었습니다.

코드1.로 설정 가능한 뷰 및 본문 제목. 즉, 코드1.의 영향을 받는 뷰 및 페이지 :

Classic 뷰의 본문 제목

Flipcard 뷰의 본문 제목

Magazine 뷰 인덱스 페이지의 제목과 본문 제목

Mosaic 뷰 본문 제목

Sidebar 뷰 사이드바 제목과 본문 제목

Snapshot 뷰 인덱스 페이지 제목과 본문 제목

Timeslide 뷰 인덱스 페이지의 제목과 본문 제목

코드2.

 .title a {  
 font-size:12px;  
 color:#2580a2;  
 font-weight:bold;  
 }

선택자(selector)를 ".title a"로 입력시 폰트 크기, 컬러 설정 및 font-weight 설정이 가능했습니다.

코드2.로 설정 가능한 뷰 및 본문 제목 (코드2.의 영향을 받는 뷰 및 페이지) :

Classic 뷰의 본문 제목

Flipcard 뷰의 본문 제목

Magazine 뷰 인덱스 페이지의 제목과 본문 제목

Mosaic 뷰의 본문 제목

Sidebar 뷰 사이드바 제목과 본문 제목. 단, 사이드바의 제목은 컬러 설정이 적용되지 않음.

Snapshot 뷰의 인덱스 페이지 제목과 본문 제목

Timeslide 뷰 인덱스 페이지 제목과 본문 제목

코드3.

 .tile .banner .title {  
 font-size:30px;  
 color:#2580a2;  
 font-weight:bold;  
 }

코드1.이나 코드2.로는 적용이 되지 않는, Mosaic 뷰 인덱스 페이지에서의 글 제목 폰트 크기, 컬러, font-weight 설정은 코드3.으로 할 수 있습니다. 코드3.은 Mosaic 뷰의 인덱스 페이지에만 적용이 됩니다.

코드4-1.

 .items .item .card .front .title {  
 font-size:30px;  
 color:#2580a2;  
 font-weight:bold;  
 }

코드4-2.

 .overlay .title {  
 font-size:30px;  
 color:#2580a2;  
 font-weight:bold;  
 }

Flipcard 뷰 인덱스 페이지의 제목은 마우스 커서를 올리기 전의 제목과 올린 후의 제목, 2개입니다.

마우스를 올리기 전(앞면)의 제목 폰트 크기와 컬러, font-weight 설정은 코드4-1.로, 마우스를 올린 후(뒷면)의 제목 폰트 크기와 컬러, font-weight 설정은 코드4-2.로 각각 설정할 수 있습니다.

코드5-1.

 #sidebar .item .title a {  
 color:#5cabb8;  
 }

코드5-2.

 #sidebar .item.selected .title a {  
 color:#2580a2;  
 }

코드5-3.

 #sidebar .item:hover:not(.selected) .title a {  
 color:#b81a00;  
 }

5-1., 5-2., 5-3. 코드로는 코드2.로 설정할 수 없는 Sidebar 뷰 사이드바 제목의 컬러를 설정할 수 있습니다.

Sidebar 뷰 사이드바 제목에서 선택되지 않은 글의 폰트는 코드5-1.로, 선택된 글의 폰트 컬러는 코드5-2.로, 선택되지 않은 글에 마우스를 올렸을 때의 폰트 컬러는 코드5-3.으로 각각 설정이 가능합니다.

데모 보기

! 코드를 적용하기 전에 템플릿을 반드시 백업해두시기 바랍니다.
! 테스트용 블로그에서 테스트를 충분히 해본 후 적용하시기 바랍니다.
! 이 글에서처럼 동적뷰에 스타일을 별도로 설정할 경우 가급적 렌더링 타임아웃을 최대로 설정하실 것을 추천합니다.

링크목록, 태그 가젯 좌측의 list style 보이지 않게 설정하기

2013-09-21T21:25:00.000+09:00

블로거에서 기본으로 제공되는 가젯들 중에는 목록 태그(ul, li)로 이루어진 가젯들이 있습니다. '링크 목록' 가젯이나 '목록' 가젯, '태그' 가젯 등이 그러한 예들인데요.

'깔끔' 템플릿과 '여행' 템플릿에서 이 가젯들은 목록 옆에 점( · )을 표시합니다. 이를 list style이라고 하며, list style은 점외에 숫자나 알파벳 등으로도 표현할 수 있습니다.

먄약 디자인 문제 때문에 이 점들을 없애고 싶다면, list style을 none으로 설정하면 됩니다.

 #위젯id ul {  
 list-style-type:none;  
 }

위의 코드를 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 의 자리에,
또는 [대시보드 → 템플릿 → HTML편집] 모드에서

 ]]></b:skin>

코드 바로 앞에 삽입하면 됩니다.

! 참고.

참고로, 위의 코드는 점( · )을 없애주지만, 점이 있던 자리의 빈 공간까지 처리해주지는 않습니다.

점이 있던 자리의 빈 공간 너비까지 설정하려면, padding-left 속성을 추가해주면 됩니다.

 #위젯id ul {  
 list-style-type:none;  
 padding-left:10px;  
 }

padding-left는 왼쪽 가장자리와 목록 사이의 간격을 설정해줍니다. 10px 대신 자신이 원하는 간격을 입력합니다.

코드 적용의 예와 결과 :

 #TextList1 ul {  
 list-style-type:none;  
 padding-left:5px;  
 }

구글 블로그(blogger) 태그 목록 꾸미기 #1

2013-09-21T15:42:00.000+09:00

블로거에서 태그 가젯을 추가한 후 표시 방법을 '목록'으로 설정하면, 라벨(태그)을 목록 형식으로 볼 수 있습니다. 아래에 소개되는 코드는 태그 목록에 마우스 커서를 갖다대면 태그가 부드럽게 우측으로 이동하는, 간단한 동적 효과를 내주는 코드입니다. CSS의 동적인 효과는 그림이나 글로는 설명하기 힘든 부분이 있으므로, 데모 블로그를 통해 확인하시기 바랍니다.

데모 보기

 #Label1 li a {  
 padding-left:0px;  
 -moz-transition: all .2s ease-in-out;  
 -ms-transition: all .2s ease-in-out;  
 -webkit-transition: all .2s ease-in-out;  
 -o-transition: all .2s ease-in-out;  
 transition: all .2s ease-in-out;  
 }  
   
 #Label1 li a:hover {  
 text-decoration:none;  
 padding-left:15px;  
 }

코드 설명

태그 가젯은 복수 생성이 가능하므로, widget id는 반드시 Label1이 아닐 수도 있습니다. 코드를 입력하실 때, widget id 자리에는 원하는 태그 가젯의 widget id를 입력해야 합니다.

코드 적용 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가], 또는 HTML 편집 모드에서

 ]]></b:skin>

코드 바로 앞의 자리입니다.

! 코드 적용 전 템플릿을 반드시 백업해두시기 바랍니다.
! 백업한 템플릿으로 테스트용 블로그에서 충분한 테스트를 마친 후 적용하시기 바랍니다.
! 다음 브라우저에서 작동되는 것을 확인하였습니다 : 익스플로러(IE10), 파이어폭스, 크롬

구글 블로그(blogger) 링크 목록 위젯 버그 해결 방법

2013-09-20T20:50:00.000+09:00

블로거의 링크 목록 위젯은 현재 버그가 있는 상태이고, 이 버그는 Blogger 팀에서 직접 운영하는 Known Issues for Blogger 블로그에서도 공지가 되어 있습니다.

저도 이 버그 때문에 링크 목록을 추가하지 못해서 고생을 한 적이 있는데요. 링크 목록에서 입력이 불가능해지는 버그가 나타날 경우, URL을 키보드로 직접 입력하면 추가/수정/저장 이 가능해집니다.

구글 블로그(blogger) 본문 이미지 호버 효과 #1

2013-09-20T18:51:00.000+09:00

블로거 본문 이미지에 마우스 커서를 갖다대면, 그림자가 생기거나 형태가 변형되는 간단한 호버 효과의 몇가지 예입니다.

동적인 효과는 그림이나 글로는 설명하기가 어려우므로, 데모 블로그를 참고하시기 바랍니다.

데모 보기

본문 이미지 호버 효과 데모 1 적용 코드

 .post-body img {  
 border:0;  
 padding:0;  
 -moz-transition: all 1s;  
 -webkit-transition: all 1s;  
 -o-transition: all 1s;  
 -ms-transition: all 1s;  
 transition: all 1s;  
 }  
 .post-body img:hover {  
 box-shadow: 0px 0px 15px #000000;  
 border-radius: 50%;  
 }

본문 이미지 호버 효과 데모 2 적용 코드

 .post-body img {  
 border:0;  
 padding:6px;  
 -moz-transition: all 1s;  
 -webkit-transition: all 1s;  
 -o-transition: all 1s;  
 -ms-transition: all 1s;  
 transition: all 1s;  
 }  
 .post-body img:hover {  
 box-shadow: 0px 0px 15px #000000;  
 }

본문 이미지 호버 효과 데모 3 적용 코드

 .post-body img {  
 border:0;  
 padding:0;  
 border-top-right-radius:50%;  
 box-shadow: 0px 0px 15px #000000;  
 -moz-transition: all 1s;  
 -webkit-transition: all 1s;  
 -o-transition: all 1s;  
 -ms-transition: all 1s;  
 transition: all 1s;  
 }  
 .post-body img:hover {  
 border-radius:0;  
 }

본문 이미지 호버 효과 데모 4 적용 코드

 .post-body img {  
 border:0;  
 padding:0;  
 border-radius:50%;  
 box-shadow: 0px 0px 15px #000000;  
 -moz-transition: all 1s;  
 -webkit-transition: all 1s;  
 -o-transition: all 1s;  
 -ms-transition: all 1s;  
 transition: all 1s;  
 }  
 .post-body img:hover {  
 border-radius:0;  
 }

다른 CSS 스타일 설정과 마찬가지로, 코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가], 또는 HTML 편집 모드에서

 ]]></b:skin>

코드 바로 앞의 자리입니다.

그림1

! 코드 적용시 한가지 주의해야할 점은 기존 템플릿에 적용되어 있는 본문 이미지의 스타일 설정입니다. 블로그에서 기본으로 제공하고 있는 '깔끔', '풍경', '세련', '무늬', '초현실', '여행' 템플릿의 경우, 템플릿에 따라서 패딩이나, 그림자 등 간단한 스타일 설정이 되어 있는 경우가 있습니다.

 .post-body img

그런 경우, 위의 본문 이미지 스타일 설정 코드를 찾아서 패딩, 그림자 등 겹치는 부분이나 문제가 될 부분을 삭제하여야 합니다.

! 테스트용 블로그에서 백업한 템플릿으로 충분한 테스트를 마친 후 코드를 적용하시기 바랍니다.

! 코드 내용을 이해하는데 도움이 될 만한 글.
CSS border-radius 이해하기
CSS box-shadow 이해하기

구글 블로그(blogger) 태그 클라우드 꾸미기 #2

2013-09-20T13:02:00.000+09:00

태그 클라우드 꾸미기#1에 간단한 transition 호버 효과를 추가해봤습니다. transition 효과는 그림이나 글로는 설명하기 힘든 부분이 있으므로, 데모 블로그를 먼저 보시기 바랍니다.

데모 보기

 .label-size * {   
 color:#2580a2;  
 padding: 3px;   
 margin: 2px;   
 font-size:11px;   
 border:1px solid #2580a2;   
 border-radius:0px;   
 display:block;   
 float:left;   
 text-decoration:none;   
 background:#ffffff;   
 -moz-transition: all .3s ease-in-out;  
 -ms-transition: all .3s ease-in-out;  
 -webkit-transition: all .3s ease-in-out;  
 transition: all .3s ease-in-out;  
 }   
   
 .label-size *:hover {   
 text-decoration:none;   
 background:#000000;  
 color:#dbdbdb;  
 }

transition 효과만 추가한 것이므로, 기본적인 설정 방법은 #1의 방법과 같습니다. 추가된 부분에 대해서만 따로 설명을 드리면,

그림1

<그림1>에서 보시는 바와 같이, 박스 안의 폰트 색상은 [맞춤설정 → 고급] 의 '링크 색상'과 '방문한 링크 색상'으로 설정합니다. 이 부분을 제외한 나머지는 코드에서 직접 본인의 템플릿에 맞게 수정하시면 됩니다.

그림2

코드는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 에, 또는 HTML 편집 모드에서

 ]]></b:skin>

코드 바로 앞에 붙여넣으시면 됩니다.

동적뷰 본문 폰트 크기 설정

2013-09-16T23:38:00.000+09:00

그림1

동적뷰 사용시 맞춤설정에서 폰트 크기를 아무리 설정 해줘도 본문 폰트 사이즈가 바뀌지 않는데요.

그림2

크롬이나 파이어폭스에서 요소 검사를 했을 때, 동적뷰 본문의 폰트 크기는 일반 템플릿과 달리 article이란 class에 스타일 설정이 되어 있는 것을 볼 수 있었습니다.

 .article {  
 font-size:10px;  
 }

고로, 동적뷰 본문의 글자 크기를 조절하시려면 위의 코드를 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 에 삽입하시면 됩니다. 삽입하실 때, 10px 자리에는 원하는 픽셀이나 em을 입력하시면 됩니다.

데모 보기

! 내용 수정

아래의 코드로도 본문 폰트 크기를 설정할 수 있습니다.

 .article .article-content {  
 font-size:12px;  
 }

! 본문의 폰트 크기와 줄 간 간격을 같이 설정하시려면, 아래의 글을 참고하시기 바랍니다.

본문 줄 간 간격 설정하기

당분간 댓글을 일반 댓글로 전환합니다.

2013-09-16T16:30:00.002+09:00

현재 블로거 유저들 사이에서는 구글+ 댓글과 관련하여 꽤 많은 문제점들이 보고되고 있습니다. 그 중 한가지는 댓글이 블로그 소유자에게 공지되지 않는다는 것입니다. 즉, 댓글이 달려도 운영자가 댓글이 달렸는지를 확인할 수 없다는 것인데요.

'구글+ 댓글은 블로거의 기능을 향상시키는 것이 아니라,
블로거들을 구글+로 유도하려는 의도' 라는 어느 해외 블로거의 의견

오늘 블로그의 글들을 확인해보다가 저에게 공지되지 않은 댓글들을 꽤 많이 발견했습니다. 블로그 특성상 저에게는 다른 블로거분들과의 피드백이 상당히 중요합니다. 처음에는 크게 문제가 되지 않았는데, 글이 많아지면서 댓글을 확인할 수 없다는 부분이 큰 단점으로 다가오네요. 이러한 부분이 보완될 때까지 당분간 댓글을 일반 댓글로 전환하여 운영하겠습니다.

! 기존에 작성해주신 구글플러스 댓글들은 그대로 유지 보관되며, 댓글 제어 권한은 댓글 작성자가 가지고 있습니다. 원하실 때 언제든 자신의 구글플러스 페이지에서 수정/삭제하실 수 있습니다. 일반 댓글에서는 익명으로도 댓글을 남기실 수 있도록 설정해두었습니다. 필요한 내용, 지적할 내용이 있다면 언제든 댓글을 남겨주세요.

CSS border-radius 이해하기

2013-09-12T19:56:00.000+09:00

border-radius는 경계선의 모서리를 얼마나 둥글게 할지를 지정한다. border-radius 속성을 이해하기 위해서는

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

이 4가지 속성을 먼저 이해하는 것이 편하다. border-radius는 이 4가지 속성의 축약 속성이기 때문이다. 위 4가지 속성은 순서대로 좌측상단, 우측상단, 우측하단, 좌측하단 모서리의 둥근 정도를 지정한다.

이 4가지 속성들은 하나, 또는 두개의 radius값을 설정함으로써 원형, 또는 타원형 모서리를 구현할 수 있다.

! 아래의 예에는 실제 CSS 스타일이 적용되었다.(RSS 피드에서는 아래의 스타일 설정이 나타나지 않을 수도 있음.)

예1 : radius 값을 하나만 설정한 원형(대칭) 모서리

 width: 100px;  
 height: 100px;  
 border:1px solid black;  
 border-top-left-radius: 50px;

예2 : radius 값을 2개 설정한 타원형(비대칭) 모서리

 width: 100px;  
 height: 100px;  
 border:1px solid black;  
 border-top-left-radius: 100px 50px;

radius 값을 설정할 때 첫번째 값은 가로(수평) 값이고, 두번째 값은 세로(수직) 값이다. 그리고 이 값은 px 외에 em이나 % 등으로도 설정이 가능하다.

그림1

예3 : radius 값을 %로 설정한 경우

 width: 100px;  
 height: 100px;  
 border:1px solid black;  
 border-top-left-radius: 50% 100%;

border-radius는 위의 4가지 속성들을 축약한 속성이다. 즉, border-radius 하나로 위 4가지 속성들을 모두 표현할 수 있다.

예를 들어,

 border-top-left-radius:2px;  
 border-top-right-radius:2px;  
 border-bottom-right-radius:2px;  
 border-bottom-left-radius:2px;

는

 border-radius:2px;

와 같으며,

 border-radius: 2em 1em 4em / 0.5em 3em;

는

 border-top-left-radius: 2em 0.5em;  
 border-top-right-radius: 1em 3em;  
 border-bottom-right-radius: 4em 0.5em;  
 border-bottom-left-radius: 1em 3em;

와 같다.

border-radius는 다음과 같은 형식으로 radius 값을 지정한다.

 border-radius: [모서리 4개의 수평 radius 값] / [모서리 4개의 수직 radius 값] ;

 border-radius: [좌측상단 모서리의 수평 radius 값] [우측상단 모서리의 수평 radius 값] [우측하단 모서리의 수평 radius 값] [좌측하단 모서리의 수평 radius 값] / [좌측상단 모서리의 수직 radius 값] [우측상단 모서리의 수직 radius 값] [우측하단 모서리의 수직 radius 값] [좌측하단 모서리의 수직 radius 값] ;

좀 더 이해하기 쉽게 그림으로 표현하면 <그림2>와 같다.

그림2

좌우측 각 4개의 숫자값들은 생략이 가능한데,

숫자값이 하나만 주어지면, 이는 모서리 4곳의 radius 값이 모두 동일함을 의미한다.

예4 :

 width: 100px;  
 height: 100px;  
 border:1px solid black;  
 border-radius: 10px;

예5 : 수평 radius 값은 20px로 통일하고, 수직 radius 값은 각각 10px, 20px, 30px, 40px 로 따로 설정하였다.

 width: 100px;  
 height: 100px;  
 border:1px solid black;  
 border-radius: 20px / 10px 20px 30px 40px;

숫자값이 2개가 주어지면 첫번째 숫자값은 좌측상단과 우측하단 모서리의 radius 값을, 두번째 숫자값은 우측상단과 좌측하단 모서리의 radius 값을 의미한다.

예6 :

 width: 100px;  
 height: 100px;  
 border:1px solid black;  
 border-radius: 20px 40px;

예7 : 좌측상단과 우측하단의 수평 radius 값은 20px로 주고 우측상단과 좌측하단의 수평 radius 값은 40px로 주었으며, 수직 radius 값은 각각 10px, 20px, 30px, 40px 로 달리 설정하였다.

 width: 100px;  
 height: 100px;  
 border:1px solid black;  
 border-radius: 20px 40px / 10px 20px 30px 40px;

숫자값이 3개가 주어질 경우, 생략된 마지막 좌측하단 값은 대각선 방향인 우측상단 값과 동일하다. 즉, 숫자값 3개는 순서대로 각각 [좌측상단 값] [우측상단과 좌측하단 값] [우측하단 값] 을 의미한다.

예8 :

 width: 100px;  
 height: 100px;  
 border:1px solid black;  
 border-radius: 20px 40px 50px;

예9 : 좌측상단의 수평 radius는 20px, 우측상단과 좌측하단의 수평 radius는 40px, 우측하단의 수평 radius는 50px로 설정하였고, 좌측상단과 우측하단의 수직 radius는 20px, 우측상단과 좌측하단의 수직 radius는 40px로 설정하였다. 헉헉.

 width: 100px;  
 height: 100px;  
 border:1px solid black;  
 border-radius: 20px 40px 50px / 20px 40px;

+ 아래는 border-radius를 활용하여 만든 도형의 몇가지 예이다.

 height: 65px;  
 width:160px;  
 border:1px solid black;   
 border-bottom-right-radius: 50px;

 height: 5em;  
 width: 12em;  
 border:1px solid black;   
 border-radius: 1em 4em 1em 4em;

 height: 70px;  
 width: 70px;  
 border:1px solid black;   
 border-radius: 35px;

마지막으로, transition을 이용한 호버 효과

 .예 {   
 width: 100px;  
 height: 100px;  
 border:1px solid black;  
 -moz-transition: all .3s ease-in-out;  
 -ms-transition: all .3s ease-in-out;  
 -webkit-transition: all .3s ease-in-out;  
 transition: all .3s ease-in-out;  
 }  
 .예:hover {  
 border-radius: 50px;  
 background: #2580a2;  
 }

! 참고한 글 및 참고할 만한 글
border-radius, Mozilla Developer Network
border-radius property, w3schools
Border-radius: create rounded corners with CSS!, CSS3.info

CSS background-repeat 이해하기

2013-09-11T21:17:00.001+09:00

background-repeat 속성은 배경(백그라운드) 이미지가 어떻게 반복될지를 설정한다. 배경 이미지는 가로로 반복될 수 있고, 세로로 반복될 수도 있으며, 가로와 세로 모두 반복되거나, 반복되지 않도록 설정할 수도 있다.

! 아래의 예들은 실제 background-repeat이 적용된 것이다. (RSS 피드에서는 아래의 스타일 설정이 보이지 않을 수 있음.)

background-repeat 속성의 값들

repeat - 배경 이미지가 가로(수평)와 세로(수직) 모두 반복된다. repeat는 기본(default)값이다. 즉, 따로 설정하지 않는 이상, 배경 이미지는 기본적으로 반복된다.

예 :

 background-image: url("이미지 주소");  
 background-repeat: repeat;

repeat-x - 배경 이미지가 가로(수평)로만 반복된다.

예 :

 background-image: url("이미지 주소");  
 background-repeat: repeat-x;

repeat-y - 배경 이미지가 세로(수직)로만 반복된다.

예 :

 background-image: url("이미지 주소");  
 background-repeat: repeat-y;

no-repeat - 배경 이미지가 반복되지 않는다.

예 :

 background-image: url("이미지 주소");  
 background-repeat: no-repeat;

inherit - 배경 이미지 반복 여부 설정을 상위(부모) 요소로부터 물려받는다.

! 참고할 만한 글
CSS background-repeat Property (w3schools.com)
background-repeat (Mozilla Developer Network)

! 이 글에 사용된 배경 이미지는 재배포 금지와 출처 표기를 조건으로 상업적인 용도로 사용이 가능한, medialoot 의 무료 아이콘입니다.

구글 블로그(blogger) 인용 상자 꾸미기

2013-09-11T13:44:00.000+09:00

블로거에서 인용 상자의 class id는 'blockquote'입니다. 고로 인용 상자의 스타일을 설정하려면 다음의 코드를

 .post blockquote {  
 원하는 스타일을 직접 입력  
 }

[대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 에 삽입해주거나, 또는 HTML 편집 모드에서

 ]]></b:skin>

코드 바로 앞에 직접 삽입해주면 됩니다. 물론, 저 상태 그대로 삽입해선 안되고, 코드 중간의 '원하는 스타일을 직접 입력' 부분에는 스타일 설정 코드가 들어가야 합니다.

어떻게 꾸미느냐는 블로거의 자유이고 또 가능한 스타일이 너무도 많기 때문에 일일이 말씀드릴 수는 없습니다만, 기존 블로거 유저들이 공유하고 있는 인용상자 스타일은 구글에서 'blogger blockquote css' 'blogger blockquote style' 등으로 검색하여 쉽게 찾을 수 있습니다. 예로써 활용하실 수 있도록 몇가지 샘플들을 아래에 첨부합니다. (괜찮은 디자인의 인용상자 스타일을 보게되면, 따로 모아서 나중에 다시 포스팅하도록 하겠습니다.)

! 이 글에는 스타일 설정이 적용되어 있으므로, RSS 피드로만 보실 경우 아래의 스타일 설정이 나타나지 않을 수 있습니다.

인용상자에 마우스를 올렸을 때 점진적으로 색상을 변화시켜 동적인 효과를 주었다.

 .post blockquote {   
 width: 75%;  
 margin:auto;  
 padding: 15px;  
 border: 1px solid #dbdbdb;  
 -moz-transition: all .3s ease-in-out;  
 -ms-transition: all .3s ease-in-out;  
 -webkit-transition: all .3s ease-in-out;  
 transition: all .3s ease-in-out;  
 }  
 .post blockquote:hover {  
 background: #000000;  
 color: #C1C1C1;  
 }

인용상자에 마우스를 올렸을 때 그림자가 생성되도록 하였다.

 .post blockquote {   
 width: 75%;  
 margin:auto;  
 padding: 15px;  
 border: 1px solid #dbdbdb;  
 -moz-transition: all .3s ease-in-out;  
 -ms-transition: all .3s ease-in-out;  
 -webkit-transition: all .3s ease-in-out;  
 transition: all .3s ease-in-out;  
 }  
   
 .post blockquote:hover {  
 box-shadow: 10px 10px 10px #2580a2;  
 }

"문제를 해결하는 힘은 새로운 정보를 얻는 데서 오는 것이 아니라, 이미 오래 전부터 알고 있던 것을 체계적으로 정리하는 데서 온다." - 비트겐슈타인

 .post blockquote {   
 width: 75%;  
 margin:auto;  
 border-left: 4px solid #ccc;  
 color: #a5a4a4;  
 font-style: italic;  
 padding-left: 15px;   
 }

 .post blockquote {   
 width:75%;   
 margin: auto;  
 padding: .5em 1em;  
 border-left: 5px solid #fce27c;  
 background-color: #f6ebc1;   
 }

 .post blockquote {   
 width:65%;   
 margin: auto;  
 background: url(이미지 주소) no-repeat;     
 color: #a5a4a4;  
 font-style:italic;  
 padding: 30px;  
 }

구글 블로그(blogger)에서 조건 태그를 이용하여 페이지별로 위젯 설정하기

2013-09-09T23:36:00.000+09:00

블로거의 조건태그를 이용하면, 데모 블로그에서처럼 위젯의 표시 여부를 페이지에 따라 달리할 수 있습니다.

데모보기

지난번에 관리자만 볼 수 있는 가젯 만들기 라는 글에서도 말씀을 드렸는데요. 템플릿을 HTML편집 모드에서 보시면 위젯은 아래와 같은 구조로 되어 있습니다.

<b:widget id='위젯id' locked='**' title='위젯 타이틀' type='**'>
<b:includable id='main'>
내용
</b:includable>
</b:widget>

그리고, 어떤 위젯을 조건에 따라서 작동시키고자 할 때 조건 태그가 들어가는 자리는 '<b:includable id='main'>'과 '</b:includable>' 사이입니다.

<b:widget id='위젯id' locked='**' title='위젯 타이틀' type='**'>
<b:includable id='main'>
<b:if cond='조건'>
내용
</b:if>
</b:includable>
</b:widget>

또는,

<b:widget id='위젯id' locked='**' title='위젯 타이틀' type='**'>
<b:includable id='main'>
<b:if cond='조건'>
조건이 참일 경우 표시할 내용
<b:else/>
조건이 참이 아닌 경우 표시할 내용
</b:if>
</b:includable>
</b:widget>

'조건'에는 참이나 거짓으로 평가될 수 있는 모든 항목을 넣을 수 있으며, 조건 태그를 사용하여 컨텐츠를 표시할 수 있는 위치도 있고 그렇지 않은 위치도 있습니다.

! 참고. 레이아웃용 Widget 태그 (구글 도움말)

구글 도움말의 설명과 예가 충분하지 않기 때문에 어떤 조건들이 가능한지 전부 알 수는 없지만, 위젯 설정과 관련하여 해외 블로거들 사이에 많이 공유되고 있는 조건 태그는 주로 9가지였습니다.

! 참고. 구글 블로그(blogger)의 조건 태그

그리고 이 9가지를 테스트용 블로그에서 직접 테스트를 해보았을 때 작동하는 조건 태그는 아래의 7가지였습니다.(나머지 2개는 제가 적용을 잘못해서 작동하지 않은 것일 수도 있습니다.)

1. Home Page

<b:if cond='data:blog.url == data:blog.homepageUrl'>

홈 페이지에서만 나타난다

2. Index Pages

<b:if cond='data:blog.pageType == "index"'>

홈 페이지와 레이블 검색 페이지, 그리고 블로그 보관함의 년 단위 페이지에서 나타난다.

3. Post Page, 또는 Item Page (각각의 개별 포스트)

<b:if cond='data:blog.pageType == "item"'>

포스트(아이템) 페이지, 즉 개별 포스트의 본문을 읽을 때만 나타난다.

4. Label-Search Pages

<b:if cond='data:blog.searchLabel'>

라벨 검색 페이지에서만 나타난다.

5. Static Page(s)

<b:if cond='data:blog.pageType == "static_page"'>

페이지 탭의 페이지에서만 나타난다. (블로거 대시보드 페이지 메뉴를 통해서 생성한 '새 페이지'를 static page라고 합니다.)

6. Archive Pages

<b:if cond='data:blog.pageType == "archive"'>

블로그 보관함의 월단위 페이지를 조회할 때 나타난다.

7. Specific Page

<b:if cond='data:blog.url == "URL주소"'>

특정 URL에서만 나타난다. .com 과 .kr 과 상관없이 똑똑하게 나타난다.

참고로, 위의 조건 태그들을 각각 역의 조건으로 바꿀 수도 있습니다. 예를 들어,

<b:if cond='data:blog.url == data:blog.homepageUrl'>

이 조건 태그는 홈페이지에서만 표시한다는 조건태그이지만, 코드 중간의 "=="를 "!="로 바꿔주면

<b:if cond='data:blog.url != data:blog.homepageUrl'>

이 조건 태그는 '홈페이지가 아닐 경우에만 표시한다'가 됩니다. (해당 조건이 거짓일 경우 표시한다.)

자, 이제 직접 적용을 해보겠습니다.

그림1

일단, 테스트용 블로그에서 별다른 내용 없는 HTML/Javascript 가젯을 생성한 후

<b:widget id='HTML1' locked='false' title='별내용없는위젯' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

이를 HTML편집 모드에서 확인해보았더니 위젯의 코드는 위와 같은 모습이었습니다. 말씀드렸던 바와 같이, 위젯 코드의 시작 지점에는 '<b:includable id='main'>'이 보이고 종료 지점에는 '</b:includable>'라는 코드가 보입니다.

이 위젯을 가령 홈페이지에서만 표시하고자 한다면, 위에서 열거한 조건들 중 첫번째 조건 태그를 삽입하면 되겠죠.

<b:widget id='HTML1' locked='false' title='별내용없는위젯' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

즉, 이런 모습이 됩니다.

그림2

+
여기까지가 해외 블로거들 사이에서 조건 태그와 관련하여 주로 공유되는 내용입니다. 사실상 거의 그대로 번역하여 설명을 드린 것인데요. 위의 내용도 물론 맞습니다. 그런데, 위의 내용을 그대로 적용했을 때 한가지 문제점이 있었습니다. 바로, 스타일 설정입니다. 위젯에 공통적으로 적용되어 있는 스타일 설정 때문에 위젯이 사라져도 간격이나 악센트(경계선) 등은 사라지지 않았습니다.

이는 위의 예에서처럼 하얀 바탕색에 경계선이 없는 경우에는 잘 나타나지 않는데요. 다른 템플릿을 적용해서 보여드리겠습니다.

그림3. 동일한 테스트용 블로그를 이번에는 색상과 경계가 뚜렷한 '세련' 템플릿으로 적용시켜 보았다.

<그림3>을 보시면, 위젯은 사라졌지만 간격이나 선, 공간은 그대로 남아있습니다. 이 문제를 해결하기 위해서는 표시되지 않을 때의 스타일 설정을 별도로 해줘야 합니다.

참고로, 어떤 요소를 표시되지 않도록 설정해주는 css의 태그는

display: none;

입니다. 즉, 자신이 원하지 않는 조건에서는 이 스타일 설정이 적용되도록 만들어주어야 하는데, 다음과 같이 입력함으로써 이를 적용시킬 수 있습니다.

<b:widget id='HTML1' locked='false' title='별내용없는위젯' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
<b:else/>
<style type='text/css'>
#HTML1 {
display:none;
}
</style>
</b:if>
</b:includable>
</b:widget>

이해를 돕기 위해 그림을 추가합니다.

그림4

그림5

<그림4>와 같은 방법으로 코드를 적용해주었더니, 위젯이 깔끔하게 사라지는 것을 볼 수 있었습니다.

조건 태그를 사용하거나 스타일을 설정하는데 어떤 정해진 방법이 있는 것은 아닙니다. 데모 블로그의 경우에는 else 태그 대신 거짓(!=) 조건을 사용했습니다. 하나의 예로써 참고하실 수 있도록 코드와 설명을 아래에 첨부하겠습니다.

<b:widget id='Text2' locked='false' title='본문을 읽을 때만 표시되는 위젯' type='Text'>
<b:includable id='main'>

<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
#Text2 {
display:none;
}
</style>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#Text2 {
margin-top:0px;
}
</style>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

그림6

! 테스트용 블로그에서 충분한 테스트를 통해 내용을 이해한 후 적용하시기 바랍니다. 적용 전 템플릿을 백업해두는 것은 기본입니다~!

정말 힘들게 작성했는데 +1 안눌러주면 완전 섭함요.

블로그 관련 통계들

2013-09-08T15:57:00.000+09:00

미국의 소비자/인터넷 이용자들이 이메일 구독을 중단하는 가장 큰 이유는 메일 수가 너무 많고(69%) 관련 없는 내용들을 보내기 때문(56%)이다. Source: Chadwick Martin Bailey
미국의 온라인 소비자의 81%는 블로그에서 얻는 정보와 조언을 신뢰한다. Source: BlogHer
2013년까지 미국의 블로그 독자층은 1억2천8백만명으로 늘어날 전망이다. Source: MyMarketingDept.
가장 활동적으로 블로그 활동을 하는 연령층은 21세 ~ 35세로, 전체 블로그 인구의 53.3%를 차지한다. Source: Sysomos
총 인터넷 사용 시간의 23%는 소셜 네트워크나 블로그를 하는데 바쳐진다. Source: Dream Systems Media
미국 온라인 소비자의 61%는 블로그의 추천을 기반으로 구매했다. Source: BlogHer
B2B 기업의 33%는 블로그를 활용한다. Source: InsideView
마케터의 37%는 블로그가 건텐츠 마켓팅 중 가장 가치있는 유형이라고 말한다. Source: Content Plus
기업들의 81%는 그들의 블로그를 "유용하다(useful)", "중요하다(important)", 또는 "결정적이다(critical)" 고 여긴다. Source: Hubspot
한달에 20번 이상 블로깅을 하는 기업의 트래픽은 한달에 4번 이하로 블로깅을 하는 기업의 5배가 넘었다. Source: Hubspot
블로그를 활용하는 소규모 기업은 블로그를 활용하지 않는 소규모 기업보다 성장률이 126% 더 높았다. Source: ThinkCreative
미국 소규모 기업들의 22%는 홍보를 위해 다음 12 개월 이내에 YouTube에 동영상을 게재할 계획이다. Source: BIA/Kelsey
미국 소규모 기업들의 52%는 홍보를 위해 소셜 미디어를 활용한다. Source: BIA/Kelsey

관리자만 볼 수 있는 가젯 만들기

2013-09-06T21:43:00.000+09:00

블로거의 가젯들은 내용이 저마다 다 다르지만, 잘 살펴보면 다음과 같은 구조로 되어 있음을 알 수 있다.

<b:widget id='위젯id' locked='**' title='위젯 타이틀' type='**'>
<b:includable id='main'>
내용
</b:includable>
</b:widget>

만약 자신의 블로거에 관리자만 볼 수 있는 가젯을 만들고 싶다면, '<b:includable id='main'>' 바로 뒤와 '</b:includable>' 바로 앞을 div나 span으로 묶어서 class='item-control blog-admin' 으로 지정해주면 된다.

<b:widget id='위젯id' locked='**' title='위젯 타이틀' type='**'>
<b:includable id='main'>
<div class='item-control blog-admin'>
내용
</div>
</b:includable>
</b:widget>

또는

<b:widget id='위젯id' locked='**' title='위젯 타이틀' type='**'>
<b:includable id='main'>
<span class='item-control blog-admin'>
내용
</span>
</b:includable>
</b:widget>

끝 ~ !

구글 블로그(blogger) 본문 요약 및 이미지 썸네일 처리하기

2013-09-05T17:33:00.000+09:00

아래는 데모 블로그에서처럼 홈에서 본문을 요약 처리하고 이미지가 있는 경우 이미지를 썸네일로 보여주는 자바스크립트 코드입니다.

데모 보기

 <script type='text/javascript'>  
 summary_noimg = 600;  
 summary_img = 600;  
 img_thumb_height = 250;  
 img_thumb_width = 350;  
 </script>  
 <script type='text/javascript'>  
 //<![CDATA[  
 function removeHtmlTag(strx,chop)  
 {  
 if(strx.indexOf("<")!=-1)  
 {  
 var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx = s.join("");}  
 chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}  
 function createSummaryAndThumb(pID){  
 var div = document.getElementById(pID);  
 var imgtag = "";  
 var img = div.getElementsByTagName("img");  
 var summ = summary_noimg;  
 if(img.length>=1) {imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img [0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';  
 summ = summary_img;  
 }  
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';  
 div.innerHTML = summary;  
 }  
 //]]>  
 </script>

코드의 일부 내용들은 자신의 스타일에 맞게 변경이 가능합니다.

 summary_noimg = 600;

포스트에 이미지가 존재하지 않을 때 요약 페이지에 표시하게 될 글자 수

 summary_img = 600;

포스트에 이미지가 존재할 때 요약 페이지에 표시하게 될 글자 수

 img_thumb_height = 250;

요약 페이지에 표시될 썸네일 이미지의 높이(height)

 img_thumb_width = 350;

요약 페이지에 표시될 썸네일 이미지의 너비(width)

 <span style="float:left; padding:0px 10px 5px 0px;">

썸네일과 요약 텍스트 사이의 간격을 조절하고 싶다면, 여기서 패딩 부분 조정하면 됩니다.

자신의 스타일에 맞게 코드를 변경했다면, [대시보드 → 템플릿 → HTML편집] 으로 들어가서 검색으로 </head> 태그를 찾은 후 </head> 바로 위에 해당 코드를 복사하여 붙여넣기합니다.

그리고나서,

 <data:post.body/>

이 코드를 조건 태그로 바꿔주어야 합니다.

기본 템플릿(구식 템플릿)
동적뷰 템플릿
어디선가 다운받은 템플릿

위 세가지 템플릿이 아닌, 블로거에서 제공하는 '깔금', '풍경', '세련', '무늬', '초현실', '여행' 템플릿을 수정하여 쓰고 있을 경우, Ctrl+F로 이 코드를 찾으면, 총 3개가 발견됩니다.

이 중 첫번째는 모바일 영역이니 건들지 마시고, 두번째에 보이는

 <data:post.body/>

코드를 아래의 코드로 대체해줍니다.

 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>  
 <b:if cond='data:blog.pageType != &quot;item&quot;'>  
 <div expr:id='&quot;summary&quot; + data:post.id'>  
 <data:post.body/>  
 </div>  
 <script type='text/javascript'>createSummaryAndThumb   
 (&quot;summary<data:post.id/>&quot;);</script>  
 <div class='readmore-wrap'>  
 <span class='rmlink' style='font-weight:bold;padding:5px;float:right;text- align:right;'>  
 <a expr:href='data:post.url'>더 보기&#187;</a>  
 </span>  
 </div>  
 </b:if>  
 </b:if>  
 <b:if cond='data:blog.pageType == &quot;item&quot;'>  
 <data:post.body/>  
 </b:if>  
 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>  
 <data:post.body/>  
 </b:if>

모두 완료되면, '템플릿 저장'을 클릭해 줍니다.

코드의 출처는 mytutorialscafe.com 이라는 해외 블로그입니다. 코드 적용 전에는 반드시 백업을 해두시고, 또 테스트용 블로그에서 충분한 테스트를 해본 후 사용하시기 바랍니다.

구글 블로그(blogger) 이미지 업로드시 크기 조정하기

2013-09-04T19:15:00.001+09:00

블로거에서 이미지를 업로드한 후 이미지를 클릭하면, 해당 이미지를 '작게', '중간', '크게', 'X 라지', '원본 크기' 로 설정할 수 있습니다.

만약, 이 다섯가지 설정 중 마음에 드는 크기가 없다면, HTML 모드에서 코드를 약간 수정해줌으로써 이미지를 원하는 크기로 설정할 수 있습니다.

이미지를 올린 후 글쓰기의 HTML 모드로 들어가면, 이미지는 다음과 같은 코드로 표시됩니다.

여기서 주목할 부분은 이미지의 주소 중 's1600'이라는 부분입니다. 이 s1600은 이미지의 최대 너비(width)를 의미합니다(높이는 너비에 따라 자동 변경). 예를 들어, 너비가 500px인 이미지의 s주소를 's400'으로 입력해주면, 이미지는 400px로 자동 축소됩니다. 이 s주소는

큰 이미지를 블로그에서 작게 표시할 때
이미지의 크기를 '작게', '중간', '크게', 'X 라지', '원본 크기' 외에 자신이 원하는 크기로 지정하고자 할 때
블로그의 이미지를 외부에 원하는 사이즈로 링크하고자 할 때

특히 유용하게 쓰일 수 있습니다.

! 이미지를 원본 보다 작게 표시하려면 단순히 s를 줄이면 되지만, 이미지를 원본 보다 크게 표현하려면 <img> 태그에 width="***"를 추가적으로 입력해주어야 합니다.

s주소는 또한, 포토샵이나 기타 이미지 편집기 등에서 제공하는 잘라내기(crop) 기능을 지원합니다. s주소로 이미지의 사이즈를 줄인후 옆에 '-c'라고 입력하면, 이미지는 해당 사이즈의 정사각형 이미지로 표현되면서 동시에 정사각형을 벗어난 부분은 버려지게 됩니다. 위의 이미지에 크롭핑 주소를 적용한 예를 직접 보시기 바랍니다.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTtpoSjTURvQomLPnJwYxoN37CHfA-h04Pn62GMAj6w6cdKon4CLFOJZT5bWOpUAgjUhLPGooT0enA_ZFlDn6b5d7SiHg5-_Vk_OFITGCi2ej-8XoN8STo-0oNJgRlR3xvHqXQQt7ojKE/s200-c/car.jpg

또, s주소에 '-d'라는 옵션을 추가하면 다운로드로 연결되는 주소를 만들 수 있습니다. 아래 '-d' 옵션이 추가된 주소를 한번 클릭해보시기 바랍니다.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTtpoSjTURvQomLPnJwYxoN37CHfA-h04Pn62GMAj6w6cdKon4CLFOJZT5bWOpUAgjUhLPGooT0enA_ZFlDn6b5d7SiHg5-_Vk_OFITGCi2ej-8XoN8STo-0oNJgRlR3xvHqXQQt7ojKE/s1600-d/car.jpg

'-d' 옵션은 이미지 배포를 목적으로 하는 블로그에서 유용하게 쓰일 수 있겠죠.

※ 이미지를 개별적으로 설정하지 않고, 템플릿상에서 최대 크기를 제한하려면 다음의 글을 참고하시기 바랍니다.

이미지의 최대 폭 제한하기