px
-
정의 : px는 절대 길이 단위 이고 화소 1개의 크기를 의미한다. mdn 에서는 1픽셀의 길이를 1/96 인치로 정의 하였다.
-
언제 사용해야 할까?
절대적인 크기가 필요할 때 사용한다. 픽셀을 사용한다면 사용자의 디바이스 해상도에 따라 글자의 크기가 의도 한 것보다 작아지거나 커질 수 있다. 그래서 화면에 출력하는 용도로는 적절하지 않다.
em
-
정의 : 부모 요소 글꼴 크기의 상대적인 길이
-
언제 사용해야 할까?
화면 출력용 글꼴 크기에 쓰기에는 적절하지 않다. 부모 요소의 글꼴 크기에 따라 변하기 때문에 예측이 어렵다. 부모 요소의 글꼴 크기에 따라 자식요소의 크기가 달라져야 할 상황에 쓴다.같은 1.2em의 폰트사이즈를 줬지만 자식 요소로 갈수록 크기가 커진다.
rem
-
정의 : root 요소(html) 글꼴 크기의 상대적인 길이
-
언제 사용해야 할까?
화면 출력용 글꼴 크기를 설정할 때 사용한다. 루트요소의 글꼴크기는 고정되어 있고 rem은 루트 요소의 글꼴 크기를 따르기 때문에 일관성 있는 크기를 화면에 출력 할 수 있다.루트 요소의 글꼴 크기가 일정하기 때문에 자식 요소로 들어가도 글꼴 크기는 일정하다.
vh,vw
-
정의 : 뷰포트(화면에 보여지는 영역)의 너비 높이에 따른 백분율
-
언제 사용해야 할까?
뷰포트 영역 전체를 꽉 채우거나, 일부분만 차지 하고 싶을 때 쓴다. 화면의 높이를 꽉 채우기 위해서 height: 100% 처럼 %단위를 쓴다면, 그 요소의 모든 부모가 height: 100%로 꽉 차 있어야 한다. height: 100vh 를 해준다면 부모의 크기를 무시하고 height를 꽉 채울 수 있다.
height가 100% 이지만 부모요소 때문에 화면에 꽉 차지 않음.
height를 100vh 로 줬을 때는 화면을 꽉 채운다.
