[CSS] 단위 관련

관련영상: https://www.youtube.com/watch?v=SmzghM3l228 

 

% 란, 전체의 몇 퍼센트인지에 대한 값입니다. 부모 기준으로 자식의 넓이를 %라고 한다.
예를 들어, 부모 태그의 넓이가 1200px일때 자식에게 50%를 적용하면 자식 태그의 넓이는 600px이 된다.

 

em과 rem이란? em 단위는 상위 요소 크기의 몇 배인지를 정하는 단위(em은 element의 약자)이다. 예를 들어, 상위 태그의 폰트 크기가 16px 인경우, 하위 태그에 폰트 크기에 1em으로 적용한다면 1em = 16px 이다.
1.5em = 24px(16*1.5) 이다.

추가로, rem 이란 em 앞에 R이 붙는다. 이것은 Root의 약자로, 최상위라는 뜻이다. 그래서 그냥 가장 상위인 html 태그에 적용된 폰트 사이즈가 기준이 된다. em과 다르게 현재 태그 위치를 기준으로 부모 태그의 폰트 사이즈는 전혀 연관이 없다. 따라서 더 사용하기가 편하다.  예를 들어, HTML(or Body) 태그의 폰트 크기가 16px 인경우, 어떤 태그에나 1rem으로 적용한다면 1rem = 16px 이 된다.

​
 vw, vh이란?  viewport width / viewport height의 약자로

Vw- 뷰포트의 폭에 근거하여 1vw는 width의 1%와 같다.
Vh – 뷰포트의 높이에 근거하여 1vh는 height의 1%와 같다.