CSS에는 여러 단위가 있습니다.
단위를 지정하는 수치와 단위 사이에는 공백이 올수 없습니다.
지정하는 값이 0인경우 단위를 생략할 수 있습니다.
단위는 음수를 지정할 수 있습니다.
CSS 크기 단위에는 절대크기단위와 상대크기단위로 구분됩니다.
| 단위 | 설명 |
|---|---|
| cm | Centimeters |
| mm | Millimeters |
| in | inches (1in = 96px = 2.54cm) |
| px | pixels |
| pt | points (1pt = 1/72in) |
| pc | picas (1pc = 12pt) |
픽셀(px)는 보기 장치와 관련이 있습니다.
낮은 dpi 장치의 경우 1px는 디스플레이 장치의 pixel(점) 입니다.
프린터 및 고해상도 장비의 경우 1px은 장치에 따라 여러 pixels(점들)을 의미합니다.
| 단위 | 설명 |
|---|---|
| em |
부모요소 크기에 대한 상대적 크기 W3C 권장 단위입니다. |
| rem | 루트요소 크기에 대한 상대적 크기 |
| vw, vh |
뷰포트의 너비, 높이에 대한 상대적 크기 뷰포트는 브라우저의 창크기입니다. 뷰포트의 너비가 50cm 이면 1vw = 0.5cm 입니다. |
| vmin | 1vmin = 1vh 또는 1vw 둘중 작은값 |
| vmax | 1vmax = 1vh 또는 1vw 둘중 큰값 |
| ex | 적용 글꼴의 소문자 x의 높이에 대한 상대적 크기 |
| % | 퍼센트 |
em, rem 단위는 확장가능한 레이아웃을 만드는데 실용적입니다.