Embed Size (px)
DESCRIPTION
Citation preview
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
