웹 폰트 사이즈 가변크기 단위

웹 폰트 사이즈 가변크기 단위

웹 폰트 사이즈를 가변 크기 단위로 지정할 수 있는 몇 가지 옵션이 있습니다. 이러한 가변 크기 단위를 사용하면 사용자의 화면 크기나 설정에 따라 폰트 크기가 자동으로 조정됩니다.

가변 크기 단위

	배수단위*(부모의 글자 크기에 따라 기준점이 달라짐)
%	백분율 단위
rem	root em *(최상위 요소의 글자크기에 따라 달라짐)
vw	화면비 백분율 단위
vh	화면비 백분율 단위
vmin	화면비 최소값
vmax	화면비 최대값
ex	현재 폰트의 x-height 값

em

em은 가변 크기단위로 배수를 나태내는 단위로 부모의 font-size에 따라 기준점을 세우며 기준점에 따라 크기가 달라짐.

body 에 폰트 사이즈가 20px 로 정의 되어 있을때 하위에 선언되는 폰트사이즈를  em으로 선언하였을때는 20px (기준값) ×( font-size:0.1em의 속성 수치값)이 적용됨

ex_01)
상위 font-size: 20px , 중간 font-size: 0.8em, 하위 font-size: 0.8em 으로 선언되어 었다면, 하위 폰트사이즈의 계산방식은 아래와 같습니다.

중간 폰트사이즈의 수치는  20px  × 0.8 = 16px 이며,  하위 폰트사이즈의 수치는  16px × 0.8 × 0.8 = 10.24px 이된다.

%

%(퍼센트지)는 가변크기 단위로써 백분율을 나타내는 단위 입니다. %도 기본 설정된 크기에서 상대적으로 크기를 지정하는 것으로 초기 설정된 크기를 100%로 기준점에 따라 크기가 달라짐.

body 에 폰트 사이즈가 20px 로 정의 되어 있을때 이를 100% 로 두고 하위에 선언되는 폰트사이즈를  50%으로 선언하였을때는 20px (기준값) ×( 0.5)이 적용됨

ex_01)
상위 font-size: 20px , 중간 font-size: 50%, 하위 font-size: 20% 으로 선언되어 었다면, 하위 폰트사이즈의 계산방식은 아래와 같습니다.

중간 폰트사이즈의 수치는  20px  × 0.5 = 10px 이며,  하위 폰트사이즈의 수치는  20px × 0.2 = 4px 이된다.