CSS3 Colors

COLORS In Korean

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

CSS2.1 색상

CSS2.1는 색상을6가지 타입의 속성값을 사용하여 정의 할 수 있습니다.

1 키워드2 6자리 16진수 표기3 3자리 16진수 표기4 RGB 숫자형 표기5 RGB 퍼센트 표기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가지 새로운 방식을사용하여 색상을 지정할 수 있습니다.

1 확장된 색상 키워드2 투명도(Opacity)3 RGBA 숫자형 표기4 RGBA 퍼센트 표기5 HSL 표기6 HSLA 표기7 현재색상(currentColor) 키워드8 투명색상(transparent) 키워드

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 YesSafari 4, 5 YesChrome 9, 10 YesOpera 10, 11 YesIE 6, 7, 8, 9 Yes

2. 투명도(Opacity)

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

Opacity의 속성 값은 완젂 투명인 0 (또는 0.0)부터 완젂 불투명인 1 (또는 1.0)까지 지정 할 수 있습니다.p { opacity: 0.3; }

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

이 속성은 요소 뿐 아니라요소의 모든 자식요소까지영향을 미치니 주의 하세요.

브라우저 지원여부Firefox 3.6, 4 YesSafari 4, 5 YesChrome 9, 10 YesOpera 10, 11 YesIE 6, 7, 8 NoIE 9 Yes

3. RGBA 숫자형 표기

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

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

RGBA 숫자형 표기는 rgba( 뒤에 컴마로 분리된 3개의 숫자 값을 붙이고, 한 개의 투명도 값을 붙인 뒤 ‘)’ 로 닫습니다.p { color: rgba(100, 66, 255, 1); }

3가지 숫자 값은 반드시 0 (검정) 과255 (흰색) 사이의 값이어야 합니다. 숫자의 단위는 붙이지 않습니다. 예시: 255 0

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

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

여러분은 항상 브라우저가 이 속성을 지원하지 않을 것을 대비하여 예비 지정을 하는 것이 좋습니다.p{ color: rgb(100, 66, 255); color: rgba(100, 66, 255, 0.5);}

4. RGBA 퍼센트 표기

RGBA 퍼센트 표기는 rgba( 뒤에 컴마로 분리된 3개의 퍼센트 값을 붙이고, 한 개의 투명도 값을 붙인 뒤 ‘)’ 로 닫습니다.p { color: rgba(10%, 6%, 20%, 1); }

3가지 퍼센트 값은 반드시 0% (검정) 과 100% (흰색) 사이의 값이어야합니다. 모든 값은 %기호를 포함하여 사용합니다. 예시: 100% 0%

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

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

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

왜 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 YesSafari 4, 5 YesChrome 8, 9, 10 YesOpera 11 YesIE 6, 7, 8 NoIE 9 Yes

8. 투명색상(transparent) 키워드

CSS1는 투명색상인 ‘transparent’ 속성 값을background-color 속성을 위해 사용할 수 있도록 했습니다.

CSS2는 ‘transparent’ 속성 값을 border-color 속성에 적용할 수 있도록 했습니다.

CSS3는 색상 값을 필요로 하는 어떤 속성에서도 ‘transparent’ 속성 값을 사용 가능 하도록 했습니다.p { color: transparent; }

작성자 : Russ WeakleyMax DesignSite: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley번역 : Toby YunSK communicationsSite: tobyyun.comTwitter: twitter.com/tobyyunSlideshare: slideshare.net/headvoy

http://tobyyun.com	200
http://webdevmobile.com	92
http://www.webdevmobile.com	47
http://kmoonki.tistory.com	16
http://www.hanrss.com	9
http://cadforum.kr	7
url_unknown	6
http://honyaku.yahoofs.jp	1

CSS3 Colors

by Toby Yun on Jun 06, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 378

Statistics

CSS3 Colors — Presentation Transcript