폰트 사이즈 종류마다 차이점이 궁금해서 정리해본다. 이 글의 학습목표는 아래의 단위를 이해하는 것이다. 폰트 사이즈 뿐만 아니라 width 또는 height에도 적용되기 때문에 일부 단위는 폰트가 아닌 박스로 설명할 것이다.
px, em, rem, vh, vw, vmin, vmax, %
1. px
픽셀은 절대 크기다. 화면 크기가 변해도 글자 크기는 변하지 않는다. 일반적으로 html 태그의 font-size 디폴트 값은 16px이다. 절대 크기이기 때문에 다른 단위의 기준점이 되는데, 이는 em과 rem에서 자세히 알 수 있다.
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
2. em
em은 부모 태그의 font-size에 따라 픽셀값이 결정되는 단위다. 픽셀값은 (부모 픽셀값 * em단위) 가 된다. 예제를 통해 이해해보자.
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
아까 html의 font-size 디폴트 값은 16px이라고 했었다. <style> 에서 em 단위를 2로 설정했으므로 Test2의 픽셀값은 부모(html 태그) 픽셀값에 2를 곱한 값이며, Test3의 픽셀값은 부모(Test2) 픽셀값에 2를 곱한 값이다. 아래쪽에 위치한 div 태그들은 크기 비교를 위해 넣어줬다. em은 줄간격을 나타내는 'line-height' 속성에 사용하면 좋다.
3. rem
rem의 r은 'root'를 뜻한다. 따라서 rem은 최상위 태그를 기준으로 한다는 뜻이다. html에서 최상위 태그는 <html>이다. 예제를 통해 이해해보자.
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
div 태그의 font-size를 2rem으로 설정했으므로 div 태그 안에 있는 모든 글씨의 크기는 (16 * 2)px 이 된다. 만약에 html의 font-size를 n 픽셀로 수정하면 div 태그의 font-size는 (n * 2)px 이 될 것이다.
4. vw, vh
앞서 알아본 단위는 반응형 웹디자인에 사용하기에는 적합하지 않다. 어쨌든 특정 px값으로 고정되기 때문이다. px는 고정값이기 때문에 화면 크기를 조절해도 글씨 크기는 변함없다. 사용자가 화면 크기를 조절하면 화면 크기에 맞게 글씨 크기 또한 조절되는게 사용자 관점에서 편리하다. 이렇게 웹뷰(web view)에 따라 글씨 크기를 조절할 수 있는 단위가 바로 vw, vh 이다.
vh는 브라우저 높이값의 1/100 단위다. 예를 들어 브라우저의 높이값이 300px 이라면 1vh는 3px이 된다. vw도 마찬가지로 브라우저 너비값의 1/100 단위다. 브라우저의 크기를 조절할수록 px값이 바뀌므로 상대적 크기라고 할 수 있다. 예제를 통해 이해해보자.
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
'브라우저의' 높이 및 너비를 기준으로 한다는 것을 잊으면 안 된다. Test1 박스의 높이 및 너비는 각각 50vh, 50vw으로 설정했으므로 크기는 브라우저의 1/2 만큼 차지한다. 마찬가지로 Test2 박스의 높이 및 너비는 각각 25vh, 25vw으로 설정했으므로 크기는 브라우저의 1/4 만큼 차지한다.
6. vmin, vmax
vmin는 뷰포트의 최소값을 기준으로 하고, vmax는 뷰포트의 최대값을 기준으로 한다. 예를 들어 브라우저의 너비가 1100px 이고 높이가 700px 일 때 단위값은 아래와 같다.
1vmin = 7px
1vmax = 11px
이건 그림으로 보면 바로 이해할 수 있다. 예제 코드는 따로 없다.
7. %
이 단위는 부모의 크기를 100으로 보는 상대 크기다. 만약에 부모가 100px 이라면, 30%는 30px, 23%는 23px이 된다. 예제를 통해 이해해보자.
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
Test2의 width는 부모의 50% 이므로 (400 * 0.5) = 200px 이다. 이를 height에 그대로 반영해주었다. 마찬가지로 Test3의 width는 부모의 40% 이므로 (200 * 0.4) = 80px 이다. 이를 height에 그대로 반영해주었다.
'HTML+CSS' 카테고리의 다른 글
| [ HTML+CSS ] Transform, Transition, Animation (0) | 2022.04.16 |
|---|---|
| [ HTML+CSS ] float과 포지셔닝(static, relative, absolute, fixed) (0) | 2022.04.10 |
| [ HTML+CSS ] grid 쉽게 쓰자 (0) | 2022.04.07 |
| [ HTML+CSS ] Display 종류( block, inline inline-block, flex) (0) | 2022.04.07 |
| [ HTML + CSS ] 재미있는 HTML 태그 (0) | 2022.04.06 |
