2020. 12. 13. 19:43ㆍHTML & CSS
크기 단위
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
색상표현 단위
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)
'HTML & CSS' 카테고리의 다른 글
flex 정리 (0) | 2020.12.14 |
---|