#절대단위: px, pt등
상대단위: %, em, rem, ch, vw, vh 등
#글꼴 사이즈를 정할때
-절대적인 크기로 정하는경우
px(픽셀)
- 픽셀은 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에도 적합하지 않다.
- 픽셀은 화면의 사이즈가 정해진 경우에 유리하다.
-일반적인 경우 상대단위인 rem을 추천한다.
(가급적 rem을 우선적으로 쓰도록 권고하고 있다.)
- 브라우저의 기본 글자 크기가 1rem이며, 두배로 크게 하고 싶다면 2rem, 작게하려면 0.8rem 등으로 조절해서 사용할수 있다.
(em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵다. 이에 비해 rem은 root의 글자 크기에 따라서만 상대적으로 변한다.)
#em
-부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵다.
-고정된 길이를 나타내지 않고 대신 브라우저가 어떤 기준에 따라 계산하여 px로 변환을 해준다.
#em과 rem의 공통점
둘다 css의 font-size 속성값에 비례해서 결정되는 상대단위이다.
font-size: 16px인 경우
0.5 em = 16px x 0.5 = 8px
여기서 font size를 20px로 늘릴경우 상대단위도 비례해서 증가하게 된다.
0.5em= 20px x 0.5 = 10px
#차이점
정확히 어디에 있는 font-size 속성 값인지에 따라 차이가 발생한다.
em의 경우, 해당단위가 사용되고 있는 요소의 font size속성값이 기준이 된다.
rem은 r은 root로 즉 최상위 요소를 font size 속성 값 의미한다.
html에서 최상위 요소는 html이다. rem의 경우 html요소의 font-size 속성값이 기준이 된다.
rem은 root의 글자 크기에 따라서만 상대적으로 변한다.
# 화면 너비나 높이에 따른 상대적인 크기로 화면사이즈 정할때
vw(viewport width), vh(viewport height)를 사용한다.
- 웹 사이트의 보이는 영역을 viewport라고 한다.
1vw는 보이는 영역 너비의 1/100.
1vh는 보이는 영역 높이의 1/100.
-반응형 웹에서 기준점을 만들때
디바이스 크기별로 css를 달리 적용해야 한다.
이때 디바이스 크기를 나누는 기준을 보통 px로 정한다.
