Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS font-size 완벽 가이드: 텍스트 크기를 자유자재로 조절하는 방법

CSS의 font-size 속성은 웹 페이지나 웹사이트에 있는 모든 텍스트 요소의 글꼴 크기를 지정합니다. 이 속성은 텍스트 콘텐츠를 포함하는 모든 클래스, ID, 요소에 적용할 수 있으며, px, em, rem, vw, vh 단위와 키워드 값을 사용할 수 있습니다.

들어가며

대부분의 개발자는 다양한 글꼴 크기를 조합하여 웹 페이지를 스타일링합니다. 예를 들어 제목에는 큰 글꼴을 사용하고 본문 텍스트에는 더 작은 글꼴을 적용하는 식입니다. 그래서 많은 개발자들이 묻습니다. "CSS나 HTML에서 글꼴 크기는 어떻게 변경할 수 있을까?"

CSS의 font-size 속성을 사용하면 웹 페이지에서 문단이나 한 줄의 텍스트 크기를 자유롭게 설정할 수 있습니다. 이 튜토리얼에서는 실제 예제와 함께 font-size 속성을 활용하는 방법을 자세히 살펴보겠습니다. 이 가이드를 끝까지 읽고 나면 텍스트 크기 조정 전문가가 될 준비가 완료될 것입니다.

CSS font-size란?

적절한 글꼴 스타일링은 웹 디자인에서 매우 중요한 부분입니다. 스타일이 적용되지 않은 텍스트는 방문자의 가독성을 떨어뜨리고, 결국 불쾌한 웹사이트 경험으로 이어질 수 있습니다.

CSS에는 font-weight, font-family, text-decoration, color처럼 텍스트의 외관을 커스터마이징할 수 있는 다양한 글꼴 스타일이 있습니다. 그중에서도 font-size는 텍스트 블록의 글꼴 크기를 제어하는 핵심 속성입니다.

CSS font-size 속성의 기본 문법은 다음과 같습니다:

font-size: sizeValue;

sizeValue는 텍스트 블록에 적용하고자 하는 글꼴 크기 값입니다. 글꼴 크기를 지정하는 방법은 여러 가지가 있으며, 이번 글에서 다룰 방법은 다음과 같습니다:

  • 픽셀(px)
  • em
  • 루트 em(rem)
  • 뷰포트 단위(vw, vh)
  • 키워드

지금부터 각 방법을 웹 페이지에 어떻게 적용하는지 하나씩 살펴보겠습니다.

픽셀(px)로 글꼴 크기 설정하기

글꼴 크기를 지정하는 가장 일반적인 방법 중 하나는 픽셀을 사용하는 것입니다.

픽셀은 정밀한 조절이 가능하다는 점에서 좋은 측정 단위입니다. 픽셀 단위는 운영체제나 웹 브라우저의 영향을 거의 받지 않으며, 한 화면의 픽셀은 다른 화면에서도 동일하게 표시됩니다. 따라서 지정한 픽셀 값은 서로 다른 브라우저에서도 거의 비슷하게 나타납니다.

다만 픽셀로 글꼴 크기를 설정하는 데에는 한 가지 한계가 있습니다. 바로 접근성입니다. 픽셀로 정의된 글꼴 크기는 일부 브라우저에서 사용자가 직접 크기를 조정할 수 없기 때문에 접근성이 떨어집니다. 예를 들어 시각 장애가 있는 사용자는 픽셀 기반으로 글꼴 크기가 정의된 사이트를 이용하는 데 어려움을 겪을 수 있습니다.

예를 들어 모든 <h1> 요소에는 28px, 모든 <p> 요소에는 12px의 글꼴 크기를 적용한 웹사이트를 만든다고 가정해 보겠습니다. 다음 코드로 이 작업을 수행할 수 있습니다:

h1 { font-size: 28px; }
p { font-size: 12px; }

위 코드에서는 CSS 선택자를 사용해 모든 <h1> 요소의 글꼴 크기를 28px로, 모든 <p> 요소의 글꼴 크기를 12px로 설정했습니다. 아래 코드는 이 요소들이 새로운 글꼴 크기로 화면에 표시되는 모습을 보여줍니다:

