CSS 색상(Color)과 투명도(Transparent) 속성

🐈 Color

• 색상을 지정하는 역할 ➡ CSS의 색상값은 적색, 녹색, 청색 혼합의 결과
• 기본적으로 값이 상속된다

🐶 color 표기법

• color 색상 이름을 직접 입력하는 방식
• #RRGGBB 16진수를 이용한 HEX 표기법
• rgb(적색 ,녹색 ,청색) RGB 표기법 (+ RGBA 표기법)
• hsl(색조, 채도, 명도) HSL 표기법 (+ HSLA 표기법)

🐸 HEX 표기법

👉 주요 브라우저에서 모두 지원.
👉 16진수 색상은 #RRGGBB와 같은 형태로 RR(적색), GG(녹색), BB(청색)을 진수로 나타낸다.

/* red */ 
#p1 {
	background-color: #ff0000;   // RR만 값이 있다(적색)
} 
/* green */ 
#p2 {
	background-color: #00ff00;   // GG만 값이 있다(녹색)
} 
/* blue */
#p3 {
	background-color: #0000ff;   // BB만 값이 있다(청색)
} 

🐇 rgb 표기법

👉 주요 브라우저에서 모두 지원.
👉 RGB 색상은 rgb(적색, 녹색, 청색)의 형태로, 각 변수값(적색, 녹색, 청색) 의 색상의 강도를 정의하고, 0~255의 정수로 된 퍼센트 값(0%~255%)을 가지게 된다.

/* red */ 
#p1 {
	background-color: rgb(255, 0, 0);   // RR만 값이 있다(적색), 강도 최대(255)값
}
/* green */
#p2 {
	background-color: rgb(0, 255, 0);   // GG만 값이 있다(녹색), 강도 최대(255)값
}
/* blue */
#p3 {
	background-color: rgb(0, 0, 255);   // BB만 값이 있다(청색), 강도 최대(255)값
}

🐇 rgba 표기법

👉 IE9+, Firefox 3+, Opera 10+, Chrome, Safari에서 지원
👉 RGB의 색상 값에 투명도를 추가로 지정할 수 있게 한 것이며, 0.0(투명)~1(불투명) 사이의 값을 가지게 된다.

/* red */ 
#p1 {
	background-color: rgb(255, 0, 0, 0.3);   /* red with opacity */
}
/* green */
#p2 {
	background-color: rgb(0, 255, 0, 0.3);   /* green with opacity */
}
/* blue */
#p3 {
	background-color: rgb(0, 0, 255, 0.3);   /* blue with opacity */
}

❗ rgba(red, green, blue, Alpha)
red
빨강 강도 : 0 ~ 255 정수 (또는, 0% ~ 100% 백분율)

green
녹색 강도 : 0 ~ 255 정수 (또는, 0% ~ 100% 백분율)

blue
파랑 강도 : 0 ~ 255 정수 (또는, 0% ~ 100% 백분율)

alpha
불투명 정도: 0.0 (= 완전 투명) ~ 1.0 (= 완전 불투명)

🐢 HSL 표기법

👉 IE9+, Firefox, Opera 10+, Chrome, Safari에서 지원
👉 HSL 색상은 hsl(색조, 채도, 명도)의 형태로 색조, 채도 및 밝기를 원통형의 좌표를 이용해 나타낸다.

• 색조(0~360까지)
  적색 : -0 또는 360
  녹색 : 120
  청색 : 240

• 채도 (% 값을 가진다)
  0%는 회색의 음영을 갖는다

• 명도 (% 값을 가진다)
  0%는 검정, 100%는 하얀색이 된다

/* green */ 
#p1 {
	background-color: hsl(120, 100%, 50%);   
} 
/* light green */ 
#p2 {
	background-color: hsl(120, 100%, 75%);
} 
/* dark green */ 
#p3 {
	background-color: hsl(120, 100%, 25%);
} 
/* pastel green */
#p4 {
	background-color: hsl(120, 60%, 70%);
}