반응형
색상 처리
RGB : rgb(red, green, blue) 함수
각 색상별로 0~255 사이의 수치로 조합
rgba(red, green, blue alpha) 함수
세가지 색상과 알파(투명도) 수치로 색상 표현
알파 채널의 값 범위 : 0.0 ~ 1.0
HEX : 16진수로 색상 지정
예) #ff00ff : purple
#abc -> #aabbcc의 단축 표현
HSL : Hue(색조), Saturation(채도), Lightness(밝기/명암)
H : 0~360까지의 색상환의 각도로 표현
S : 0~100%의 백분률 값. 0-회색음영, 100-색조의 색
L : 0~100%의 백분률 값. 0-검은색, 100-흰색
예) hsl(0, 100%, 50%) - red
colors.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>색상 표현</title>
<style type="text/css">
div {
width: 200px;
height: 50px;
border: 1px solid black;
}
#rhb {
background-color: rgb(243,166,98);
}
#hex {
background-color: #6bc;
}
#hsl {
background-color: hsl(0,100%,50%);
}
</style>
</head>
<body>
<div id="rhb">RGB로 색상 지정</div>
<div id="hex">HEX로 색상 지정</div>
<div id="hsl">HSL로 색상 지정</div>
</body>
</html>반응형
'Front-end > Css' 카테고리의 다른 글
| [CSS] 테투리(경계선) (0) | 2023.07.06 |
|---|---|
| [CSS] 배경 (0) | 2023.07.06 |
| CSS 가상 선택자4(::first-line, ::first-letter, ::before, ::after) (0) | 2023.05.16 |
| CSS 가상 선택자3(:disabled, :checked) (0) | 2023.05.16 |
| CSS 가상 선택자2(:first-child, :last-child, :nth-child(2n+1)) (0) | 2023.05.16 |
