CSS3 Colors

COLORSIn Korean

CSS3 색상을 이야기 하기 젂에,우리는 CSS2.1 색상을돌아볼필요가 있습니다.

CSS2.1 색상

CSS2.1는 색상을6가지타입의 속성값을 사용하여

정의 할 수 있습니다.

키워드

6자리 16진수 표기

3자리 16진수 표기

RGB 숫자형 표기

RGB 퍼센트 표기

시스템 컬러

1

2

3

4

5

6

1. 키워드

CSS2.1는 17개의키워드를허용합니다: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal,

white, yellow.

키워드 예시 :

p { color: aqua; }

p { color: black; }

p { color: blue; }

p { color: fuchsia; }

p { color: gray; }

p { color: green; }

p { color: lime; }

2. 6자리 16진법표기

6자리 16진법 표기 (#rrggbb):

p { color: #AE03FF; }

3. 3자리 16진법표기

3자리 16진법 표기는‘rr’, ‘gg’ , ‘bb’ 와 같은 복수표기를단수표기로 허용합니다 (#rgb):

p { color: #663399; }

p { color: #639; }

p { color: #aaff55; }

p { color: #af5; }

6자리 RGB 표기(#rrggbb)는rr, gg, bb 형태의 같은 값반복에서만

3자리 표기가 가능합니다.많은 경우 6자리 값은 축약표기가

불가합니다.

p { color: #953d3d; }

p { color: #34d209; } 축약표기불가

축약표기불가

4. RGB 숫자형(numeric) 표기

RGB 숫자형 표기는'rgb(‘ 뒤에 컴마로 분리된 3개의 숫자

값을 붙이고 ‘)’ 로 닫습니다.

p { color: rgb(109, 22, 255); }

RGB 숫자형 표기는 0 (검정) 부터255 (흰색) 사이의 값을 허용합니다.

숫자의 단위는 붙이지 않습니다.

5. RGB 퍼센트표기

RGB 퍼센트 표기는'rgb(‘ 뒤에 컴마로 분리된 3개의

퍼센트 값을 붙이고 ‘)’ 로 닫습니다.

p { color: rgb(0%,10%,100%); }

RGB 퍼센트 표기는 0% (검정) 부터10% (흰색) 사이의 값을 허용합니다.

모든 값은 %기호를 포함하여사용합니다.

6. 시스템컬러

CSS2.1는 OS의 그래픽 스타일과 맞는특별한 컬러를 사용하기 위한시스템컬러 사용을 허용합니다.

p { color: ButtonFace; }

주의: 시스템컬러는 UI와 연결된

요소의 외형을 지정하는CSS3 UI ‚appearance’ 속성의

지지로 반대 되어 왔습니다.

CSS3 색상

우리는 CSS3에서 8가지 새로운 방식을사용하여 색상을 지정할 수 있습니다.

확장된 색상 키워드

투명도(Opacity)

RGBA 숫자형 표기

RGBA 퍼센트 표기

HSL 표기

HSLA 표기

현재색상(currentColor) 키워드

투명색상(transparent) 키워드

1

2

3

4

5

6

7

8

1. 확장된색상키워드

CSS2.1는 17가지의 기본 색상키워드를 허용했습니다.

CSS3는 130개의 추가된 컬러키워드를 허용합니다.

따라서 총 147개의 컬러 키워드를사용할 수 있습니다.

컬러 키워드 예시:

p { color: peru; }

p { color: salmon; }

p { color: thisle; }

p { color: firebrick; }

p { color: ghostwhite; }

p { color: goldenrod; }

p { color: honeydew; }

잠깐도움말:gray와 grey의 철자 때문에

고생한적이 있나요?CSS3 색상 키워드에는 그런 문제가

없도록 gray, grey, darkgrey, darkgray가 모두 있습니다.

브라우저

Firefox 3.6, 4

Safari 4, 5

Chrome 9, 10

Opera 10, 11

IE 6, 7, 8, 9

지원여부

Yes

Yes

Yes

Yes

Yes

2. 투명도(Opacity)

Opacity는요소의 투명도를지정 할 수 있게 합니다.

Opacity의 속성 값은완젂 투명인 0 (또는 0.0)부터

완젂 불투명인 1 (또는 1.0)까지지정 할 수 있습니다.

p { opacity: 0.3; }

opacity 값은 0 이나 소수 점(.)뒤로 붙는 하나 이상의숫자여야 합니다.

예시:

0.5.5

이 속성은 요소 뿐 아니라요소의모든 자식요소까지

영향을 미치니 주의 하세요.

브라우저

Firefox 3.6, 4

Safari 4, 5

Chrome 9, 10

Opera 10, 11

IE 6, 7, 8

IE 9

지원여부

Yes

Yes

Yes

Yes

No

Yes

3. RGBA 숫자형표기

CSS3에서 우리는 RGB값에알파채널 값을 추가할 수 있습니다.이는 우리가 색상을 특정한 투명도로

지정할 수 있게 합니다.

Opacity는 모든 요소의 투명도를지정하지만, RGBA는 색상 값의투명도만을 별도로 지정합니다.

RGBA 숫자형 표기는 'rgba(' 뒤에컴마로 분리된 3개의 숫자 값을 붙이고,

한 개의 투명도 값을 붙인 뒤 ‘)’ 로닫습니다.

p { color: rgba(100, 66, 255, 1); }

3가지 숫자 값은 반드시 0 (검정) 과255 (흰색) 사이의 값이어야 합니다.

숫자의 단위는 붙이지 않습니다.

예시:

2550

알파채널 값은 0 이나 소수 점(.)뒤로 붙는 하나 이상의숫자여야 합니다.

예시:

0.5.5

알파채널 값 1은 불투명한 색상을의미합니다. (단색으로 표시되는) 알파채널 값 0.5는 반투명입니다.

여러분은 항상 브라우저가 이 속성을지원하지 않을 것을 대비하여예비지정을 하는 것이 좋습니다.

p

{

color: rgb(100, 66, 255);

color: rgba(100, 66, 255, 0.5);

}

브라우저

Firefox 3.6, 4

Safari 4, 5

Chrome 9, 10

Opera 10, 11

IE 6, 7, 8

IE 9

지원여부

Yes

Yes

Yes

Yes

No

Yes

4. RGBA 퍼센트표기

RGBA 퍼센트 표기는 'rgba(' 뒤에컴마로 분리된 3개의 퍼센트 값을

붙이고, 한 개의 투명도 값을 붙인 뒤‘)’ 로 닫습니다.

p { color: rgba(10%, 6%, 20%, 1); }

3가지 퍼센트 값은반드시 0% (검정) 과 100% (흰색) 사이의 값이어야

합니다. 모든 값은 %기호를 포함하여사용합니다.

예시:

100%0%

투명도 값은 0 또는 소수 점(.) 뒤로붙는 하나 이상의숫자여야 합니다.

예시:

0.5.5

브라우저

Firefox 3.6, 4

Safari 4, 5

Chrome 9, 10

Opera 10, 11

IE 6, 7, 8

IE 9

지원여부

Yes

Yes

Yes

Yes

No

Yes

5. HSL 표기

HSL 표기는 색을색상(hue), 채도(saturation), 명도(lightness)의 값으로지정할수 있게 합니다.

HSL 표기는 다음과 같이 사용합니다:

p { color: hsl(280,100%,50%); }

첫 번째 속성 값은 색상(Hue) 이고반드시 0 과 359사이의

정수 값(integer)이어야 합니다.

p { color: hsl(280,100%,50%); }

두 번째 속성 값은채도(Saturation)이고반드시 퍼센트 값으로지정 되어야 합니다.

p { color: hsl(280,100%,50%); }

세 번째 속성 값은 명도(Lightness)이고역시 반드시 퍼센트 값으로

지정 되어야 합니다.

p { color: hsl(280,100%,50%); }

이 세 개의 HSL 값은반드시컴마로 분리되어야 합니다.

컴마 뒤의 여백은 옵션으로 허용됩니다.

p { color: hsl(280,100%,50%); }

여러분은 항상 브라우저가 HSL을지원하지 않을 것을 대비하여예비지정을 하는 것이 좋습니다.

p

{

color: rgb(85,0,128);

color: hsl(280,100%,50%);

}

브라우저

Firefox 3.6, 4

Safari 4, 5

Chrome 9, 10

Opera 10, 11

IE 6, 7, 8

IE 9

지원여부

Yes

Yes

Yes

Yes

No

Yes

6. HSLA 표기

RGBA와 같이 우리는알파채널값을 HSL에 더할 수 있습니다.이는 우리가 색상을 특정한 투명도로

지정할 수 있게 합니다.

먼저 HSL을 HSLA로 변경해야 합니다:

p { color: hsla(280,100%,50%); }

그 다음, 새 속성 값을 컴마로 나뉘어진세 개의 값 뒤에 붙입니다.

p { color: hsla(280,100%,50%,0.5); }

투명도 값은 0 또는 소수 점(.) 뒤로붙는 하나 이상의숫자여야 합니다.

예시:

0.5.5

여러분은 항상 브라우저가 HSL이나HSLA를 지원하지 않을 것을 대비하여예비지정을 하는 것이 좋습니다.

p

{

color: rgb(85,0,128);

color: hsla(280,100%,50%,0.5);

}

브라우저

Firefox 3.6, 4

Safari 4, 5

Chrome 9, 10

Opera 10, 11

IE 6, 7, 8

IE 9

지원여부

Yes

Yes

Yes

Yes

No

Yes

왜 HSL 또는 HSLA를사용하나요?

브라우저 입장에서 보면,RGBA 와 HSLA의값의지정은

차이가없습니다.

디자이너들 중 일부는 HSLA를사용하여 더쉽게 색을 선택, 조정할 수

있을 것 입니다.

7. 현재색상(currentColor)

키워드

CSS1과 CSS2는border-color의 초기 속성 값을

color 속성의 값을 따르도록 합니다.하지만, 그에 상응하는 키워드는

없습니다.

그래서 우리는border-color의 값을 color의 값으로의도적으로 지정할 방법이 없었습니다.

p

{

color: red;

border-width: 1px;

border-style: solid;

border-color: “the value of the

‘color’ property”;

}

CSS3는 이를 위해 현재색상을 지정하는currentColor라는 키워드를 제공합니다:

p

{

color: red;

border-width: 1px;

border-style: solid;

border-color: currentColor;

}

브라우저

Firefox 3.6, 4

Safari 4, 5

Chrome 8, 9, 10

Opera 11

IE 6, 7, 8

IE 9

지원여부

Yes

Yes

Yes

Yes

No

Yes

8. 투명색상(transparent)

키워드

CSS1는 투명색상인‘transparent’ 속성 값을

background-color 속성을 위해사용할 수 있도록 했습니다.

CSS2는 ‘transparent’ 속성 값을border-color 속성에

적용할 수 있도록 했습니다.

CSS3는색상 값을 필요로 하는어떤속성에서도

‘transparent’ 속성 값을사용 가능 하도록 했습니다.

p { color: transparent; }

브라우저

Firefox 3.6, 4

Safari 4, 5

Chrome 9, 10

Opera 10, 11

IE 6, 7, 8

IE 9

지원여부

Yes

Yes

Yes

Yes

No

Yes

작성자 : Russ WeakleyMax Design

Site: maxdesign.com.au

Twitter: twitter.com/russmaxdesign

Slideshare: slideshare.net/maxdesign

Linkedin: linkedin.com/in/russweakley

번역 : Toby YunSK communications

Site: tobyyun.com

Twitter: twitter.com/tobyyun

Slideshare: slideshare.net/headvoy