글꼴의 크기 단위
- 절대 단위 : px, pt 등
- 상대 단위 : %, em, rem, ch, vw, vh 등
활용되어야 할 배경
1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우
-
px(픽셀)을 사용합니다. -
브라우저의 기본 글꼴 크기를 더 크게 설정하더라도 크기가 고정됩니다.
-
같은 브라우저를 컴퓨터 또는 모바일에서 볼 경우 적합하지 않습니다.
-
픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리합니다.
2. 일반적인 경우
-
상대 단위인
rem을 사용합니다. -
브라우저의 기본 글자 크기가 1rem 이며 , 두배로 크게 하고 싶다면 2 rem, 작게 하려면 0.8 rem 등 조절하면 됩니다.
-
rem 은 root의 글자 크기에 따라서만 상대적으로 변합니다. (em 은 부모 엘리먼트에 따라 변합니다.)
3. 반응협 웹 에서 기준점을 잡을 때
- 반응형 웹이란 브라우저 크기(너비)에 따라 내용의 구성이 변하는 웹사이트를 말합니다.
4. 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우
-
vw,vh를 사용합니다.(viewport width, viewport height) -
영역 을 지정할 때 브라우저 너비가 변하더라도 너비에 맞게끔 영역이 변하는 경우에 100vw, 100vh를 사용한 것입니다.
