![[2021/12/29]국비지원 CSS3 9-(2) rgb, rgba, hsl, hsla, opacity](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FOg8Do%2FbtrseQW7AAq%2FAAAAAAAAAAAAAAAAAAAAABJzGpN-d_qoAZakHJwE_6IMZTYHsIt9Z2EXFrW9SEgt%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3D%252FagljM9VBEnX3IAuEhVpS87RdKg%253D)
- rgb : red, green, blue로 판단하는, 흔히 아는 색상 코드
- 0 ~ 255 = 총 256색
- 255 = ff
- rgba : red, green, blue, alpha = 색상 코드 + 투명도
- alpha = 0.0 ~ 1.0
- hsl : hue, saturation, lightness ( 색조, 채도, 명도 )
70년대의 IT 개발자들에 의해 설계된 rgb 대체용 색상 코드로, 같이 개발된 것에 hsv라는 색상 코드도 있음- number, n%, n%
- number, n%, n%
- hsla : hue, saturation, lightness, alpha = hsl색상 코드 + 투명도
- opacity : 투명도 단독 property
- 0.0 ~ 1.0 ( 완전 투명 0.0 ~ 반투명 0.5 ~ 불투명 1.0 )
rgb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
ol{list-style: none;}
li{width:300px;height: 30px;}
.c1{background:rgb(255,0,0)}/* background:#ff0000 */
.c2{background:rgb(0,255,0)}
.c3{background:rgb(0,0,255)}
/* 0~255,256색,ff */
</style>
</head>
<body>
<ol>
<li class="c1"></li>
<li class="c2"></li>
<li class="c3"></li>
</ol>
</body>
</html>
결과물
rgba
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{width:300px;height:30px;padding: 20px;font-size: 30px;font-weight: bold;font-family: "Arial Black";text-align: center;}
.a1{background:rgba(255,0,0,1.0);color:rgba(0,0,0,0.2);}
.a2{background:rgba(255,0,0,0.8);color:rgba(0,0,0,0.4);}
.a3{background:rgba(255,0,0,0.6);color:rgba(0,0,0,0.6);}
.a4{background:rgba(255,0,0,0.4);color:rgba(0,0,0,0.8);}
.a5{background:rgba(255,0,0,0.2);color:rgba(0,0,0,1.0);}
</style>
</head>
<body>
<div class="a1">RGBA</div>
<div class="a2">RGBA</div>
<div class="a3">RGBA</div>
<div class="a4">RGBA</div>
<div class="a5">RGBA</div>
</body>
</html>
결과물
hsl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이런 것도 있음</title>
<style type="text/css">
div{width:300px;height: 30px;}
.c1{background:hsl(360,100%,75%)}
.c2{background:hsl(360,100%,50%)}
.c3{background:hsl(360,100%,25%)}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
결과물
hsla
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{width:300px;height:30px;padding: 20px;font-size: 30px;font-weight: bold;font-family: "Arial Black";text-align: center;}
.h1{background:hsla(166,35%,50%,0.2);}
.h2{background:hsla(166,35%,50%,0.4);}
.h3{background:hsla(166,35%,50%,0.6);}
.h4{background:hsla(166,35%,50%,0.8);}
.h5{background:hsla(166,35%,50%,1.0);}
</style>
</head>
<body>
<div class="h1"></div>
<div class="h2"></div>
<div class="h3"></div>
<div class="h4"></div>
<div class="h5"></div>
</body>
</html>
결과물
opacity
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{width:300px;height:130px;padding-top:20px;margin:20px 0;background:url(images/bg1.jpg) no-repeat 0 0;}
h1{background:#fff;color:#000;font-size: 60px;text-align: center;font-weight: bold;}
.opa2{opacity:0.5;}
/* opacity:불투명도/0~1. 배경과 글씨 동시 적용 */
.opa1{background:rgba(255,255,255,0.5);color:rgba(0,0,0,1.0);}
</style>
</head>
<body>
<div>
<h1 class="noopa">Opacity</h1>
</div>
<div>
<h1 class="opa1">Opacity</h1>
</div>
<div>
<h1 class="opa2">Opacity</h1>
</div>
</body>
</html>
결과물
