CSS 색상

(2019-11-07)

color, rgb, rgba, alpha 투명도, 알파 값, 불투명도, 반투명, Opacity, opacity, Opaque

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; }

  ㅇ 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) 방식
     - 값 표현은, `0~255 사이 10 진수` 또는 `0~100% 사이 백분율`로 2가지 방식이 가능
     - 例) 
        . 백색 => rgb(255,255,255) 또는 rgb(100%,100%,100%)
        . 흑색 => 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 속성
     - CSS 박스모델,이미지,색상 등 모든 속성에 투명도(알파값)을 지정 가능


[CSS] 1. CSS 2. CSS 선택자 3. CSS 속성 4. CSS 속성값 5. CSS 박스 모델 6. block,inline 요소 유형 7. CSS 색상 8. CSS 배경 9. CSS 위치,레이아웃 10. CSS 정렬 11. CSS 텍스트 12. CSS 폰트 13. CSS 리스트 14. CSS @ 규칙 15. CSS 그림자 16. CSS 시간 변형 17. CSS 2차원 변형

 
        최근수정     요약목록     참고문헌