CSS는 인치, 센티미터, 포인트 등과 같은 절대 단위와 백분율 및 em 단위와 같은 상대 측정을 포함한 다양한 측정을 지원합니다. 스타일 규칙에서 다양한 측정을 지정할 때 이러한 값이 필요합니다.
다음은 CSS 측정 단위입니다.
| 단위 | 설명 | 예시 |
|---|---|---|
| % | 측정을 다른 값(일반적으로 둘러싸는 요소)에 대한 백분율로 정의합니다. | p {글꼴 크기:16pt; 줄 높이:125%;} |
| cm | 센티미터 단위로 측정값을 정의합니다. | div {margin-bottom:2cm;} |
| em | 전각 공간에서 글꼴 높이에 대한 상대적 측정. em 단위는 주어진 글꼴의 크기와 동일하기 때문에 글꼴을 12pt로 지정하면 각 "em" 단위는 12pt가 됩니다. 따라서 2em은 24pt가 됩니다. | p {문자 간격:7em;} |
| ex | 이 값은 글꼴의 x 높이를 기준으로 측정을 정의합니다. x 높이는 글꼴의 소문자 x 높이에 의해 결정됩니다. | p {글꼴 크기:24pt; 줄 높이:3ex;} |
| 안 | 인치 단위로 측정값을 정의합니다. | p {단어 간격:.15in;} |
| mm | 밀리미터 단위로 측정값을 정의합니다. | p {단어 간격:15mm;} |
| pc | 파이카 단위로 측정을 정의합니다. 파이카는 12포인트에 해당합니다. 따라서 인치당 6파이카가 있습니다. | p {글꼴 크기:20pc;} |
| pt | 포인트 단위로 측정을 정의합니다. 포인트는 1/72인치로 정의됩니다. | 본문 {글꼴 크기:18pt;} |
| 픽셀 | 화면 픽셀 단위로 측정값을 정의합니다. | p {패딩:25px;} |
| vh | 표시 영역 높이의 1%입니다. | h2 { 글꼴 크기:3.0vh; } |
| vw | 표시 영역 너비의 1% | h1 { 글꼴 크기:5.9vw; } |
| 최소값 | 1vw 또는 1vh 중 작은 값 | p { 글꼴 크기:2vmin;} |