kingsubin

크기 단위

px, em, rem, %

기본 폰트사이즈는 16px, 1em, 100%

 

px - 절대값

px은 화소 1개의 크기를 의미한다.

픽셀은 디바이스 해상도에 따라 상대적인 크기를 갖는다.

주로 요소의 크기나 이미지의 크기 지정에 사용된다.

 

em - 상대값

em은 배수 단위로 상대단위이다.

1em 요소에 지정된 사이즈와 같고 2em은 요소에 지정된 사이즈의 2배이다.

em의 기준은 상속의 영향으로 바뀔 수 있다.

 

rem (root em)

rem은 최상위 요소 (html)의 사이즈를 기준으로 삼는다. rem의 r은 root를 뜻한다.

 

Viewport 단위

vh, vw, vmin, vmax

 

반응형 웹디자인은 화면의 크기에 동적으로 대응하기 위해 %를 자주 사용하는데 

% 단위는 em과 같이 상속에 의해 부모 요소에 상대적 영향을 받는다.

 

viewport 단위는 상대적인단위로 viewport를 기준으로 한 상대적 사이즈를 의미한다. (스크롤을 포함한 스크린 크기)

vw (vertical width) - viewport 너비의 1/100

vh (vertical height) - viewport 높이의 1/100

vmin - viewport 너비 또는 높이 중 작은 쪽의 1/100

vmax - viewport 너비 또는 높이 중 큰 쪽의 1/100

 

 

색상표현 단위

htmlcolorcodes.com

HEX (Hexadecimal Colors) :: #000000
RGB (Red, Green, Blue) :: rgb(255, 255, 0)

RGBA (Red, Green, Blue, Alpha / 투명도) :: rgba(255, 255, 0, 1)

HSL (Hue/색상, Saturation/채도, Lightness/명도) :: hsl(0, 100%, 25%)

HSLA (Hue, Saturation, Ligthness, Alpha) :: hsla(60, 100%, 50%, 1)