HTML에서 굵은 텍스트(볼드)를 만들려면 <b> 태그, <strong> 태그, 또는 CSS의 font-weight 속성을 사용할 수 있습니다.
웹 페이지를 디자인하다 보면 특정 문구를 눈에 띄게 강조해야 할 때가 있습니다.
예를 들어 새로운 기기의 사용 방법을 단계별로 안내하는 페이지를 만든다고 가정해 보겠습니다. 그중에서도 보안과 관련된 주의 사항은 사용자가 반드시 읽어야 하는 내용이므로, 별도로 강조해 두면 사용자가 설명서를 읽는 도중에 놓치지 않고 확인할 수 있습니다.
HTML에는 텍스트를 굵게 표시할 수 있는 기본 기능이 마련되어 있습니다. 이번 글에서는 HTML에서 텍스트를 굵게 만드는 가장 일반적인 세 가지 방법, 즉 <b> 태그, <strong> 태그, 그리고 CSS(Cascading Style Sheets)의 font-weight 속성까지 하나씩 자세히 살펴보겠습니다.
1. HTML <b> 태그
개발자들이 가장 많이 사용하는 방식은 <b> 태그입니다. <b> 태그는 웹 페이지에서 해당 텍스트를 굵게(bold) 표시하는 역할을 하며, 예를 들어 온라인 기사의 소제목을 강조할 때 유용하게 활용할 수 있습니다.
다음은 <b> 태그를 사용한 간단한 예시입니다.
<b>이 텍스트는 굵게 표시됩니다</b>
아주 간단하죠? 문단 전체가 아니라 일부분만 굵게 처리하고 싶다면 아래처럼 원하는 구간만 <b> 태그로 감싸 주면 됩니다.
<p>이 부분은 일반 텍스트입니다. <b>하지만 이 부분은 굵게 표시됩니다!</b></p>
위 코드의 실행 결과는 다음과 같습니다.
문단 시작 부분은 평소와 같이 표시되고, <b> 태그로 감싼 텍스트만 굵게 나타나는 것을 확인할 수 있습니다.
2. HTML <strong> 태그
<strong> 태그 역시 텍스트를 굵게 표시하는 데 사용됩니다. 사용 방법은 <b> 태그와 동일하지만 한 가지 중요한 차이점이 있습니다. 바로 <strong> 태그는 해당 내용이 '특별한 주의가 필요함'을 의미론적으로 나타낸다는 점입니다. 다음 예시를 살펴보겠습니다.
<p>새 컴퓨터의 사용자 이름은 <b>JohnAppleseed</b>입니다</p> <p><strong>주의!</strong> 로그인 후 반드시 비밀번호를 변경하세요.</p>
코드의 실행 결과는 다음과 같습니다.
화면에서 확인할 수 있듯이, <b> 태그는 독자가 읽어두면 좋은 정보를 눈에 띄게 하는 데 사용되었고, <strong> 태그는 '주의'라는 단어가 독자의 특별한 관심을 요한다는 것을 나타내는 데 사용되었습니다. 화면상의 표시는 같지만 의미(semantics) 면에서 차이가 있으며, 검색 엔진이나 스크린 리더는 이 차이를 인식한다는 점을 기억해 두세요.
3. CSS font-weight 속성
<strong> 태그와 <b> 태그는 HTML 문서에서 해당 텍스트가 중요하다는 사실을 알리는 용도로 사용됩니다. 반면 CSS의 font-weight 속성을 사용하면 텍스트의 굵기를 훨씬 더 세밀하게 조절할 수 있습니다.
font-weight 속성을 사용하면 특정 텍스트가 얼마나 진하게 또는 얇게 표시될지 직접 지정할 수 있습니다. 다음은 thick이라는 클래스가 적용된 문단에 font-weight 속성을 적용한 예시입니다.
HTML:
<p>일반적인 예시 문단입니다.</p> <p class="thick">굵게 표시되는 예시 문단입니다.</p>
CSS:
p.thick {
font-weight: 900;
}코드의 실행 결과는 다음과 같습니다.
위 예제에서는 thick이라는 클래스를 정의하고, 해당 클래스의 font-weight 값을 900으로 설정했습니다. 따라서 thick 클래스가 적용된 텍스트는 굵게 표시됩니다. 참고로 이 숫자 값은 원하는 굵기에 따라 자유롭게 조절할 수 있으며, 일반적으로 100~900 범위에서 숫자가 클수록 더 굵게 표시됩니다.
또는 아래와 같이 인라인 스타일로 font-weight를 직접 지정할 수도 있습니다.
<p>일반적인 예시 문단입니다.</p> <p style="font-weight:900;">굵게 표시되는 예시 문단입니다.</p>
마무리
굵은 텍스트는 HTML 텍스트 서식에서 빼놓을 수 없는 중요한 요소입니다. 특정 문장이나 몇 단어를 강조해야 할 때 텍스트를 굵게 표시하면 독자의 시선을 효과적으로 끌 수 있습니다. 이번 글에서는 텍스트를 굵게 만드는 세 가지 핵심 방법, 즉 <b> 태그, <strong> 태그, 그리고 CSS font-weight 속성을 살펴보았습니다. 각 방법의 차이를 이해하고 상황에 맞게 활용한다면, 이제 전문가처럼 굵은 텍스트를 다룰 준비가 되셨을 것입니다!