CSS 기초(3) 폰트 크기 단위, 폰트 크기 확인 방법

 

CSS 기초(3)

---

오늘은 폰트 크기에 관련된 내용을 다뤄보겠습니다.

 

많이 사용되는 폰트 크기 단위에는

대표적으로 px, rem, em, vw, vh가 있습니다.

 

CSS에서 폰트 크기를 다루는 이유는 폰트 크기도 CSS를 활용하여 적용하기 때문에

CSS에서 폰트 크기를 다루게 되었습니다.

 

이제 본론으로 넘어가도록 하겠습니다

 

 (1)

px(pixel)

px은 가장 많이 사용되며 웹페이지에서 기본으로 사용되는 단위입니다.

px은 데스크탑이나 스마트폰에서 고정적인 크기를 표현할 때 주로 사용합니다.

 

(2)

rem(rootem)

rem은  HTML 태그에서 최상위에 있는 태그에 영향을 받는 크기 단위입니다.

rem은 HTML 최상위 태그의 폰트 크기에 따라 크기를 지정하는 크기 단위로

HTML은 기본적으로 16px의 폰트 크기를 가지고 있기 때문에 

최상위 태그의 크기를 변화시키지 않는 이상 rem은 16px이라고 할 수 있습니다.

 

이 단위를 사용하는 이유는 반응형 웹에서 자주 사용되기 때문입니다.

여기서 반응형 웹이란 쉽게 디바이스에 따라 바뀌는 크기를 유동적으로 맞춰주는 웹을 의미하는데

rem을 사용하면서 최상위 태그의 폰트 크기의 변화에 따라 변화할 수 있기 때문에

반응형 웹에 많이 사용됩니다.

 

(3)

em

em은 rem과 매우 비슷하지만 rem과의 차이점은

em은 부모 태그의 기준을 잡고 변화하기 때문입니다.

em도 반응형 웹에서 많이 사용되고 em의 기본적인 크기는

부모 태그이기 때문에 부모 태그도 따로 크기를 조절하지 않았다면

16px로 정의되어 있을 확률이 높습니다.

 

(4)

vw(viewport width)

vw는 화면의 가로 크기와 관련이 있는 단위로

1vw는 화면 가로의 크기에 100분의 1 크기라고 할 수 있습니다.

 

만약 10vw를 지정했을 때 화면의 가로 크기를 100px이라고 가정하면

10vw는 100px × 0.1(10vw)이라고 할 수 있습니다.

그래서 10vw는 10px입니다.

 

이런 식으로 계산을 할 수 있고 vw를 사용하는 이유는 위에 rem, em과 마찬가지로

반응형 웹에서 많이 사용됩니다.

 

(5)

vh(viewport height)

마지막으로 vh는 vw와 똑같이 사용하지만 vh는 화면의 높이에 따라 크기가 변화합니다.

그래서 vw와 똑같이 계산하되 화면의 높이를 기준을 잡고 계산하시면 됩니다.

 

오늘 폰트 크기를 소개해드리는 것은 꼭 알아두시면 좋지만 공부하시다 보면 자연스럽게

사용하기 때문에 이런 단위들이 있다 정도로 넘어가셔도 좋을 것 같습니다.

 

---

 

오늘은 폰트 크기와 관련한 단위에 대해 알아보았습니다.

마지막으로 끝내기 전에 폰트 크기의 변화를 확인하는 방법에 대해 알아보겠습니다.

폰트 크기를 적용한 뒤 웹페이지를 봤을 때 폰트 크기를 확인할 수 있는 방법은

먼저 개발자 모드를 켜셔야 합니다.

 

개발자 모드에서 폰트 크기 보는 방법

윈도는 f12, 맥은 option + command + i를 누르시면 실행되실 겁니다.

개발자 모드를 켜시면 아래 '계산됨(computed)' 부분을 누른 뒤 아래로 내려가서

'모두 표시(show all)'를 체크하신 후 검색창에 font-size를 검색하시면 확인하실 수 있습니다.

저는 따로 폰트 크기를 지정하지 않았기 때문에 16px로 지정되어 있습니다.

 

이 방법을 사용하셔서 직접 폰트 크기를 적용해 보시고 크기도 확인해 보시면 될 것 같습니다!

 

오늘도 고생하셨습니다!

 

감사합니다!!