CSS 색상

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 박스모델,이미지,색상 등 모든 속성에, 투명도(즉,알파값)을 직접 지정도 가능