CSS 단위
CSS 단위
절대 크기 단위
| 단위 | 이름 | 값 |
|---|---|---|
| px | 픽셀(Pixels) | 1px = 1/96th of 1in |
| in | 인치(Inches) | 1in = 2.54cm = 96px |
| cm | 센티미터(Centimeters) | 1cm = 37.8px = 25.2/64in |
| mm | 밀리미터(Millimeters) | 1mm = 1/10th of 1cm |
1px
1in
1cm
1mm
<div style="font-size: 1px;">1px</div>
<div style="font-size: 1in;">1in</div>
<div style="font-size: 1cm;">1cm</div>
<div style="font-size: 1mm;">1mm</div>
상대 크기 단위
| 단위 | 설명 |
|---|---|
| % | 부모 태그와 같은 크기가 100%입니다. |
| em | 상위 태그와 같은 크기가 1em입니다. |
| rem | 최상위 태그와 같은 크기가 1rem입니다. |
| ex | 'x'의 높이값이 1ex입니다. (1ex = 1/2em) |
| ch | "0"의 너비값이 1ch입니다. |
| vw | 브라우져 화면 너비에 1/100이 1vw입니다. |
| vh | 브라우져 화면 높이에 1/100이 1vh입니다. |
| vmin | 브라우져 화면의 너비or높이 최소 값입니다. |
| vmax | 브라우져 화면의 너비or높이 최대 값입니다. |
부모태그
100%
50%
1em
2em
<div style="font-size: 30px;">
부모태그
<div style="font-size: 100%;">100%</div>
<div style="font-size: 50%;">50%</div>
<div style="font-size: 1em;">1em</div>
<div style="font-size: 2em;">2em</div>
</div>