📐 CSS 속성 값 길이 단위, 색상 설명!

CSS 속성 길이 단위

• px : 절대 크기
• % : 상대 크기, 현재 창의 크기를 기준
• em : 상대 크기, 현재 스타일이 지정된 요소의 font-size 기준
• rem (root em) : 상대 크기, 최상위 요소의 font-size 기준
• vh (vertical height) : 뷰포트 높이값의 100분의 1 단위
• vw (vertical wigth) : 뷰포트 넓이값의 100분의 1 단위
• vmin (vertical min) : 뷰포트의 최소값의 100분의 1 단위
• vmax (vertical max) : 뷰포트의 최대값의 100분의 1 단위

 

CSS 색상

HEX 코드

#RRGGBB

 

rgb값을 16진수 코드로

 

rgba 코드

rgb(255, 255, 255)

rgba(255, 255, 255, 0.5)

 

rgb값을 10진수(0~255) + 투명도(alpha) 0부터 1사이 값

 

hsla 코드

hsl(360, 100%, 100%)

hsla(360, 100%, 100%, 0.5)

 

색조(Hue) 0에서 360(0은 빨강, 120은 녹색, 240은 파랑) + 채도(Saturation), 밝기(Lightness)는 퍼센트

 

색상 이름 표기법

16가지 기본 색깔
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow