w3schools의 CSS Units에는 다음과 같이 CSS에서 사용하는 단위에 대해 안내되어 있다.
CSS는 단위(길이)를 표현하기 위한 여러가지 단위가 있다. width, margin, padding, font-size, border-width 등과 같은 많은 CSS 속성에서 사용한다. 단위는 10px, 2em과 같이 숫자 뒤에 공백없이 붙여서 사용하며 0인 경우는 생략할 수 있다. 단위는 음의 수를 가질 수 있으며 상대/절대 단위로 구분할 수 있다.
Browser Support
| Unit | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 9.0* | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | Not supported | 19.0 | Not supported | 20.0 |
Note: 인터넷 익스플로러 9에서는 vmin을 비표준 이름인 vm으로 지원한다.
상대 단위
상대 단위는 다른 단위 속성에 대한 상대적 길이를 지정한다. 상대 단위를 잘 사용하면 다양한 디바이스에 최적화된 보기를 제공할 수 있기 때문에 권장되는 단위이다. 하지만 일반적으로 고정된 사이즈 내에서 디자인하는 것에 익숙한 경우에는 사용이 다소 까다롭다(상대적 단위를 쓸 때 가장 중요한 것은 어느 것에 대한 상대적 사이즈인지를 생각해야 하기 때문이다. 단순해 보이지만 작업을 하다보면 조금 복잡한 상황이 생기기도 한다).
| Unit | Description |
|---|---|
| em | 해당 Element의 font-size에 대한 비율(2em은 font-size의 2배 사이즈) |
| ex | 현재 글꼴의 x(소문자) 높이에 대한 비율 |
| ch | "0"의 width에 대한 비율 |
| rem | Root Element(html)의 font-size에 대한 비율 |
| vw | Viewport width의 1%에 대한 비율 |
| vh | Viewport height의 1%에 대한 비율 |
| vmin | Viewport smaller dimension의 1%에 대한 비율 |
| vmax | Viewport larger dimension의 1%에 대한 비율 |
| % |
Tip: em과 rem 단위는 확장 레이아웃을 만는데 아주 실용적(효과적)이다.
절대 단위
절대 단위는 고정되어 있으며 지정된 단위로 정확히 표현된다. "웹 화면의 크기는 아주 다양하기 때문에 화면에서는 사용하지 않는 것이 좋다. 그러나 프린트 레이아웃과 같이 출력 화면을 알고 있는 경우에는 사용될 수 있다."라고는 하지만 일반적인 경우엔 상대 단위보다 더 많이 사용하게 된다.
| Unit | Description |
|---|---|
| cm | 센티미터 |
| mm | 밀리미터 |
| in | 인치 (1in = 96px = 2.54cm) |
| px * | 픽셀 (1px = 1/96th of 1in) |
| pt | 포인트 (1pt = 1/72 of 1in) |
| pc | 피카 (1pc = 12 pt) |
Pixels(px)는 보여지는 기기에 따라 상대적이다. 예를들어 low-dpi 기기에서는 1px은 화면의 1 device pixel(dot)이다. 프린터 또는 고행상도 기기에서는 1px이 화면의 여러 pixel과 동일하다.
사용 제안
위에서 절대 단위를 더 많이 사용한다는 언급을 했던 것과 마찬가지로 대부분의 경우에 고정 단위를 많이 사용한다. 하지만 최근의 트랜드를 감안하면 상대 단위를 적극적으로 사용할 필요가 있다. 최근 유행하는 용어들인 멀티 디바이스, 적응형 웹, 반응형 웹, 미디어 쿼리 등에 상대 단위가 더 잘 부합된다. 사실 정확히 이야기하자면 선정된 환경(예측되는 한경)만 감안한다면 절대 단위만으로 원하는 결과를 대부분 얻을 수 있다. 하지만 지금처럼 다양한 환경(미리 환경을 예측할 수 없을 만큼)에 최선의 결과를 얻고 싶다면 기존 설계의 습관을 버리고 상대 단위를 기반으로한 디자인 설계를 적극 도입하자.