<style>
  h1 { font-size: 28px; }
  p { font-size: 12px; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

em 단위로 글꼴 크기 설정하기

CSS에서 글꼴 크기를 설정하는 또 다른 일반적인 방법은 em 단위를 사용하는 것입니다. em은 부모 요소의 글꼴 크기를 기준으로 하는 상대적 측정 단위입니다. 글꼴 크기를 2em으로 설정하면 부모 요소 글꼴 크기의 두 배가 됩니다.

em을 활용한 CSS 글꼴 크기 예제

예를 들어 박스 안에 문단 텍스트가 있고, 그 박스의 글꼴 크기가 20px라고 가정해 보겠습니다. 이때 문단의 글꼴 크기를 1em으로 지정하면 문단의 글꼴 크기는 20px가 됩니다. 즉, 부모 요소의 글꼴 크기와 동일해집니다.

부모 요소에 별도의 글꼴 크기를 지정하지 않으면 브라우저의 기본값이 사용됩니다. 이 값은 보통 16px입니다. 따라서 아무런 글꼴 크기를 지정하지 않았다면 1em은 기본적으로 16px, 2em은 32px가 됩니다.

웹 페이지의 기본 글꼴 크기가 16px이고, 모든 문단이 이 크기로 표시되기를 원한다면 1em 값을 사용하면 됩니다. 또한 모든 제목이 24px(즉, 1.5em)로 표시되기를 원한다고 가정해 보겠습니다. 다음 코드로 구현할 수 있습니다:

p { font-size: 1em; }
h1 { font-size: 1.5em; }

위 코드에서 모든 문단의 크기는 16px(기본값 기준 1em = 16px)이 되고, 모든 <h1> 요소는 24px(1.5em = 24px)이 됩니다.

실제 웹 페이지에서 텍스트가 표시되는 모습은 다음과 같습니다:

<style>
  p { font-size: 1em; }
  h1 { font-size: 1.5em; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

위 예제에서 <h1>과 <p> 요소에 적용된 새로운 스타일을 확인할 수 있습니다.

주목할 점은, 만약 <h1>이 다른 글꼴 크기를 가진 박스 안에 위치한다면 그 크기도 함께 달라진다는 것입니다. em 값은 부모 요소의 글꼴 크기를 상속받기 때문입니다.

rem(루트 em) 단위로 글꼴 크기 설정하기

rem은 '루트 em(root em)'의 약자로, CSS3에서 새롭게 도입된 측정 단위로 글꼴 크기를 설정하는 데 사용됩니다. rem 값은 부모 요소가 아닌 최상위 <html> 요소를 기준으로 계산됩니다.

rem 값이 유용한 이유는 문서 전체를 기준으로 상대적인 값을 지정할 수 있기 때문입니다. 이렇게 하면 부모 요소가 다른 em 값을 가지더라도 텍스트 크기가 영향을 받지 않습니다.

기본 글꼴 크기가 16px인 웹 페이지가 있다고 가정해 보겠습니다. 이전 예제와 마찬가지로 모든 <h1>은 24px로, 모든 문단은 16px로 표시되기를 원합니다. 다음 코드로 이러한 글꼴 크기를 설정할 수 있습니다:

<style>
  p { font-size: 1rem; }
  h1 { font-size: 1.5rem; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

위 코드는 이전 예제와 거의 동일합니다. 유일한 차이점은 측정 단위로 rem을 사용했다는 점입니다. 이 예제에서도 최상위 제목과 문단의 글꼴 크기는 각각 24px와 16px로 유지됩니다. 웹 페이지의 기본 글꼴 크기가 16px이기 때문입니다.

키워드로 글꼴 크기 설정하기

CSS에서 글꼴 크기를 설정하는 데 사용할 수 있는 키워드에는 두 가지 종류가 있습니다.

절대 키워드는 웹 페이지의 변화와 무관하게 항상 동일하게 유지되는 글꼴 크기를 설정할 때 사용합니다. 절대 글꼴 크기를 지정할 수 있는 키워드는 다음과 같습니다:

  • xx-small (9px)
  • x-small (10px)
  • small (13px)
  • medium (16px)
  • large (18px)
  • x-large (24px)
  • xx-large (32px)

괄호 안의 값은 기본 글꼴 크기가 16px인 브라우저를 기준으로 한 것입니다.

반면 상대 키워드는 웹 페이지 내 다른 곳의 글꼴 크기에 따라 함께 변하는 글꼴 크기를 설정합니다. 사용할 수 있는 상대 키워드는 smaller와 larger입니다. 이 키워드들은 페이지 내 다른 글꼴 크기가 변경될 때 함께 크기가 조정되어야 하는 경우에 유용합니다.

페이지의 모든 <h2> 요소를 24px(x-large)로, 모든 <h3> 요소를 18px(large)로 설정하고 싶다고 가정해 보겠습니다. 다음 코드로 구현할 수 있습니다:

<style>
  h2 { font-size: x-large; }
  h3 { font-size: large; }
</style>

<html>
  <h2>This is a heading.</h2>
  <p>This is some paragraph text.</p>
  <h3>This is a lower-level heading.</h3>
  <p>This is some more paragraph text.</p>
</html>

<h2>와 <h3> 태그의 글꼴 크기는 각각 24px와 18px입니다. 하지만 우리는 이 크기를 픽셀로 지정하지 않았습니다. 대신 브라우저가 제공하는 기본 글꼴 크기 키워드를 사용한 것입니다.

뷰포트 단위(vw, vh)로 글꼴 크기 설정하기

뷰포트 단위는 브라우저 뷰포트(viewport) 크기의 백분율로 계산됩니다. CSS에서 지원하는 두 가지 뷰포트 단위는 뷰 높이(vh)와 뷰 너비(vw)입니다.

뷰포트 단위는 브라우저 뷰포트 크기의 백분율이므로, 예를 들어 1vh는 뷰포트 높이의 1%와 같습니다. 따라서 뷰포트 너비가 1000px라면 1vh는 10px에 해당합니다.

뷰포트 단위를 사용하면 브라우저 창 크기를 조절할 때 글꼴 크기도 함께 변합니다. 덕분에 다양한 브라우저 및 기기 크기에 맞춰 반응하는, 접근성 높은 사용자 경험을 제공할 수 있습니다.

제목은 뷰포트 너비의 4%, 문단은 뷰포트 너비의 1% 크기로 표시되는 사이트를 만들고 싶다고 가정해 보겠습니다. 다음 코드로 구현할 수 있습니다:

<style>
  p { font-size: 1vw; }
  h1 { font-size: 4vw; }
</style>

<html>
  <h1>This is a heading.</h1>
  <p>This is a paragraph of text.</p>
</html>

브라우저 창 크기를 조절하면 이 제목들의 크기도 함께 변하는 것을 확인할 수 있습니다.

마무리

font-size 속성은 CSS(그리고 HTML)에서 글꼴 크기를 변경하는 데 사용됩니다. 픽셀, em, rem, 키워드, 뷰포트 단위 등 다양한 측정 단위를 지원하며, CSS 클래스와 ID뿐 아니라 요소 자체에도 적용할 수 있습니다.

이 튜토리얼을 통해 CSS 글꼴 크기의 기본기를 익혔습니다. 이제 여러분은 전문가처럼 font-size 속성을 활용할 준비가 되었습니다.