색상 튜토리얼
색상은 RED, GREEN 및 BLUE 조명을 결합하여 표시됩니다.
색상 이름
CSS를 사용하면 색상 이름을 사용하여 색상을 설정할 수 있습니다.
예시
| Color | Name |
|---|---|
| Red | |
| Yellow | |
| Cyan | |
| Blue | |
| Magenta |
CSS 색상 값
CSS를 사용하면 색상을 다양한 방식으로 지정할 수 있습니다.
- 색상 이름으로
- RGB 값으로
- 16진수 값으로
- HSL 값으로(CSS3)
- HWB 값으로(CSS4)
currentcolor키워드 로
RGB 색상
RGB 색상 값은 모든 브라우저에서 지원됩니다.
RGB 색상 값은 rgb( RED , GREEN , BLUE )로 지정됩니다.
각 매개변수는 색상의 강도를 0에서 255 사이의 정수로 정의합니다.
예를 들어, rgb(0,0,255)는 파란색 매개변수가 가장 높은 값(255)으로 설정되고 다른 매개변수는 0으로 설정되기 때문에 파란색으로 렌더링됩니다.
예시
| Color | RGB | Color |
|---|---|---|
| rgb(255,0,0) | Red | |
| rgb(0,255,0) | Green | |
| rgb(0,0,255) | Blue |
회색 음영은 3가지 광원 모두에 대해 동일한 값을 사용하여 정의되는 경우가 많습니다.
예시
| Color | RGB | Color |
|---|---|---|
| rgb(0,0,0) | Black | |
| rgb(128,128,128) | Gray | |
| rgb(255,255,255) | White |
16진수 색상
16진수 색상 값도 모든 브라우저에서 지원됩니다.
16진수 색상은 # RR GG BB 로 지정됩니다 .
RR(빨간색), GG(녹색) 및 BB(파란색)는 색상의 강도를 지정하는 00과 FF 사이의 16진수 정수입니다.
예를 들어 #0000FF는 파란색 구성 요소가 가장 높은 값(FF)으로 설정되고 다른 구성 요소가 00으로 설정되기 때문에 파란색으로 표시됩니다.
예시
| Color | HEX | RGB | Color |
|---|---|---|---|
| #FF0000 | rgb(255,0,0) | Red | |
| #00FF00 | rgb(0,255,0) | Green | |
| #0000FF | rgb(0,0,255) | Blue |
회색 음영은 3가지 광원 모두에 대해 동일한 값을 사용하여 정의되는 경우가 많습니다.
예시
| Color | HEX | RGB | Color |
|---|---|---|---|
| #000000 | rgb(0,0,0) | Black | |
| #808080 | rgb(128,128,128) | Gray | |
| #FFFFFF | rgb(255,255,255) | White |
대문자 또는 소문자?
대문자 또는 소문자를 사용하여 16진수 값을 지정할 수 있습니다.
소문자가 쓰기 쉽습니다. 대문자가 읽기 쉽습니다.
색상 이름
CSS는 140개의 표준 색상 이름을 지원합니다.
다음 장에서는 16진수 값이 포함된 색상 이름의 전체 알파벳순 목록을 찾을 수 있습니다.
| Color Name | Hex | Color |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 |
현재 색상 키워드
키워드는 요소 의 currentcolor색상 속성 값을 나타냅니다.
예시
<div> 요소의 텍스트 색상이 파란색이기 때문에 다음 <div> 요소의 테두리 색상은 파란색이 됩니다.
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}