CSS3 Colors

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

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

1 키워드
2 6자리 16진수 표기
3 3자리 16진수 표기
4 RGB 숫자형 표기
5 RGB 퍼센트 표기
6 시스템 컬러

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

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

p { color: #AE03FF; }

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 (흰색) 사이의 값을 허용합니다.
숫자의 단위는 붙이지 않습니다.

RGB 퍼센트 표기는
'rgb(‘ 뒤에 컴마로 분리된 3개의
퍼센트 값을 붙이고 ‘)’ 로 닫습니다.

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

RGB 퍼센트 표기는 0% (검정) 부터
10% (흰색) 사이의 값을 허용합니다.
모든 값은 %기호를 포함하여
사용합니다.

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

p { color: ButtonFace; }

주의:
시스템 컬러는 UI와 연결된
요소의 외형을 지정하는
CSS3 UI ‚appearance’ 속성의
지지로 반대 되어 왔습니다.

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

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

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 Yes
Safari 4, 5 Yes
Chrome 9, 10 Yes
Opera 10, 11 Yes
IE 6, 7, 8, 9 Yes

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

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

p { opacity: 0.3; }

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

예시:
0.5
.5

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

Firefox 3.6, 4 Yes
Safari 4, 5 Yes
Chrome 9, 10 Yes
Opera 10, 11 Yes
IE 6, 7, 8 No
IE 9 Yes

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

RGBA 퍼센트 표기는 'rgba(' 뒤에
컴마로 분리된 3개의 퍼센트 값을
붙이고, 한 개의 투명도 값을 붙인 뒤
‘)’ 로 닫습니다.

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

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

예시:
100%
0%

투명도 값은 0 또는 소수 점(.) 뒤로
붙는 하나 이상의

예시:
0.5
.5

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

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

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

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

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

p { color: hsla(280,100%,50%,0.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 Yes
Safari 4, 5 Yes
Chrome 8, 9, 10 Yes
Opera 11 Yes
IE 6, 7, 8 No
IE 9 Yes

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

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

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

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

p { color: transparent; }

작성자 : Russ Weakley
Max Design

Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin: linkedin.com/in/russweakley

번역 : Toby Yun
SK communications

Site: tobyyun.com
Twitter: twitter.com/tobyyun
Slideshare: slideshare.net/headvoy

CSS3 Colors

Recommended

Recommended

More Related Content

Featured

Featured (20)

CSS3 Colors