[CSS] 단위(크기), font-size

css에서는 단위를 사용해서 글자의 크기를 직접 지정합니다. 사용하는 단위의 종류와 설명은 아래와 같습니다.

 

em : 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율 값을 지정합니다.

rem : 문서 시작 부분(roo)에서 지정한 크기를 기준(1rem)으로 한 후 비율 값을 지정합니다.

ex : 해당 글꼴의 소문자 x의 높이를 기준(dx)으로 한 후 비율값을 지정합니다.

px : 모니터의 1픽셀을 기분(1px)으로 한 후 비율값을 지정합니다.

pt  : 포인트라고 하며, 일반 문서에서 많이 사용합니다.

% : 백분율은 부모요소의 글자 크기를 기준으로 계산하여 지정하는 방법으로 부모요소의 글꼴 크기가 16px처럼 단위로 표현되어 있어야 합니다.

 

* { margin: 0; }
body { font-size: 20px; }
div { height: 100vh; background: pink; }
h1 { font-size: 2em; }
p:first-of-type { font-size: 100%; }
p:nth-of-type(2) { font-size: 1rem; }
p:nth-of-type(3) { font-size: 10vw; }
p:nth-of-type(4) { font-size: 10vh; }