CSS 참조가이드

CSS @규칙(RULES)

CSS 속성大全

CSS hsla() 함수

온라인 예제

HSL 색상 정의 및 투명도 설정:

예제

<!DOCTYPE　html>
<title>기본 가이드(oldtoolbag.com)</title>　
<style>
body　{
　　　　background:　url('/run/images/bg2.png')　beige;
　　　　color:　hsla(0,　0%,　0%,　1);
　　　　font-size:　2em;
　}
article　{　
　　　　background-color:　hsla(30,　100%,　50%,　0.5);
　　　　border:　5px　solid　darkorange;
　　　　margin:　20px;
　　　　text-align:　center;
　　　　}
</style>
</head>
<body>
<article>
<h1>Stars</h1>
</article>
</body>
</html>

테스트해 보세요 ‹/›

정의 및 사용법

hsla() 함수는 색상을 정의하기 위해 색상, 채도, 밝기, 투명도를 사용합니다.

HSL은 색상, 채도, 밝기, 투명도(영어: Hue, Saturation, Lightness, Alpha)를 의미합니다.

색상(H)는 색의 기본 속성으로, 일반적으로 말하는 색 이름, 예를 들어 빨간색, 노란색 등입니다.
채도(S)는 색의 순도를 의미하며, 순도가 높을수록 색이 순하고, 낮으면 점점 회색으로 변합니다. 0을 선택-100%의 값
밝기(L) 0을 선택-100%을 선택하면 밝기를 증가시키면 색상이 흰색으로 변하고, 밝기를 줄이면 색상이 검은색으로 변합니다.
투명도(A) 0~ 값1 사이에서 투명도를 나타냅니다.

지원 버전: CSS3

브라우저 호환성

표의 숫자는 이 함수를 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다.

함수
hsla()	1.0	9.0	1.0	3.1	9.5

CSS 문법

hsla(hue,　saturation,　lightness,　alpha)

값	설명
hue - 색상	색상을 정의하면 (0에서 36) - 0(또는 36)은 빨간색 120은 녹색 240은 파란색
saturation - 채도	채도를 정의하면; 0%은 회색 100%은 모든 색상
lightness - 밝기	밝기 0%은 어둡게 정의 50%은 일반 100%은 흰색
alpha - 투명도	투명도 0(완전 투명)에서 ~ 정의 1(완전 불투명)

Alpha 변화

이하의 예제는 같은 색상이 배경 이미지에서 여러 번 반복되는 경우입니다(하지만 각 색상에 다른 alpha 값이 있습니다).

그 외의 모든 값은 동일합니다(즉, 모든 행의 톤, 채도, 밝기는 동일하며, alpha 채널만 변경됩니다).

이는 alpha 값이 증가함에 따라 배경 이미지가 점점 더 보이지 않게 되는 것을 의미합니다(별은 배경 이미지입니다).

파란색

`hsla(240, 100%, 50%, 0)`
`hsla(240, 100%, 50%, 0.1)`
`hsla(240, 100%, 50%, 0.2)`
`hsla(240, 100%, 50%, 0.3)`
`hsla(240, 100%, 50%, 0.4)`
`hsla(240, 100%, 50%, 0.5)`
`hsla(240, 100%, 50%, 0.6)`
`hsla(240, 100%, 50%, 0.7)`
`hsla(240, 100%, 50%, 0.8)`
`hsla(240, 100%, 50%, 0.9)`
`hsla(240, 100%, 50%, 1)`

HSL 설정

RGB 모델에 비해 HSL 색상 모델은 색상 설정에 더 직관적입니다. 특히 HSL의 작동 원리를 알고 있다면 더욱 그렇습니다.

이에 대해 썼던 글 hsl() 함수의 내용은 다음과 같습니다. 이 함수는 다음을 설명합니다 hsla()의 기능은 여기에 적은 것보다 자세합니다. 기본 색상을 설정하고 조정하는 방법을 모르신다면 확인해 보세요.

CSS 함수

CSS @charset 규칙 CSS 함수(Functions)