[func] CSS - hsla() 함수 - (색조, 채도, 밝기, 불투명도)로 색상 정의. (= hsla함수 = 에이치에스엘에이함수/흐슬라함수)

1. hsla() 예제 - (색조, 채도, 밝기, 불투명도)로 색상 정의
2. hsla() 정의
3. hsla() 구문

hsla() 예제 - (색조, 채도, 밝기, 불투명도)로 색상 정의 

 

<style>

p {padding:15px;}

p {background-color:hsla(0,100%,50%,0.3);}

</style>

<p>빨강+투명도가미</p>

결과값

hsla() 정의

 

HSLA (Hue-Saturation-Lightness-Alpha 모델) 사용해 원통형 좌표로 색상 정의

 

---

1.

• Hue : 색상
• Saturation : 채도
• Lightness : 명도
• Alpha : 불투명도

 

2.

hsl() 함수 - (색상/채도/밝기)로 색상코드 정의. ≒ hsla() 함수

 

3.

• CSS3
• IE 9 이상 주요 최신 브라우저 지원.

 

4. MDN hsl() 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl

 

hsla() 구문 

 

hsla(hue, saturation, lightness, alpha)

 

---

[매개변수]

hue

색상 (= 색조 = 색깔)

• 0 ~ 360  (숫자만 기재)
• 0 (= 360)은 빨간색, 120은 녹색, 240은 파란색

 

saturation

채도 (= 컬러 정도)

• 0 ~ 100 % (% 단위 필수 기재)
• 0%는 음영, 100%는 컬러 최대치

lightness

명도 (= 밝기)

• 0 ~ 100 %  (% 단위 필수 기재)
• 0 %는 검은색이고, 50 %는 보통이며 100 %는 흰색

 

alpha

불투명도

• 0.0 ~ 1.0  (숫자만 기재)
• 0.0은 완전 투명, 1.0은 완전 불투명