CSS 사이즈 단위 px, em, rem.. 등 차이 (반응형웹 용이)

 

상대 단위

상대(relative) 단위란 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위입니다. 본 포스트에서 다룰 em과 rem을 포함해 %, vw, vh 등이 대표적인 CSS의 상대 단위입니다.

 

절대 단위

절대(absolute) 단위는 어떤 상황에서든 항상 고정된 길이를 나타내는 단위입니다. 대표적으로 예전부터 현재까지 많이 사용되는 px와 pt를 들 수 있고, cm나 in와 같은 실생활에서 많이 사용되는 단위들도 이 절대 단위에 범주에 속합니다.

PX : 폰트의 크기를 고정하고 싶을 때 씁니다.

- 가장 기본적으로 사용되는 단위입니다.

- 이것은 픽셀단위라는 고정값에 따라 정해지기 때문에 화면의 크기나 확대와 같이 사용자가 임의로 정의할 수 없는

  고정된 값을 말합니다.

 

em : 앞서 적용된 폰트 크기의 배수로 적용됩니다.

- em은 부모 요소를 기준으로 자식 요소의 크기를 정하는 것을 말합니다.

- 기반이 되는 값은 상위 요소의 폰트 사이즈입니다. 이런 특성으로 인해 부모 요소 한 번의 변경으로 자식 요소 여럿의    다양한 크기 값을 동시에 바꿀 수 있어 유연한 단위라고 할 수 있습니다

 예시1

<div class="parent"> <div class="child"></div> </div> .parent{ font-size:12px } .child{ font-size:1.2em }

다음과 같이 부모 요소를 12px로 정의했을 때 자식 요소를 1.2em 으로 정의하면 자식 요소는 12px*1.2=14.4px로 정의됩니다.

 

 예시2

-  em 단위는 font-size 외에도 사이즈 단위가 사용되는 모든 프로퍼티에 사용 가능합니다. 

 

.parent { font-size: 20px; }

.child-a

{ /* 결과 → 20px × 1.2 = 24px */

font-size: 1.2em;

/* 결과 → 자신의 폰트 사이즈 24px × 1.5 = 36px */

height: 1.5em; }

.child-b

{ /* 결과 → 자신의 상속받은 폰트 사이즈 20px × 1.5 = 30px */

height: 1.5em; }

 

em과 rem의 차이점

em의 경우, 해당 단위가 사용되고 있는 요소의 font-size 속성 값이 기준이 됩니다.

div요소에 css를 적용한다면

width 속성의 값은 200px이 됩니다. 왜냐하면 em은 div요소 font-size에 비례해서 커지기 때문에 div 요소의 font-size인 20px에 10을 곱해야 합니다. 

div { font-size: 20px; width: 10em; /* 200px */ } 

 

rem : 웹 브라우저 크기가 16px  배수입니다.

계산에 기반하는 요소가 정해져 있는 상대 단위가 있다면 어떨까요? 그것이 바로 rem 단위입니다.

rem 단위는 HTML 최상단(root) 요소의 font-size 속성 값이 기준이 됩니다.

상위 요소의 폰트 사이즈는 웹 브라우저의 기본 폰트 사이즈가 결정하며, 웹브라우저의 16px 정해 놓고 있습니다.

어떤 자식 요소에서든 css프로퍼티 값으로 1.5rem을 지정한 경우, 루트 요소 폰트 사이즈인 16px에 1.5가 곱해져서 최종 계산된 결과값은 24px이 됩니다. 자신의 폰트 사이즈에 비례하는 em 단위와는 달리, rem 단위는 어떤 요소에서 사용하든 계산 기반값이 일관되는 것입니다.

(예제1)

html { font-size: 16px; }

 

(예제2)

span {

html{ font-size:12px } div{ font-size:1.2rem }

최상위 요소를 기준으로 하기 때문에 아무리 중첩되어도 최상위 요소를 기준으로 한 1.2*12px의 사이즈를 갖는다.

이 rem 시스템은 모바일 환경에서 접근성을 위해 글자 크기를 키우거나 그리드 시스템에 사용하기에 유용합니다.

 

 

 

CSS Viewport를 기준으로 한 단위가 4개 있습니다.(vh, vw, vmin, vmax)

• Viewport Height (vh) : viewport의 높이에 근거한다. 1vh는 viewport의 높이의 1%와 같다
• Viewport Width (vw) : viewport의 폭에 근거한다. 1vw는 viewport의 넓이의 1%와 같다
• Viewport Minimum (vmin) : viewport의 (높이와 너비 중) 작은 쪽의 치수에 기초로한다. viewport의 높이가 폭보다 작은 경우, 1vmin는 viewport의 높이의 1%에 해당한다. 마찬가지로 viewport의 폭이 높이보다 작은 경우, 1vmin는 viewport의 넓이의 1%와 같다
• Viewport Maximum (vmax) : viewport의 (높이와 너비 중) 큰 쪽의 치수에 기초로한다. viewport의 높이가 폭보다 큰 경우, 1vmax는 viewport의 높이의 1%에 해당한다. 마찬가지로 viewport의 폭이 높이보다 큰 경우, 1vmax는 viewport의 넓이의 1%와 같다

Viewport가 다양한 상황에서 어떤 값을 가지고 있는지 설명하겠다.

• viewport의 폭이 1200px, 높이가 1000px의 경우 10vw는 120px, 10vh는 100px이된다. 이 viewport는 폭이 높이보다 더 크기 때문에 10vmax는 120px, 10vmin는 100px이된다
• 이 장치의 방향이 바뀌어 viewport의 폭이 1000px 높이가 1200px되면 10vh는 120px, 10vw는 100px이된다. 흥미롭게도, 10vmax는 큰 쪽의 viewport의 값에 따라 결정되므로 120px 상태이다. 마찬가지로 10vmin도 100px로 그대로이다.
• 브라우저 창의 크기를 변경하여 viewport의 넓이를 1000px 높이를 800px하면 10vh는 80px, 10vw는 100px이된다. 마찬가지로 10vmax는 100px, 10vmin은 80px된다

 

# 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;
}

<vh와 vx>

 

vh = viewport height

 

vw = viewport width

 

즉, 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻입니다.

 

100vh, 100vw 가 전체 화면의 기준이 됩니다.

예를들어,

현재 스크린 크기가 height = 1000px, width = 800px 이라면

1vh = 10px  /  1vw = 8px 이 될 것이고

 

height: 50vh;

width: 25vw; 

로 설정한다면

 

height - 500px

width - 200px 

 

실제로 이런식으로 적용이 되겠죠!

 

 

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를 지원합니다. 확인할려면 이쪽으로