CSS는 너비(width), 마진(margin), 패딩(padding), 글꼴 크기(font-size), 테두리 두께(border-width) 등 다양한 속성에 대해 여러 종류의 길이 단위를 제공합니다. 길이 값은 항상 숫자 뒤에 px, em, rem과 같은 단위를 붙여 표현하며, 숫자와 단위 사이에는 공백을 넣을 수 없습니다.
예를 들어 font-size: 16px;는 올바른 표기이지만, 16 px처럼 숫자와 단위 사이에 공백이 있으면 유효하지 않은 값으로 처리되므로 주의해야 합니다.
CSS의 길이 단위는 크게 다음 두 가지로 나뉩니다.
- 절대 단위(Absolute Units)
- 상대 단위(Relative Units)
절대 단위(Absolute Units)
절대 단위는 화면 크기나 다른 요소의 영향을 받지 않고 항상 고정된 물리적 크기를 나타냅니다. 인쇄 문서처럼 정확한 크기가 필요한 경우에 유용하지만, 해상도가 제각각인 다양한 기기 환경의 웹에서는 상대 단위보다 활용도가 떨어지는 편입니다.
| 단위 | 약어 | 설명 |
|---|---|---|
| 픽셀(Pixels) | px | 화면을 구성하는 가장 작은 표시 단위 |
| 포인트(Points) | pt | 인쇄에서 주로 사용되며, 1pt = 1/72인치 |
| 인치(Inches) | in | 1in = 96px = 72pt |
| 센티미터(Centimeters) | cm | 1cm ≈ 37.8px |
| 피카(Picas) | pc | 1pc = 12pt |
상대 단위(Relative Units)
상대 단위는 부모 요소, 루트(root) 요소, 뷰포트(viewport) 등 다른 기준값에 따라 크기가 결정됩니다. 절대 단위와 달리 고정된 크기가 아니라 기준이 되는 값에 비례하여 계산되므로, 반응형 웹 디자인에서 필수적으로 사용됩니다. 사용자의 글꼴 크기 설정이나 기기 화면 크기 변화에도 유연하게 대응할 수 있다는 장점이 있습니다.
| 단위 | 약어 | 설명 |
|---|---|---|
| 백분율(Percent) | % | 부모 요소 크기를 기준으로 한 비율 |
| Em | em | 해당 요소의 글꼴 크기를 기준으로 함 |
| Ex | ex | 소문자 'x'의 높이를 기준으로 함 |
| 루트 em(Root em) | rem | 루트(html) 요소의 글꼴 크기를 기준으로 함 |
| 뷰포트 너비(Viewport Width) | vw | 뷰포트 전체 너비의 1%에 해당 |
| 뷰포트 높이(Viewport Height) | vh | 뷰포트 전체 높이의 1%에 해당 |
| 뷰포트 최소값(Viewport Minimum) | vmin | 뷰포트 너비와 높이 중 작은 값의 1%에 해당 |
| 문자(Character) | ch | 숫자 '0'의 너비를 기준으로 함 |
| 그리드(Grid) | gd | 그리드 기반 단위로, 대부분의 브라우저에서 지원되지 않음 |
단위 선택 시 참고 사항
일반적으로 글꼴 크기에는 rem 또는 em, 레이아웃의 너비와 높이에는 %, vw, vh를 사용하는 것이 권장됩니다. 절대 단위인 px는 테두리 두께나 세밀한 조정이 필요한 경우에 적합합니다. 프로젝트의 성격과 대상 기기에 맞춰 절대 단위와 상대 단위를 적절히 조합하면 접근성과 유지보수성이 모두 뛰어난 스타일시트를 작성할 수 있습니다.