CSS 색상

(2019-02-26)

rgb, rgba, alpha 투명도

1. CSS 색상 속성CSS 색상 속성 표현 :  { color : 값 }


2. CSS 색상 표현 방식 구분

  ㅇ 키워드 방식 => 3.번항 참조

  ㅇ rgb(red, green, blue) 방식
     - 값 표현은, 0~255 사이 10 진수 또는 0~100% 사이 백분율로 2가지 방식이 가능
     - 例) 백색 => rgb(100%,100%,100%), 흑색 => rgb(0,0,0),
           오렌지색 => rgb(255,128,0) 또는 rgb(100%,50%,0%)

  ㅇ rgba(red, green, blue, alpha 투명도) 방식
     - alpha 투명도 例) 투명도 : 0.0 이면 => 반 투명, 1.0 이면 => 완전 불투명
     - 例) rgb(red,green,blue) = rgba(red,green,blue, 1)

  ㅇ hsl(hue, saturation, lightness) 방식
     - Hue (색조) : 0~360
        . 색상환각도로써 0~360 사이 값 
        . 例) 빨강 : 0, 초록 : 120, 파랑 240
     - Saturation (포화도/채도) : 백분율(%)
        . 例) 100% : 회색 음영이 없는 순수한 색상, 0% : 완전한 회색 음영으로 원래 색상 안보임
     - Lightness (밝기/명암) : 백분율(%)
        . 例) 100% : 흰색(모든 파장 다 있음), 0% : 검은색( 없음)
     * [참고] 색조,채도를 0으로 두고, 명암을 0~100% 사이에서 조정하면, 다양한 회색 음영 보임

  ㅇ Hexa 값 방식 (16 진수) 
     - #rrggbb (rr : 빨강, gg : 초록, bb : 파랑 : 0~255 사이 16 진수 값으로 00~ff)
     - 例) 백색 => {color:#ffffff;} 흑색 => {color:#000000;}, 빨간색 => {color:#ff0000},
           노란색 => {color:#ffff00}


3. 키워드(색상명) 방식

  ㅇ 例) 백색 => { color : white; }
  ㅇ 색상 키워드 종류
     - acua (바다물색), black (검정), blue (파랑), fuchsia, gray, green, lime, lightgray,
       maroon, navy, olive, orange, purple, red, silver, teal, white, yellow 등


4. 불투명도 : opacity

  ㅇ 값 : 0.0 (반 투명) ~ 1.0 (완전 불투명)


[CSS] 1. CSS 2. CSS 선택자 3. CSS 박스 모델 4. block,inline 요소 유형 5. CSS 속성 값 6. CSS 배경 7. CSS 색상 8. CSS 위치 레이아웃 9. CSS 정렬 10. CSS 텍스트

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