CSS font-size 속성

font-size 속성은 텍스트 크기를 설정한다.

텍스트 크기를 관리할 수 있는 것은 웹 설계에서 중요하다. 그러나 글꼴 크기 조정을 사용하여 문단을 머리글처럼 만들거나 머리글을 머리글처럼 만들면 안된다.

제목에는 항상 <h1> - <h6>과 같은 적절한 HTML 태그를 사용하고 문단에는 <p>를 사용한다.

글꼴 크기 값은 절대 또는 상대 크기일 수 있다.

절대 크기:

텍스트를 지정된 크기로 설정한다
사용자가 모든 브라우저에서 텍스트 크기를 변경할 수는 없다(접근성 이유로 좋지 않음)
절대 크기는 출력의 물리적 크기가 알려진 경우에 유용하다

상대 크기:

주변 요소를 기준으로 크기를 설정한다
사용자가 브라우저에서 텍스트 크기를 변경할 수 있다

px로 폰트 크기 설정하기

픽셀 크기를 사용하여 텍스트 크기를 설정할 수 있다.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}
</style>
</head>
<body>

<h1>h1요소 폰트 크기 : 40px</h1>
<h2>h2요소 폰트 크기 : 30px</h2>
<p>p요소 폰트 크기 : 14px</p>

</body>
</html>

h1요소에 텍스트 크기는 40px, h2요소에 텍스트 크기는 30px, p요소에 텍스트 크기는 14px로 설정하였고, 결과 화면은 아래 그림과 같다.

팁: 픽셀을 사용하는 경우에도 확대/축소 도구를 사용하여 전체 페이지의 크기를 조정할 수 있다.

em으로 폰트 크기 설정하기

사용자가 브라우저 메뉴에서 텍스트 크기를 조정할 수 있도록 많은 개발자가 픽셀 대신 텍스트를 사용한다.

1em은 현재 글꼴 크기와 동일하다. 브라우저의 기본 텍스트 크기는 16px이다. 따라서 1em의 기본 크기는 16px이다.

크기는 다음 공식을 사용하여 픽셀에서 em까지 계산할 수 있습니다: 픽셀/16=em

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>

<h1>h1요소 폰트 크기 : 2.5em(40px/16)</h1>
<h2>h2요소 폰트 크기 : 1.875em(30px/16)</h2>
<p>p요소 폰트 크기 : 2.5em(14px/16)</p>

</body>
</html>

h1 요소 폰트 크기는 2.5em, h2 요소 폰트 크기는 1.875em, p 요소 폰트 크기는 0.875em을 설정하였고, 그 결과 화면은 아래 그림과 같다.

위 예제에서 em의 텍스트 크기는 이전 예제의 픽셀과 동일하다. 그러나 항목 크기를 사용하면 모든 브라우저에서 텍스트 크기를 조정할 수 있다.

안타깝게도 이전 버전의 Internet Explorer(인터넷 익스플로러)에는 여전히 문제가 있다. 텍스트는 크게 만들 때보다 커지며 작게 만들 때보다 작아진다.

%와 em 조합으로 폰트 크기 설정하기

모든 브라우저에서 작동하는 솔루션은 <body> 요소의 기본 글꼴 크기를 퍼센트로 설정하는 것이다:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}
</style>
</head>
<body>

<h1>h1 폰트크기 : 2.5em</h1>
<h2>h2 폰트크기 : 1.875em</h2>
<p>p 폰트크기 : 0.875em</p>
<p>글꼴 크기를 백분율 및 em으로 지정하면 모든 주요 브라우저에서 동일한 크기를 표시하고 모든 브라우저에서 텍스트 크기를 조정할 수 있습니다!</p>

</body>
</html>

body요소에는 100%로 h1, h2, p요소에는 각각 2.5em, 1.875em, 0.875em 크기로 설정하였고 목적은 주요 브라우저에서 동일한 텍스트 크기를 표시하기 위해 %와 em으로 설정한다. 그 결과 화면은 아래 그림과 같다.

우리의 코드는 이제 잘 작동한다! 모든 브라우저에서 동일한 텍스트 크기를 표시하며, 모든 브라우저에서 텍스트를 확대/축소하거나 크기를 조정할 수 있다!

Responsive 폰트 크기

텍스트 크기는 "viewport width"를 의미하는 vw 단위로 설정할 수 있다.

이렇게 하면 텍스트 크기가 브라우저 창의 크기를 따른다:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h1 style="font-size:10vw;">Responsive 텍스트</h1>

<p style="font-size:5vw;">텍스트 크기 조정 방법을 확인하기 위해 브라우저 창 크기 조정.</p>

<p style="font-size:5vw;">텍스트 크기를 조정할 때 "vw" 단위를 사용합니다. 10vw는 크기를 뷰포트 너비의 10%로 설정합니다.</p>

<p>Viewport는 브라우저 창 크기입니다. 1vw = 뷰포트 너비의 1%입니다. 뷰포트 폭이 50cm인 경우 1vw는 0.5cm입니다.</p>

</body>
</html>

브라우저 창의 크기를 조절하면 그 때마다 텍스트의 크기가 브라우저 창의 크기에 따라 커지거나 줄어든다. 이와 관련 화면은 아래 그림과 같다.

Viewport는 브라우저 창 크기이다. 1vw = 뷰포트 너비의 1% 이다. 뷰포트 폭이 50cm인 경우 1vw는 0.5cm 이다.

지금까지 CSS에서 폰트 크기에 관련해서 간략히 살펴보았다.

font-size 속성에 대해서 알아보았고, 폰트 크기의 단위인 px, em, % 등을 활용하여 폰트 크기를 실습해보았다.

모두 꼭 실습하기를 추천합니다.

모두 화이팅입니다.!!!

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS 어울리는 글꼴 조합 (0)	2023.08.09
CSS google fonts (0)	2023.08.08
CSS font-style 속성 (0)	2023.08.06
CSS 예비 폰트 (0)	2023.08.05
CSS 웹 안전 폰트 (0)	2023.08.04

enjoyCoding

CSS font-size 속성