HOWTO · HTML
HTML에서 굵은 텍스트 만들기
이 자습서에서는 HTML에서 굵은 텍스트를 만드는 방법을 소개합니다.
이 페이지의 내용
HTML에서 텍스트를 굵게 표시하려면 텍스트가 중요할 때는 <strong>을, 중요도를 더하지 않고 눈길을 끌고 싶을 때는 <b>를, 시각적 굵기를 조절해야 할 때는 CSS font-weight를 사용하세요. 각 방법은 의미와 모양에 서로 다르게 영향을 주므로 내용에 맞는 방법을 선택하면 됩니다. (strong)
의미상 중요한 텍스트에는 사용
주변 문맥에서 중요성, 긴급성 또는 심각성이 큰 텍스트에는 <strong>을 사용하세요. 브라우저는 일반적으로 이 요소를 기본적으로 굵게 표시하지만, 요소가 전달하는 의미는 그 스타일과 별개입니다.
<p><strong>Save your changes before closing the page.</strong></p>
스타일시트에서 모양을 바꾸더라도 문장은 여전히 중요한 내용으로 표시됩니다. 여기서는 안내 전체가 중요하므로 문장 전체를 <strong>으로 감싸세요.
이 예제를 실행하세요.
const message = "Save your changes";
console.log(`<strong>${message}</strong>`);
이 JavaScript 예제는 HTML 조각을 텍스트로 출력하며 브라우저 페이지를 렌더링하지 않습니다. 여기서는 실행하지 않았습니다.
스타일상 눈길을 끌려면 사용
중요도가 더 높다는 뜻을 전달하지 않으면서 텍스트에 눈길을 끌고 싶다면 <b>를 사용하세요. 예를 들어 독자가 주목해야 하는 핵심 용어나 레이블을 표시할 수 있습니다. <b>는 유효한 HTML 요소입니다. <strong>의 더 강한 의미보다 시선을 유도하는 표현이 적절할 때 선택하세요.
<p>Search results for <b>CSS selectors</b></p>
경고처럼 텍스트 자체가 중요한 경우에는 대신 <strong>을 선택하세요. 시각적으로 비슷하게 보일 수 있지만 의미상 목적은 다릅니다.
시각적 굵기를 조절하려면 CSS font-weight 사용
목표가 시각적 스타일 지정이라면 CSS font-weight 속성을 설정하세요. 한 번만 적용할 때는 인라인 스타일이 간편하고, 클래스는 재사용하거나 스타일시트에서 조정할 수 있습니다.
<p style="font-weight: bold;">This text is bold.</p>
<style>
.bold-text {
font-weight: bold;
}
</style>
<p class="bold-text">This text uses a reusable class.</p>
normal은 보통 굵기를 요청하고 bold는 굵은 글씨를 요청합니다. bolder와 lighter는 부모 요소를 기준으로 상대적인 굵기를 요청합니다. 실제로 렌더링되는 굵기는 글꼴에서 사용할 수 있는 서체에 따라 달라지므로, 모든 글꼴에서 이 값들이 눈에 띄게 서로 다른 굵기를 보장하지는 않습니다.
의미를 위한 HTML과 모양을 위한 CSS 결합
의미는 시맨틱 마크업으로, 모양은 CSS로 지정하세요. 특정 굵기로 표시해야 하는 중요한 텍스트라면 해당 단어를 <strong>으로 감싸고 그 요소나 요소에 적용한 클래스를 스타일링하세요.
<style>
.important {
font-weight: 700;
color: darkred;
}
</style>
<p>Before submitting, read the <strong class="important">confirmation message</strong>.</p>
여기서 <strong>은 메시지가 중요하다는 점을 나타내고, 클래스는 굵기와 색상을 조절합니다. 텍스트에 특별한 중요성이 없고 시각적 스타일만 필요한 경우에는 의미상 강조를 추가하지 말고 CSS 클래스를 적용하세요.
굵은 텍스트와 접근성
텍스트를 굵게 만드는 것은 순전히 시각적인 효과입니다. 화면 읽기 프로그램은 <b> 요소나 CSS font-weight 변경 사항을 알려 주지 않습니다. 경고, 핵심 용어, 필수 입력란처럼 굵은 텍스트가 내용을 이해하는 데 중요하다면, 보조 기술이 그 중요성을 전달할 수 있도록 <strong>으로 마크업하고, 의미를 전달할 때 굵은 텍스트에만 의존하지 마세요.