CSS. Unit

CSS에서 사용하는 단위

1. 절대 단위(Absolute Length)
   • cm: 센티미터 단위
   • mm: 밀리미터 단위
   • in: 인치(1in = 96px = 2.54cm)
   • px: 픽셀(1px = 1/96th of 1in). 디스플레이마다 다르다.
   • pt: 포인트(1pt = 1/72th of 1in)
   • pc: 피카스(1pc = 12pt)
2. 상대 단위(Relative Length)
   • em: 요소의 글꼴 크기에 비례. 예) 2em은 현재 글꼴 크기의 2배.
   • ex: 현재 글꼴 x-높이값(소문자 x의 높이값)에 비례. 거의 사용되지 않음.
   • ch: 문자 “0”의 너비에 비례. 예) width: 40ch;는 40개의 문자열을 포함한다는 의미.
   • rem: root 요소의 글꼴 크기에 비례.
   • vw: viewport 너비의 1%에 기준.
   • vh: viewport 높이의 1%에 기준. 예) 100vh = 100% height.
   • vmin: viewport의 더 작은 치수 1% 기준. 예) width: 1100px, height: 700px일 때 1vmin 7px.
   • vmax: viewport의 더 큰 치수 1% 기준. 예) width: 1100px, height: 700px일 때 1vmax 11px.
   • %: 부모 요소에 비례.

*viewport = 브라우저 윈도우 사이즈. 예) viewport 50cm 너비이면, 1vw = 0.5cm.