웹사이트 디자인에서 텍스트 스타일링은 사용자 경험과 가독성을 높이는 데 중요한 요소입니다. 특히 강조하고 싶은 단어나 문장은 글자를 두껍게 표시하여 시각적인 강조를 줄 수 있습니다.
이번 포스팅에서는 CSS를 사용하여 글자를 두껍게 만드는 다양한 방법을 소개하겠습니다.
1. font-weight 속성 사용하기
CSS에서 글자를 두껍게 표시할 때 가장 많이 사용하는 방법은 font-weight 속성을 사용하는 것입니다.
.bold-text {
font-weight: bold; /* 또는 700 */
}
font-weight 값 설명
- normal (기본값): 보통 두께 (일반적으로 400)
- bold: 두꺼운 글자 (일반적으로 700)
- 숫자 값 (100 ~ 900): 폰트의 두께를 세밀하게 조정할 수 있습니다. 숫자가 클수록 두꺼워집니다.
예제 코드
See the Pen font-weight 예제 by saladent (@saladent) on CodePen.
font-weight를 활용할 때는 해당 폰트가 다양한 굵기를 지원하는지 확인하세요. 일부 폰트는 bold나 숫자 값이 적용되지 않을 수 있습니다.
2. strong 및 b 태그 사용하기
HTML에서 텍스트를 두껍게 표시할 때 strong과 b 태그를 사용할 수도 있습니다.
strong 태그
strong 태그는 의미상 강조를 표현하며, 기본적으로 굵은 글자로 표시됩니다.
<p>이 문장은 <strong>강조된</strong> 텍스트입니다.</p>strong 태그는 의미상 강조를 표현하며, 기본적으로 굵은 글자로 표시됩니다.
b 태그
b 태그는 시각적인 강조만 제공하며, 의미상의 강조는 없습니다.
<p>이 문장은 <b>굵게 표시된</b> 텍스트입니다.</p>