CSS font-size 텍스트 폰트 크기 3가지 변경 방법

이번에는 텍스트의 크기를 변경해 봅니다. 보편적으로 CSS에서 폰트 크기를 변경해주는 옵션은 다음과 같습니다.

 

font-size

 

그러면 바로 예시를 살펴보겠습니다.

 

See the Pen CSS 폰트 크기 3가지 옵션 by rgy0409 (@rgy0409) on CodePen.

 

px

세 개의 문장이 있고 각 텍스트는 크기가 다릅니다. 지난 시간에도 잠깐 언급했듯 HTML에서의 기본 폰트 크기는 16px입니다. 따라서 첫번째 문장은 20px로 값을 입력했으니 기본 크기보다는 4px이 더 커진 상태가 될 것입니다.

 

em (rem)

두번째에서는 폰트 크기의 단위가 px이 아닌 em을 사용했습니다. em 또는 rem을 사용할 수 있는데 간단하게 말씀드리면 「배」라고 생각하시면 됩니다. 물 위에 떠 있는 그 배 말구요. 아래는 간단한 이론 공식입니다.

 

1em (또는 rem) = 16px

 

그렇습니다. 따라서 예시에서는 1.5em을 입력했으니 결과적으로 폰트 크기는 1.5em × 16px = 24px이 되는 것입니다. em과 rem의 차이점에 대해서는 아래의 글에 더 자세히 나와있으니 꼭 참고해보시기 바랍니다.

 

CSS3 폰트 크기를 결정하는 em rem 개념 및 차이점

CSS3 폰트 크기를 결정하는 em rem 개념 및 차이점

 

vw (vh)

마지막 문장에서 사용된 크기 단위는 vw입니다. 참고로 vh도 있습니다. 이 단위는 반응형 웹에서 이따금씩 사용되곤 합니다. 엄청 자주 사용되는 폰트 크기 단위는 아니지만 알아두면 요긴하게 사용할 날이 올 것입니다. 이에 대한 자세한 설명은 아래의 글에 명시되어 있으니 궁금하시면 꼭 정독해 보시기 바랍니다.

 

브라우저 창의 크기에 따라 폰트 크기가 변하는 vw vh 단위 px 계산 방법

브라우저 창의 크기에 따라 폰트 크기가 변하는 vw vh 단위 px 계산 방법

이런 식으로 vw와 vh는 크기가 정의됩니다. 폰트 크기는 이 세가지 단위만 알고 있으면 원하는대로 즉각 대응할 수 있을 것입니다. 끝.