hsla() 함수는 HSL(Hue-Saturation-Lightness, 색조-채도-명도) 색상 모델을 기반으로 색상을 정의하는 CSS 색상 함수입니다. 이름 그대로 hsl() 함수에 알파 값(alpha)이 추가된 형태로, 색상의 투명도까지 함께 지정할 수 있다는 점이 큰 장점입니다.
hsla() 함수의 구성 요소
hsla() 함수는 다음 네 가지 매개변수로 이루어집니다.
- 색조(Hue): 0~360 사이의 각도 값으로 색상환에서의 위치를 나타냅니다. 0은 빨강, 120은 초록, 240은 파랑에 해당합니다.
- 채도(Saturation): 0%~100% 사이의 백분율입니다. 0%는 무채색(회색톤), 100%는 가장 선명하고 순수한 색을 의미합니다.
- 명도(Lightness): 0%~100% 사이의 백분율입니다. 0%는 검정, 50%는 원래 색상, 100%는 흰색입니다.
- 알파(Alpha): 0(완전히 투명)부터 1(완전히 불투명) 사이의 소수 값으로 색상의 불투명도를 결정합니다.
hsla() 함수 사용 예제
아래 코드를 실행하면 hsl()과 hsla() 함수가 실제 화면에 어떻게 적용되는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color:hsl(0,100%,50%);
}
h2 {
background-color:hsl(192,89%,48%);
}
p {
background-color:hsla(290,100%,50%,0.3);
}
</style>
</head>
<body>
<h1>Red Background</h1>
<h2>Blue Background</h2>
<p>This is demo text!</p>
</body>
</html>실행 결과 설명
위 예제에서 첫 번째 제목(h1)에는 hsl(0,100%,50%)이 적용되어 선명한 빨간색 배경이 표시됩니다. 두 번째 제목(h2)에는 hsl(192,89%,48%)이 적용되어 청록에 가까운 파란색 배경이 나타납니다.
문단(p) 요소에는 hsla(290,100%,50%,0.3)이 적용되어, 알파 값이 0.3이므로 약 30% 불투명도의 보라색 배경이 반투명하게 렌더링됩니다. 이처럼 hsla() 함수를 활용하면 배경 위에 겹치는 요소나 오버레이 효과를 손쉽게 구현할 수 있습니다.