font-size.md

Font Size

1. 폰트 크기의 측정 기준

폰트 크기는 텍스트의 세로 높이를 의미합니다. 텍스트의 상단(ascender)부터 하단(descender)까지의 거리를 기준으로 크기가 결정됩니다.

• 상단(Ascender): b, d, f와 같이 본문보다 더 높이 올라가는 부분입니다.
• 하단(Descender): g, p, q처럼 본문보다 아래로 내려가는 부분입니다.

2. 폰트 크기를 정의하는 단위

절대적 단위

고정된 크기를 의미하며, 주로 출력 매체에서 많이 사용됩니다.

• px (픽셀): 화면 상에서 고정된 크기입니다.
• pt (포인트): 인쇄물에서 많이 사용하는 단위로 1pt는 1/72 인치입니다.
• cm, mm, in (센티미터, 밀리미터, 인치): 물리적인 크기 단위로, 특정 상황에서 사용됩니다.

상대적 단위

다른 요소의 크기에 따라 상대적으로 크기가 설정됩니다.

• em: 부모 요소의 폰트 크기를 기준으로 배수만큼 크기를 설정합니다.
• rem: em과 비슷하지만, 루트 요소(html)의 폰트 크기를 기준으로 설정됩니다.
• %: 부모 요소의 폰트 크기를 기준으로 비율로 설정됩니다.
• vw: 뷰포트 너비에 대한 백분율로 설정됩니다.
• vh: 뷰포트 높이에 대한 백분율로 설정됩니다.

3. 왜 다양한 단위가 필요할까?

CSS는 유연성을 위해 다양한 단위를 제공합니다. 고정된 크기가 필요할 때는 절대적 단위를, 반응형 레이아웃을 위해서는 상대적 단위를 사용합니다. 특히, 반응형 웹 디자인에서는 rem, em, vw 같은 단위를 사용하여 다양한 화면 크기에 맞게 폰트 크기를 조정할 수 있습니다.

4. 폰트 크기에서 100%의 의미

font-size: 100%는 화면 크기의 100%가 아니라 부모 요소의 폰트 크기를 의미합니다.

예시:

html {
  font-size: 16px; /* 기본적으로 브라우저가 16px로 설정 */
}
body {
  font-size: 100%; /* 부모인 html 요소의 크기인 16px */
}
.text {
  font-size: 150%; /* body의 150%, 즉 24px */
}

이 예시에서 100%는 부모 요소인 html의 16px을 기준으로, 150%는 16px의 150%인 24px이 됩니다.

5. 화면 크기에 맞춘 폰트 크기 조정

화면 크기에 따라 폰트 크기를 조정하려면 뷰포트 단위를 사용해야 합니다.

font-size: 5vw; /* 뷰포트 너비의 5% */

이렇게 설정하면 화면의 너비가 변해도 폰트 크기가 화면 크기에 맞춰 동적으로 조정됩니다.