CSS의 길이단위 rem, em, px, pt, %, vw, vh, vmin, vmax

CSS에서 잘알려진 단위로는 px, pt, em 정도일 것입니다. 간혹 rem도 사용하고 있지만 이번에 소개할 단위는 다소 생소할수 있지만 많은 실무자들은 알고 있고 사용도 하고 있는 부분입니다.

저 같이 웹초보자들이 다소 실수 할 수도 있는 단위를 정리해 볼려고 합니다. 저 또한 이 글을 적으면서 많은 단위가 있다는 것을 알게 되었습니다.

CSS길이 The Lengths of CSS

# 절대 단위 (pt, px)

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)
1in = 96px | 1cm = 37.8px | 1mm = 3.78px | 1pt = 1/72in |1pc = 12pt

px

절대 단위의 단위 중에 많이들 사용하는 단위로는 'px'로 해상도와 밀접합니다. 해상도가 높다면 작게 보이고, 낮다면 크게 보입니다. 따라서 물리적인 관점에서 본다면 다를수 있습니다.

pt

포인트(pt)는 고정 크기 단위이며 크기를 조정할 수 없다는 점에서 픽셀(px)과 매우 유사하지만 그 값은 실제 잉크 용지 인쇄술에 사용되는 측정 단위(글꼴의 높이)입니다. 72pts = 1 인치, 1 인치 = 규칙에 따라 실제 인치. 화면에 1 인치가 아닌 해상도에 따라 완전히 임의적으로 보여집니다. 크로스 브라우저 결과가 매우 다를 수 있으므로 웹 페이지에서 포인트(pt)를 사용 하지 않는 것이 좋습니다.
<잠조> : px – em – % – pt – keyword

<나머진 위 표 참조>

# 상대 단위 (em, rem, %)

em

em은 상대적인 단위로, 부모요소의 폰트 사이즈에 대한 상대값을 나타냅니다. 부모요소의 폰트 크기가 정해져 있지 않다면 1em = 16px입니다.

body {
  font-size: 14px;
}
div {
  font-size: 1.2em; /* 14px * 1.2 = 16.8px */
  padding: 2em;     /* 14px * 1.2 (16.8px) * 2 = 33.6px */
  width : 30em;     /* 14px * 1.2 * 30 = 504px */
  /* 실제 적용 크기는 약간 다를수 있음. 503.984px 정도 */
}

만약 부모요소의 폰트 크기가 14px이라면 1em = 14px, 1.2em = (14 * 1.2)px 입니다. 즉 16.8px이죠.
padding : 2em은 <p> 요소 내의 폰트 사이즈를 기준으로 계산되어 14 * 1.2 * 2 = 33.6px입니다. 이 기준으로 width : 30em은 14 * 1.2 * 30 = 504px 입니다.

rem

rem(root em)은 em과 같은 성질을 가지지만 부모요소가 기준이 아니라 항상 루트(최상위 root, html)를 기준으로 합니다 . 기본 16px.

사용 예1) html 사이즈 변경시 적용

html {
  font-size: 14px;    /* font-size 미지정 시에는 16px */
}
div {
  font-size: 1.2rem;  /* html font-size: 14px * 1.2 = 16.8px */
}

사용 예2) body 사이즈 변경시 적용

body {
  font-size: 18px;
}
.div1 {
  font-size: 1.2em; /* 18px * 1.2 = 21.6px */
}
.div2 {
  font-size: 1.2rem; /* 16px * 1.2 = 19.2px */
}
.div3 {
  font-size: 1.2em; /* 21.6px * 1.2 = 25.92px */
}

만약 루트(root)의 글자 크기를 변경하고 싶다면 ':root' 선택자를 활용해야 합니다.

rem은 폰트에서만 사용하진 않습니다.
예를 들어, 그리드 시스템이나 rem을 이용한 기본 폰트 사이즈 기반으로 만든 UI 스타일, 그리고 em을 이용해 특정 위치에 특별한 사이즈를 지정할 수도 있습니다.

.container { width: 70rem; /* 70 * 14px = 980px */ }

%

%(백분율) 단위는 부모 요소를 기준으로 비율을 표현됩니다

body {
  font-size: 14px;
}
div {
  font-size: 120%; /* 14px * 1.2 = 16.8px */
  padding: 2em;    /* 16.8px * 2 = 33.6px */
}

# Viewport 단위 (vh, vw, vmin, vmax)

Viewport 란 전체 웹페이지 가운데 브라우저 창에 보이는 영역을 말한다.
창 크기를 조절해서 뷰포트를 크거나 작게 만들 수 있다.

vh

vh(viewport height) 이 단위는 뷰포트 높이값의 100분의 1을 의미하는 값입니다. (전체 높이: 1200px 이라면 1vh 는 1/100이니까 12px )
그러니까 height: 100vh; 라고 하면 화면에 가득차게 되는것입니다.

---

vw

vw(viewport width)는 vh 와 마찬가지로 뷰포트 너비값의 100분의 1을 의미하는 값입니다. (전체 너비:960px --> 1vh = 9.6px)

.slide {
    height: 100vh;
}

---

vmin, vmax

vmin (viewport minimum)은 웹브라우저 너비와 높이 중에 더 작은 값을 기준으로 하여 100분의 1 한 값입니다.
vmax (viewport maximum)는 웹브라우저 너비와 높이 중에 더 큰 값을 기준으로 하여 100분의 1한 값입니다.

예를 들면 브라우저의 크기가 1100px 너비, 그리고 700px 높이일때 1vmin은 7px이 되고 1vmax는 11px이 됩니다.
너비값이 다시 800px이 되고 높이값이 1080px이 되면 vmin은 8px이 되고 vmax는 10.8px이 됩니다.

.box-min { height: 100vmin; width: 100vmin; }
.box-max { height: 100vmax; width: 100vmax; }

요약하자면

• VW(Viewport Width) : 뷰포트 너비의 1% 길이와 동일합니다.
• VH(Viewport Height) : 뷰포트 높이의 1% 길이와 동일합니다.
• VMIN(Viewport Minimum) : 뷰포트 너비 또는 높이를 기준으로 하는 최소 값입니다.
• VMAX(Viewport Maximum) : 뷰포트 너비 또는 높이를 기준으로 하는 최대 값입니다.

아쉽게도 IE 9-11 에서 vmax는 제대로 지원하지 못합니다.
Edge 브라우저에서 온전하게 vmax를 지원합니다. 확인할려면 이쪽으로
IE 5.5 이상 제대로 뷰포트 단위를 지원하게 하려면 폴리필 vminpoly를 사용할 수 있습니다.