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

CSS transition 이해하기

! 이 글의 예문에 적용된 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

CSS border-radius 이해하기

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 이해하기

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 의 무료 아이콘입니다.

CSS box-shadow 이해하기

box-shadow는 해당 박스요소에 그림자를 나타낼 수 있게 해준다.

box-shadow를 설정하는 기본적인 방법은 그림자의 수평 위치와 수직 위치를 설정해주는 것이다. (참고로, 수평값과 수직값은 마이너스값으로도 설정이 가능하며, 수평값과 수직값은 box-shadow가 작동하기 위해 반드시 입력되어야 한다. 아래에 소개될 나머지 값들. 색상, 블러 등은 선택 옵션이다.)

  box-shadow: [x offset(그림자의 수평 위치)] [y offset(그림자의 수직 위치)]  

예 : box-shadow: 10px 10px;

여기에 색상값을 추가하여 그림자의 색상을 설정할 수 있다.

 box-shadow: [x offset(그림자의 수평 위치)] [y offset(그림자의 수직 위치)] [color(색상)];  

예 :  box-shadow: 10px 10px #2580a2;

수평값과 수직값 외에 숫자값이 하나 더 추가될 경우 세번째 숫자값은 블러(blur), 즉 그림자의 흐릿한 정도를 나타낸다.

 box-shadow: [x offset(그림자의 수평 위치)] [y offset(그림자의 수직 위치)] [blur(그림자의 흐릿함 정도)] [color(색상)]  

예 : box-shadow: 10px 10px 10px #2580a2;

숫자값이 하나 더 추가될 경우 네번째 숫자값은 스프레드(Spread) 값이다. 스프레드 값을 설정하면, 그림자가 스프레드 값 만큼 모든 방향으로 커진다.

 box-shadow: [x offset(그림자의 수평 위치)] [y offset(그림자의 수직 위치)] [blur(그림자의 흐릿함 정도)] [color(색상)] [Spread]   

예 : box-shadow: 10px 10px 10px 10px #2580a2;

스프레드는 다소 혼동하기 쉬운 개념인데, 수평값과 수직값만으로 그림자의 크기를 늘린 것과 스프레드값을 이용하여 그림자의 크기를 늘린 것을 비교하면 이해하기 쉽다.

예 : box-shadow: 20px 20px 0px 0px #2580a2;

예 : box-shadow: 10px 10px 0px 10px #2580a2;

콤마를 이용하면, 그림자를 여러개로 만들거나 나누는 효과를 내는 것이 가능하다.

예 :  box-shadow: -5px -5px black, 15px -5px yellow, 15px 15px blue, -5px 15px red;

마지막으로, [inset] 은 그림자를 바깥이 아닌 내부에 형성해주는 값이다. 맨앞에 그냥 inset 이라고 입력해주면 된다.

 box-shadow: [inset] [x offset(그림자의 수평 위치)] [y offset(그림자의 수직 위치)] [blur(그림자의 흐릿함 정도)] [color(색상)] [Spread]   

예 : box-shadow: inset 10px 10px 10px 0px #2580a2;

콤마와 [inset]을 같이 이용한다면, 그림자를 내부와 외부 동시에 만드는 것도 가능하다.

예 : box-shadow: inset 10px 10px 10px 0px #2580a2, 10px 10px 10px 0px #2580a2;

! 아래 자료를 참고하여 작성하였음.
http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/