CSS 단위
CSS는 길이를 표현하기 위한 다양한 단위들이 있습니다.
CSS 단위
CSS는 길이를 표현하기 위한 다양한 단위들이 있습니다.
정의(Definition)
- 상대단위 (px, em, ex, %, rem, vw, vh, vmin, vmax) : 어떤 기준을 통해 상대적으로 변할 수 있는 단위이며, 다양한 매체에 쓰기 적절합니다.
- 절대단위 (in, cm, mm, pt, pc) : 정확한 기준에 의해 고정된 단위이며, 출력 매체에 쓰기 적절합니다.
CSS Size
| 속성값 | 설명 |
|---|---|
| px | 모니터의 1dot이 1pixel을 의미하며, pixel은 해상도에 따라서 상대적인 크기를 갖습니다. |
| em | 부모 요소의 대문자 너비를 기준으로 상대적인 값을 갖습니다. |
| ex | 부모 요소의 소문자 너비를 기준으로 상대적인 값을 갖습니다. |
| % | 부모 요소의 길이를 기준으로 상대적인 값(%)을 갖습니다. |
| rem | 루트(root em) 요소의 크기를 기준으로 상대적인 값을 갖습니다. |
| vw | 뷰포트(viewport) 브라우저 가로 크기를 기준으로 상대적인 값을 갖습니다. |
| vh | 뷰포트(viewport) 브라우저 세로 크기를 기준으로 상대적인 값을 갖습니다. |
| vh | 뷰포트(viewport) 브라우저 세로 크기를 기준으로 상대적인 값을 갖습니다. |
| vmin | 뷰포트(viewport) 브라우저 가로 크기 또는 세로 크기 중 작은 값을 기준으로 상대적인 값을 갖습니다. |
| vmax | 뷰포트(viewport) 브라우저 가로 크기 또는 세로 크기 중 큰 값을 기준으로 상대적인 값을 갖습니다. |
| in | in은 인치를 의미합니다. inch 단위로 계산(1in = 96px = 2.54cm) |
| cm | cm은 센치미터를 의미합니다. centimeter 단위로 계산(1cm = 10mm = 37.8px) |
| mm | mm는 밀리미터를 의미합니다. mm단위로 계산(1mm = 0.1cm = 3.78px) |
| pt | pt는 포인트를 의미합니다. point 단위로 계산(1pt = 1/72inch) |
| pc | .pc는 파이카를 의미합니다. pica단위로 계산(1pc = 12pt) |
CSS Comparative
| Point | Pixel | em | % |
|---|---|---|---|
| 6pt | 8px | 0.5em | 50% |
| 7pt | 9px | 0.55em | 55% |
| 7.5pt | 10px | 0.625em | 62.5% |
| 8pt | 11px | 0.7em | 70% |
| 9pt | 12px | 0.75em | 75% |
| 10pt | 13px | 0.8em | 80% |
| 10.5pt | 14px | 0.875em | 87.5% |
| 11pt | 15px | 0.95em | 95% |
| 12pt | 16px | 1em | 100% |
| 13pt | 17px | 1.05em | 105% |
| 13.5pt | 18px | 1.125em | 112.5% |
| 14pt | 19px | 1.2em | 120% |
| 14.5pt | 20px | 1.25em | 125% |
| 15pt | 21px | 1.3em | 130% |
| 16pt | 22px | 1.4em | 140% |
| 17pt | 23px | 1.45em | 145% |
| 18pt | 24px | 1.5em | 150% |
크기 단위 환산표
| 값 | 픽셀 | 포인트 | 파이카 | 인치 | 밀리미터 |
|---|---|---|---|---|---|
| 1pixel | 1px | 0.75pt | 0.063pc | 0.0104in | 0.265mm |
| 1point | 1.333px | 1pt | 0.083pc | 0.0138in | 0.353mm |
| 1pica | 16px | 12pt | 1pc | 0.1667in | 4.233mm |
| 1inch | 96px | 72pt | 6pc | 1in | 25.4mm |
| 1mm | 3.779px | 2.835pt | 4.233pc | 0.039in | 1mm |
호환성(Compatibility) 
더보기
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| px | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| em | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| ex | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| % | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| rem | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| vw | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| vh | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| vmin | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| vmax | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
| in | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| cm | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| mm | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| pt | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| pc | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
