1. CSS 색상 속성
ㅇ CSS 색상 관련 속성들 : color, background-color, border, box-shadow, text-shadow 등
- 例) { color : 색상값 }
2. CSS 색상값 표현 방식 구분
ㅇ 키워드 방식
- 색상 키워드 종류
. acua (바다물색), black (검정), blue (파랑), fuchsia, gray,
green, lime, lightgray, maroon, navy, olive, orange, purple, red, silver, teal, white,
yellow 등
. dimgray, darkgray 등
. 例) 백색 => { color : white; }
- 특정 키워드 종류
. transparent : 완전 투명(배경색이 그대로 보임), rgba(0,0,0,0)와 같음
. currentColor : 현재 색상 있으면 그 속성값, 아니면 가장 가까운 (부모) 요소의 색상 속성값
.. 例) 컨텐츠 및 보더 색상을 동일하게 줄 수 있음
ㅇ Hexa 값 방식 : (16 진수) 즉, #(연이은 hexa값 3개로 구성)
- #rrggbb (rr : 빨강, gg : 초록, bb : 파랑 : 0~255 사이 16 진수 값으로 00~ff)
- 例)
. 백색/흰색 => { color:#ffffff; }
. 흑색 => { color:#000000; }
. 빨강 => { color:#ff0000 }
. 녹색 => { color:#00ff00 }
. 파랑 => { color:#0000ff }
. 노랑 => { color:#ffff00 }
. 회색 => { color:#eeeeee }
. 하늘색(azure) => { color:#f0ffff; }
ㅇ rgb(red, green, blue) 방식 : (10 진수) 즉, (0~255 사이 10진수 3개로 구성)
- 값 표현은, `0~255 사이 10 진수` 또는 `0~100% 사이 백분율`로 2가지 방식이 가능
- 例)
. 백색 => rgb(255,255,255) 또는 rgb(100%,100%,100%) (Hexa 값 방식으로, #ffffff 와 동일)
. 흑색 => rgb(0,0,0) 또는 rgb(0%,0%,0%)
. 오렌지색 => rgb(255,128,0) 또는 rgb(100%,50%,0%)
ㅇ rgba(red, green, blue, alpha 투명도) 방식
- 끝에 alpha 투명도 지정
. 例) 투명도 : 0.0 이면 => 완전 투명, 0.5 이면, 반투명, 1.0 이면 => 완전 불투명
- 例) rgb(red,green,blue) = rgba(red,green,blue, 1)
ㅇ hsl(hue, saturation, lightness) 방식
- Hue (색조) : 0~360
. 색상환 내 각도로써 0~360 사이 값
. 例) 빨강 : 0, 초록 : 120, 파랑 240
- Saturation (포화도/채도) : 백분율(%)
. 例) 0% : 완전한 회색 음영으로 원래 색상 안보임, 100% : 회색 음영이 없는 순수한 색상
- Lightness (밝기/명암) : 백분율(%)
. 例) 0% : 검은색 (빛 없음), 100% : 흰색 (모든 파장의 빛 다 있음),
* 한편, 색조,채도를 0,0%으로 두고,
. 명암을 0~100% 사이에서 조정해 보면, 다양한 회색 음영들을 볼 수 있음
* 例)
. 흰색 => hsl(120,0,100) 또는 rgb(255,255,255) 또는 #ffffff
. 흑색 => hsl(120,100,0) 또는 rgb(0,0,0) 또는 #000000
. 빨강 => hsl(0,100,50) 또는 rgb(255,0,0) 또는 #ff0000
. 녹색 => hsl(120,100,50) 또는 rgb(0, 255, 0) 또는 #00ff00
. 파랑 => hsl(240,100,50) 또는 rgb(0, 0, 255) 또는 #0000ff
ㅇ hsla 방식
- 위 rgba 방식과 유사함
3. 불투명도 또는 투명도(알파값) : opacity, alpha
ㅇ alpha 값
- 0.0 (투명, 배경 깨끗이 보임) ~ 0.5 (반투명) ~ 1.0 (완전 불투명, 배경 안보임 : 디폴트)
- alpha 값 例) rgba(255, 200, 0, 0.4)
. r : 최대 255 세기, g : 200 세기, b : 0 세기(없음)
. a : 해당 빛 세기를 40% 줄여서, 불투명도를 40%로 떨어뜨림
.. 결국, 배경이 60% 투명하게 보이게 함
ㅇ opacity 속성 : { opacity: 값; }
- CSS 박스모델,이미지,색상 등 모든 속성에, 투명도(즉,알파값)을 직접 지정도 가능