TIL

web font size

반응형 웹을 위한 폰트 사이즈 속성 알아보기

px, em, rem, vw, vh

1. px

폰트의 크기를 고정시켜 창의 크기를 변경시켜도 동일한 사이즈를 유지

2. em

부모 요소에 지정된 폰트 사이즈의 배수로 적용
(앞에 적용된 폰트 사이즈에 상속 받음)

3. rem (root em - 문서 루트 요소의 폰트 크기)

em과 유사하며, 웹 브라우저 기본 크기(16px)의 배수로 적용
(부모 요소에 영향 받지 않음)

<두 가지 형태로 쓰이는 rem>

• 가장 최상위 부모인 html 태그에 폰트 크기를 지정하고, 그 아래 요소들을 rem으로 지정
• [웹 브라우저 기본 폰트 설정]을 기준으로 크기가 변해야 하는 곳 모두에 rem을 사용

※ em과 rem은 부모나 브라우저 기본 크기에 따라서 폰트 사이즈를 지정하고 싶을 때 사용
※ 각각의 요소마다 다를 수있는 em과는 달리, rem은 문서 전체에서 일정

4. vw (viewport width)

화면 너비(가로 길이)에 따라서 폰트 사이즈가 영향을 받는 단위
1vw는 너비(width)의 1/100.
(예. 화면 너비가 1000px인 경우, 1vw는 10px.(1000px * 1/100))

5. vh (viewport height)

화면 높이(세로 길이)에 따라서 폰트 사이즈가 영향을 받는 단위

※ vw와 vh는 화면 크기에 영향 받음(화면 크기가 커질수록 폰트 사이즈가 커짐)
※ 반응형 웹에서 자주 활용되는 단위