[CSS] 단위(px, em, rm, % 등)와 색상(rgb, hsl)

[ CSS 치수 단위 (Length Unit)]

• CSS에서 단위는 무조건 적기

단위	설명
%	부모 요소 기준 비율
in	inch (1 inch = 2.54cm)
cm	centimeter
mm	millimeter
em	현재 폰트 크기 기준 배수
ex	폰트의 x-height 기준 (보통 글자 크기의 절반)
pt	point (1pt = 1/72 inch)
pc	pica (1pc = 12pt)
px	pixel (화면의 한 점)

p {
  font-size:16px;
  margin:10px;
  width:50%;
}

 

[ CSS 색상 표현 방식 (Color) ]

방식	설명	예시
color name	색 이름 사용	color: red;
rgb(r,g,b)	RGB 값을 10진수로 표현	rgb(255,0,0)
rgb(r%,g%,b%)	RGB 값을 퍼센트로 표현	rgb(100%,0%,0%)
rgba(r,g,b,a)	RGB + 투명도(alpha)	rgba(255,0,0,0.5)
#rrggbb	16진수 6자리 색상	#ff0000
#rgb	16진수 3자리 색상	#f00
hsl(h,s,l)	색상, 채도, 밝기	hsl(0,100%,50%)
hsla(h,s,l,a)	HSL + 투명도	hsla(0,100%,50%,0.5)

• HSL 의미

요소	의미
H (Hue)	색상 (0 ~ 360)
S (Saturation)	채도 (0% ~ 100%)
L (Lightness)	밝기 (0% ~ 100%)
A (Alpha)	투명도 (0 ~ 1)