CSS - Units

절대 길이 단위

px : pixels, 픽셀(1px=1/96th of 1in)

 

 

상대 길이 단위

: 상위 요소의 글꼴 크기나 viewport의 크기와 연관

 

1. 글꼴 사이즈 기준

em : font-size

1em = 부모의 폰트 크기

 

rem (root em) : 최상위(root) 요소의 font-size

1rem = html의 폰트 크기

 

2. 뷰포트 기준

vh & vw = 뷰포트 높이/너비의 1%

예) 500px 너비의 뷰포트일때, 1vw = 5px 10vw = 50px

vmin & vmax : 뷰포트의 최소/최대값 1% 반응형에 최적화!

예) 1200px*600px 뷰포트 => 1vw = 12px, 1vh = 6px 이므로
       1vmin = 1vh = 6px, 1vmax = 1vw = 12px