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

HTML에서 텍스트를 굵게 표시하는 방법 총정리

HTML에서 텍스트를 굵게(bold) 표시하려면 <b>...</b> 태그 또는 <strong>...</strong> 태그를 사용할 수 있습니다. 두 태그 모두 텍스트를 굵게 만든다는 동일한 시각적 결과를 제공하지만, 그 의미와 용도에는 중요한 차이가 있습니다.

<b> 태그와 <strong> 태그의 차이점

<strong> 태그는 단순히 굵게 표시하는 것을 넘어, 해당 텍스트에 의미론적(semantics)으로 강한 중요성을 부여합니다. 검색 엔진과 스크린 리더 같은 보조 기술은 이 태그를 통해 해당 내용이 문서에서 특별히 중요하다는 것을 인식합니다.

반면 <b> 태그는 물리적(physical) 마크업 요소로, 시각적으로만 텍스트를 굵게 표시할 뿐 어떠한 의미론적 중요성도 추가하지 않습니다. 따라서 특별한 강조 의미 없이 단순히 눈에 띄게 하고 싶은 텍스트에 적합합니다.

또한 HTML에서는 CSS의 font-weight 속성을 사용해도 동일한 결과를 얻을 수 있다는 점을 기억해 두세요.

HTML에서 텍스트를 굵게 표시하는 방법 총정리

예제 1: <strong> 태그 사용하기

아래 코드를 실행하여 <strong>...</strong> 태그로 텍스트를 굵게 만드는 방법을 직접 확인해 보세요.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML text bold</title>
   </head>

   <body>
      <h2>Our Products</h2>
      <p>Developed 10 <strong>Android</strong> apps till now.</p>
   </body>
</html>

위 예제에서 'Android'라는 단어가 화면에 굵게 표시되며, 브라우저와 검색 엔진은 이 부분이 중요한 내용임을 인식하게 됩니다.

예제 2: CSS font-weight 속성 사용하기

CSS의 font-weight 속성을 활용하면 HTML 구조를 변경하지 않고도 텍스트를 굵게 표시할 수 있습니다. 아래 코드를 실행해 확인해 보세요.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML text bold</title>
   </head>

   <body>
      <h1>Tutorialspoint</h1>
      <p style="font-weight: bold;">Simply Easy Learning</p>
   </body>
</html>

정리: 어떤 방법을 선택해야 할까?

  • 중요성을 강조해야 하는 경우: 경고 메시지, 핵심 키워드 등 의미 있는 강조에는 <strong> 태그를 사용하세요.
  • 단순한 시각적 강조인 경우: 딱히 의미가 없는 꾸밈 목적이라면 <b> 태그나 CSS font-weight 속성을 사용하는 것이 좋습니다.
  • 스타일 관리가 중요한 경우: 유지보수와 일관성을 고려한다면 CSS font-weight 속성으로 통일하는 것이 가장 효율적입니다.