CSS에서 텍스트를 굵게 표시하려면 font-weight 속성을 사용해야 합니다. font-weight 속성은 폰트의 "굵기(weight)"를 결정하며, 화면에 표시되는 텍스트가 얼마나 진하게 보이는지를 좌우합니다. 키워드나 숫자 값을 사용해 특정 텍스트가 얼마나 굵게 표시될지 CSS에 지시할 수 있습니다.
웹사이트를 레이아웃하다 보면 방문자의 시선을 끌고 싶은 요소가 생기기 마련입니다. 시선을 사로잡는 방법은 여러 가지가 있지만, 가장 기본적인 방법은 강조하고 싶은 텍스트의 font-weight(글자 굵기)를 높이는 것입니다. 즉, 텍스트를 굵은 글씨로 만드는 것이죠.
이번 글에서는 font-weight 속성이 무엇인지, 어떻게 설정하는지, 그리고 사용할 수 있는 다양한 값들을 예시와 함께 살펴보겠습니다.
CSS Bold: font-weight 가이드
font-weight 속성은 화면에 표시되는 텍스트가 얼마나 굵게 나타날지를 설정합니다. 키워드 또는 숫자 값을 사용해 특정 텍스트의 굵기를 지정할 수 있습니다.
CSS font-weight 속성의 기본 문법은 다음과 같습니다:
font-weight: weightOfFont;
weightOfFont 자리에는 스타일을 적용할 요소에 사용하고 싶은 폰트의 굵기 값을 넣습니다.
font-weight 속성은 요소에 적용하려는 굵기에 따라 여러 가지 값을 받을 수 있습니다.
CSS Bold 스케일 이해하기
사용하는 font-family(폰트 계열)를 굵기 100부터 1000까지의 눈금이 있는 저울이라고 생각해 보세요. 숫자가 클수록 폰트가 더 굵어집니다.
프로젝트에 적용하기 전에 선호하는 폰트 계열을 미리 조사해 두는 것이 좋습니다. 일부 폰트 계열은 전체 굵기 범위를 모두 지원하지 않기 때문입니다. 폰트를 미리 확인하면 사이트에서 원하는 만큼 얇거나 굵은 결과물을 얻을 수 있습니다.
다음 코드는 'Arial'이라는 대중적인 폰트가 숫자 값과 키워드를 사용했을 때 각각 얼마나 얇아지고 굵어질 수 있는지 보여줍니다:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-weight 예제</title>
<style>
body {
font-family: 'Arial';
font-size: 3rem;
}
span {
font-size: 1.5rem;
}
p:nth-child(1) { font-weight: normal; }
p:nth-child(2) { font-weight: bold; }
p:nth-child(3) span { font-weight: bolder; }
p:nth-child(4) span { font-weight: lighter; }
p:nth-child(5) { font-weight: 100; }
p:nth-child(6) { font-weight: 200; }
p:nth-child(7) { font-weight: 300; }
p:nth-child(8) { font-weight: 400; }
p:nth-child(9) { font-weight: 500; }
p:nth-child(10) { font-weight: 600; }
p:nth-child(11) { font-weight: 700; }
p:nth-child(12) { font-weight: 800; }
p:nth-child(13) { font-weight: 900; }
</style>
</head>
<body>
<p>Hello World! <span>-- Normal</span></p>
<p>Hello World! <span>-- Bold</span></p>
<p>Hello World! <span>-- Bolder (부모보다 굵음)</span></p>
<p>Hello World! <span>-- Lighter (부모보다 얇음)</span></p>
<p>Hello World! <span>-- 100</span></p>
<p>Hello World! <span>-- 200</span></p>
<p>Hello World! <span>-- 300</span></p>
<p>Hello World! <span>-- 400 'normal'</span></p>
<p>Hello World! <span>-- 500</span></p>
<p>Hello World! <span>-- 600</span></p>
<p>Hello World! <span>-- 700 'bold'</span></p>
<p>Hello World! <span>-- 800</span></p>
<p>Hello World! <span>-- 900</span></p>
</body>
</html>
lighter와 bolder는 실제로 무슨 의미일까?
여기서 반드시 짚고 넘어가야 할 중요한 점이 있습니다. lighter와 bolder는 문자 그대로 해석되는 값이 아니라는 것입니다. 즉, bolder가 "bold보다 더 굵은"이라는 뜻은 아닙니다.
bolder와 lighter는 부모 요소를 기준으로 한 상대적인 굵기를 의미합니다. 자식 요소를 bolder로 설정하면 부모보다 한 단계 굵은 상대적 font-weight가 적용되고, lighter는 그 반대로 작동합니다.
상대적 font-weight와 실제 font-weight의 매핑 관계는 다음 표와 같습니다:
| 상대적 font-weight | 실제 font-weight |
|---|---|
| thin | 100 |
| normal | 400 |
| bold | 700 |
| heavy | 900 |
예를 들어, font-weight: bold를 사용하면 해당 텍스트의 굵기가 800으로 설정됩니다. 자식 요소가 부모보다 한 단계 굵은 상대적 굵기를 가질 때는 위 표를 참조해 실제 굵기가 결정됩니다.
구체적인 예를 들어볼까요? 부모 요소의 font-weight가 400인 자식 요소에 bolder 값을 설정하면, 자식 요소의 font-weight는 700이 됩니다.
이는 자식 요소가 부모보다 한 단계 어두운(굵은) 상대적 굵기를 갖기 때문입니다. 단, 부모 요소가 이미 가장 굵거나 가장 얇은 상태라면 bolder나 lighter 값은 아무런 변화도 만들어내지 못합니다.
CSS font-weight 실전 예제
시애틀 우표 동호회(The Seattle Stamp Club) 웹사이트를 디자인한다고 가정해 봅시다. 동호회 측에서는 About 페이지의 About Us 제목을 굵게 표시해 방문자의 시선을 끌어 달라고 요청했습니다.
또한 동호회의 역사를 담은 텍스트 블록도 추가해야 합니다. 이 텍스트는 기본 굵기(normal)로 표시하되, 회원들의 관심을 끌고 싶은 특정 문구만 굵게 강조해야 합니다.
다음 코드를 사용하면 특정 문구만 굵게 처리한 텍스트 블록을 만들 수 있습니다:
<html>
<p>2009년에 설립된 시애틀 우표 동호회는 우표 수집을 장려하고 홍보하는 커뮤니티입니다.
동호회는 <span>누구든 환영합니다</span>, 초보자부터 전문가까지요.
매달 열리는 정기 모임에서 회원들은 서로의 우표를 감상하고, 우표 소식을 나누며,
공통의 취미로 유대감을 쌓습니다. 현재 동호회에는 <span>250명의 회원</span>이 있습니다.</p>
<style>
span {
font-weight: bolder;
}
</style>
</html>
HTML 파일에서는 <p> 태그로 감싼 문단을 정의하고, CSS로 굵게 만들 문구들은 <span> 태그로 감쌌습니다.
그다음 CSS 파일에서는 모든 <span> 태그의 font-weight를 bolder로 설정하는 스타일 규칙을 정의했습니다. 이렇게 하면 <span> 태그 안의 텍스트는 부모 요소보다 굵게 표시됩니다.
코드를 실행하면 문단 전체는 기본 굵기로 표시되고, <span> 태그로 감싼 문구만 굵게 나타납니다. 이 예제에서는 누구든 환영합니다와 250명의 회원이라는 두 문구가 <span> 태그로 감싸져 있죠.
가변 폰트(Variable Fonts)와 CSS Bold
최신 CSS Fonts 명세에서는 가변 폰트(variable fonts)라는 새로운 종류의 폰트를 사용할 수 있습니다. 가변 폰트는 1부터 1000 사이의 임의의 숫자를 font-weight 값으로 가질 수 있는 폰트입니다. 브라우저 지원은 2020년 5월에야 완전히 구현되었기 때문에 비교적 최신 기술에 속합니다. 가변 폰트에 대해 더 알고 싶다면 관련 입문 자료를 참고해 보세요.
결론
이번 튜토리얼에서는 CSS font-weight 속성과 이 속성이 폰트의 굵기에 미치는 영향에 대해 알아보았습니다.
핵심을 정리하면 다음과 같습니다. bolder와 lighter는 부모 요소의 font-weight를 기준으로 한 단계 차이 나는 상대적 굵기를 의미합니다. 또한 100부터 900까지 다양한 font-weight 값을 직접 적용해 보면서 텍스트가 어떻게 변하는지 확인했습니다. 이제 font-weight를 활용한 폰트 스타일링은 어렵지 않게 느껴질 것입니다!
CSS 학습을 더 깊이 있게 진행하고 싶다면 CSS 학습 로드맵 가이드를 참고하세요. CSS 없이 HTML만으로 텍스트를 굵게 만드는 방법이 궁금하다면 HTML 볼드 텍스트 가이드도 함께 살펴보시길 추천합니다.