CSS, 색상명 지정과 불투명도 ( color / rgb / opacity )

색상명 지정

약속된 고유한 색상명을 직접 지정.

VSCODE 에서는 지정후 , 마우스 포인터를 가져가면 rgb view 를 통해 직접 지정 가능.

 

---

rgb와 opacity

2가지 방법이 있다. 16진수 값 또는 함수형 표현.

 

1) 16진수 값의 지정.

 

접두사 # 뒤에 색상 3가지를 2자리씩 묶어 혼합하는 형태

형식 : #     ff     ff      ff     [ff]
            red  green  bule [ opacity ]

16 진수의 값이 클수록 빛의 세기가 증가 → 명도 증가

16 진수의 값이 작을수록 빛의 세기가 감소 → 명도 감소

#ffffff[ff] 흰색

#000000[00] 검은색

 

        ul:nth-of-type(2) li:first-child {
            background-color: #ff0000;
            /* background-color:#f00; 축약해서 표현이 가능 */
        }

        ul:nth-of-type(2) li:nth-child(2) {
            background-color: #0f0;
        }

        ul:nth-of-type(2) li:nth-child(3) {
            background-color: #00f;
            color: white;
        }

        ul:nth-of-type(2) li:nth-child(4) {
            background-color: #000;
            color: #fff;
            /* 글자색이 흰색이므로 글머리 기호도 표시되지 않음에 주의 */
        }

        ul:nth-of-type(2) li:last-child {
            background-color: #00f8;
        }

 

 

rgb 의 opacity 설정은 background-color 나 color 속성에 대한 개별적인 투명도를 지정하나,

별도의 opacity 속성으로 지정한 경우에는 배경이나 텍스트 모두 투명도가 적용된다.

 

2)함수형 rgb 값 지정

 

rgb 색상값을 1byte로 표현된 10진수 (0~255)로 3 개로 표현 .

형식 :  rgb (255  , 255  , 255  , 100% )  : 쉼표로 구분. (opacity : 0~100%)
                  red   green  blue   opacity
           rgb (255  255  255  1 )  : 띄어쓰기로 구분. (opacity : 0~1)
-opacity 의 표현이 다르니 주의할 것.

        ul:nth-of-type(3) li:first-child {
            color: rgb(255, 0, 0);
            /* color: rgb(255 0 0); */
        }

        ul:nth-of-type(3) li:nth-child(2) {
            color: rgb(0, 255, 0);
            /* color: rgb(0%, 100%, 0%); */
        }

        ul:nth-of-type(3) li:nth-child(3) {
            color: rgb(0, 0, 255);
        }

        ul:nth-of-type(3) li:last-child {
            color: rgb(255, 0, 0, 50%);
            /* color: rgb(255 0 0 / 50%); */