CSS:Units
CSS has several different units for expressing a length.
Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.
Absolute Lengths
The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.
Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.
| Unit | Description |
| cm | centimeters |
| mm | millimeters |
| in | inches (1in = 96px = 2.54cm) |
| px[^0] | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |
Relative Lengths
Relative length units specify a length relative to another length property. Relative length units scale better between different rendering medium.
| Unit | Description |
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) |
| ex | Relative to the x-height of the current font (rarely used) |
| ch | Relative to the width of the "0" (zero) |
| rem | Relative to font-size of the root element |
| vw | Relative to 1% of the width of the viewport[^1] |
| vh | Relative to 1% of the height of the viewport[^2] |
| vmin | Relative to 1% of viewport's[^3] smaller dimension |
| vmax | Relative to 1% of viewport's[^4] larger dimension |
| % | Relative to the parent element |
| Tip |
| The em and rem units are practical in creating perfectly scalable layout! |
새로운 CSS Viewport Unit : svh, lvh, dvh
- New Viewport Units - Ahmad Shadeed
- 뷰포트 너비/높이 기반으로 설정하는 것은 편하지만, vh 는 모바일에서 버그가 많음
- 뷰포트 사이즈가 브라우저의 주소바 UI를 포함하지 않기 때문
- 'svh' Small Viewport : 주소바 UI가 축소되지 않은 상태의 뷰포트 높이
- 'lvh' Large Viewport : 주소바 UI가 축소된 상태의 뷰포트 높이
- 'dvh' Dynamic Viewport : svh / lvh 사이에서 동적으로 변화
- 하지만 성능 문제가 있을수 있으니 조심해야함