반응형
CSS 색상 단위
- 색상 이름
- 영문 표기
- black, red, blue, gray, green...
- RGB
- RED, GREEN, BLUE 세가지 색상의 조합(빛의 삼원색)으로 표현하는 방식
- R, G, B에 해당하는 각 값을 0
255 또는 0%100%로 표현 - RGB(R, G, B) 로 표현한다.
- rgb(100%, 0%, 100%) -> 마젠타
- RGBA
- RGB + Alpha 의 약자이며 투명도(Transparent)가 추가 된 것.
- 투명도를 0.0(투명) ~ 1.0(불투명) 의 수치로 표현한다.
- rgb(0, 255, 255, 0.5) -> 반투명 Cyan(옥색, 청록색)
- rgb(r, g, b, a) / rgba(r, g, b, a) 둘 다 상관없이 값만 넣어준다면 알맞게 적용된다.
- 16진수 표현법, Hexadecimal
- RGB에 해당하는 각 수치를 16진수로 붙여서 한번에 표현한 것
- #RRGGBB 형식으로 표현한다.
- #RGB 형식으로 축약해서 표현 가능하다
- 같은 숫자 두개를 한 개로 줄여서 표현할 수 있다
- RR-> R, GG -> G, BB -> B
- EX) RGB(255, 255, 0) == #FFFF00 == #FF0 == YELLOW
- HSL
- Hue, Satulation, Lightness
- 색조, 채도, 명도
- 색조, Hue : 0 - 360, 색 각도
- 0 또는 360 : RED
- 120 : GREEN
- 240 : BLUE
- 채도. Satulation : 0% - 100%
- 0% : 무채색, 회색 빛
- 100% : 유채색, 본연의 빛
- 명도, Lightness : 0% - 100%
- 0% : 어두움, Black
- 100% : 밝은, White
- 약 50%가 적당한 명도
- HSLA
- 영문 표기
웹 안전 색상, Web Safe Color
- RGB 기준으로 표현 가능한 색상의 조합은 16,777,216 가지이다.
- Red가 표현 할 수 있는 색상의 범위는 0~255, 총 256가지인데 Green, Blue 모두 똑같이 256가지이다. 따라서 RGB로 조합 가능한 표현 수는 256 * 256 * 256 = 16,777,216
- RGB 표현의 모든 색상을 웹에서 나타내기에는 현실적으로 어렵다.
- 색상을 간소화하여 웹 표준 안전 색상을 정한 것이다.
- 운영체제, 브라우저, 장치 등에 구애받지 않고 표현 가능한 색상들을 정한 것
- 0 ~ 255 를 00, 33, 66, 99, cc, ff 만 사용한다.
- 256가지 표현을 0, 3, 6, 9, c, f 로 줄여서 사용 가능하다.
- 6 * 6 * 6 = 216가지 색상이 된다.
- ex) #ccc, #f36, #369
반응형
'FrontEnd > CSS' 카테고리의 다른 글
[CSS] CSS의 크기 단위 (0) | 2020.09.29 |
---|---|
[CSS] CSS, Cascading Style Sheets (0) | 2020.09.29 |
[CSS] CSS 에서 매우 중요한 id 와 class 속성 (0) | 2020.08.08 |
[CSS] CSS 레이아웃 (0) | 2020.08.08 |
[CSS] HTML에 CSS를 적용하기 (0) | 2020.08.07 |