CSS 단위

px

폰트의 크기를 고정시키고 싶을 때

em
상위 태그의 font-size값을 1em으로 가진다.
em은 rem에 비해 상위태그에 의해 값이 결정되므로 관리하기가 까다롭다.
 
.wrap {font-size:16px; padding: 1em;} // padding: 16px; 
rem(root em)
html태그의  font-size값을 1rem으로 가진다.
 
html {font-size: 20px; }  // 1rem = 20px
vw(vertical width)
브라우저 너비(뷰포트(Viewport))값을 기준으로 100분의 1의 단위이다.
vh(vertical height)
브라우저 높이(뷰포트(Viewport)) 값을 기준으로 100분의 1의 단위이다.
vmin & vmax
vh, vw는 뷰포트의 너비값과 높이값에 상대적으로 영향을 받기 때문에 vmin, vmax의 너비값과 높이값에 따라 최소, 최대 값을 지정할수 있다.
 
브라우저 크기 : 
w  900px - 1vmin , h  1000px : 1vmin: 9px, 1max: 10px

.box { height: 100vmin; width: 100vmin; } // 터치화면 양 변에 가득차는 정사각형 요소를 만들때는 이렇게 정의하면 됩니다.
.box { height: 100vmax; width: 100vmax; } // 뷰포트 화면에 보여야 하는(모든 네 변이 스크린에 꽉 차 있는) 경우에는 같은 값을 vmax로 적용
ex

ex 단위의 정의 : 현재 폰트의 x-높이값 또는 em의 절반 값”

x-높이값은 소문자 x의 높이값

폰트의 중간 지점을 알아내기 위해 자주 사용하는 방법