CSS Units - em, rem, vw, vh, px, %

CSS Units

CSS에서 length를 표현하기 위해 여러 unit이 존재한다.

고정되어 있는 Absolute와 상대적인 length를 나타내는 Relative 2가지로 분류할 수 있다. 

 

1. Absolute

Absolute에서는 일반적으로 px을 이용한다. 

Unit	Value
cm (Centimeters)	1cm = 96px/2.54
px (Pixels)	모니터 위에서 화면에 나타낼 수 있는 가장 단위 1px = 1/96th of 1in
in (inches)	1in = 2.54cm = 96px

 

Absolute의 단점은 container 크기가 변경되어도 크기가 그대로이고,

사용자가 브라우저 설정 등으로 글씨 크기를 조절해도 변경이 되지 않는다는 것이다. 

 

 

2. Relative

Unit	Description
em	부모의 font-size에 따라 가변적이다. %개념과 동일한데, 1em = 100%라고 보면 된다.  ex) ① 부모가 없이 "parent"라는 text가 8em으로 지정되어 있다면, 8em * 16px = 128px   ※ 기본적으로 html에 할당되는 폰트 사이즈는 16px이며, font-size를 별도 지정하지 않으면 text 크기는 16px. ② "parent" text의 자식으로 "child"라는 text가 0.5em으로 지정되어 있다면, 128px * 0.5em = 64px
ex	font-family에 따라 font-size가 가변적이며,  1ex는 font-family의 소문자 x의 높이를 나타낸다.
ch	font-family에 따라 font-size가 가변적이며,  1ch는 font-family의 숫자 0의 너비를 나타낸다.
rem	r은 root를 의미하는 것으로, 부모의 font-size에 따라 가변적인 em과 다르게 rem은 root element의 font-size에 따라 가변적이다.  여기서 root element는 별도 설정을 하지 않았다면 보통 16px을 의미하게 된다.  ex) ① 부모가 없이 "parent"라는 text가 8em으로 지정되어 있다면, 8em * 16px = 128px ② "parent" text의 자식으로 "child"라는 text가 0.5em으로 지정되어 있다면, 16px * 0.5em = 8px
vw	viewport(브라우저) 너비에 따라 font-size가 가변적이며, 100vw는 viewport 너비의 전체를 사용, 50vw는 viewport 너비의 반을 사용하겠다는 의미이다.
vh	viewport(브라우저) 높이에 따라 font-size가 가변적이며, 100vh는 viewport 높이의 전체를 사용, 50vh는 viewport 높이의 반을 사용하겠다는 의미이다.
%	부모의 font-size에 따라 가변적이다.

 

 

그럼 어떤 걸 사용해야 하나?

1. 부모 요소에 따라 사이즈가 변경되어야 해! -> %, em

2. 브라우저 사이즈 따라 변경되어야 해! -> v*, rem

 

1. 요소의 너비나 높이에 따라 사이즈가 변경되어야 해! -> %, v*

2. 폰트 사이즈에 따라 변경되어야 해! -> em, rem

 

 

※ 유용한 사이트

 

1. px를 em으로 변환

http://pxtoem.com/

PXtoEM.com: PX to EM conversion made simple.

2. unit 별로 직접 테스트할 수 있음

https://www.w3schools.com/cssref/css_units.asp

CSS Units

 

 

출처 : 드림 코딩