[CSS] 길이의 단위

CSS에서 사용되는 길이는 크게 절대 길이와 상대 길이로 나눌 수 있다.

절대 길이

절대 길이란 어디에서나 같은 크기로 표현되는 길이를 말한다. 세상의 화면은 크기가 모두 다르기 때문에 절대 길이를 화면에 보여주기는 부적합하지만, 화면의 크기가 고정되어 있다면(ex: A4용지) 절대 길이를 사용하는 게 편하다.

• ``cm``: 센티미터
• ``mm``: 밀리미터
• ``in``: 인치
• *``px``: 픽셀 (1px = $\frac{1}{96}$ in)
• ``pt``: 포인트 (1pt = $\frac{1}{72}$ in)
• ``pc``: 피카 (1pc = $\frac{1}{12}$ pt)

* ``px``는 화면의 크기에 따라 상대적이다. 예를 들어 저해상도 장치에서는 1``px``이 화면의 점(픽셀) 하나를 의미할 수 있다. 그러나 고해상도 장치에서는 1``px``이 픽셀 여러 개를 차지할 수 있다.

상대 길이

상대 길이는 다른 길이에 의해 상대적으로 정해지는 길이를 말한다. 화면에 크기에 맞는 디자인을 보여주기에 적합하다. 

• ``em``: 요소의 ``font-size``에 의해 결정된다. 예를 들어 2``em``은 현재 ``font-size``의 2배를 의미한다.
• ``ex``: 현재 적용된 글꼴의 $x$축 높이에 의해 결정된다. 잘 사용되지 않는다. 
• ``ch``: 글자 0의 너비에 의해 결정된다.
• ``rem``: 루트 요소의 ``font-size``에 의해 결정된다. ``em``과 유사하다.
• ``vw``, ``vh``: Viewport의 너비/높이에 의해 결정된다. 예를 들어 100``vh``는 viewport의 높이와 같다.
  • Viewport: 브라우저 화면의 크기를 의미한다.
• ``vmin``, ``vmax``: Viewport의 너비와 높이 중 더 작은/큰 값에 의해 결정된다.
• ``%``: 부모 요소의 너비에 의해 결정된다. 높이를 지정할 때 %를 써도 부모 요소의 높이가 아닌 너비에 의해 값이 정해진다.

``em``과 ``rem``을 사용하면 화면의 크기가 변해도 레이아웃의 상대적인 위치를 유지하기 쉽다.

참고문헌

CSS Units (w3schools.com)