HTML 언볼트 텍스트

HTML 제목에서 선택한 텍스트의 굵은 글씨 스타일을 제거하려면 해당 텍스트의 CSS font-weight를 normal로 설정하세요. 바꾸려는 단어만 <span>으로 감싼 뒤 CSS 클래스로 그 span을 지정하면 됩니다. 제목은 계속 h1이나 다른 제목 요소로 유지되므로 구조와 의미상 중요도는 달라지지 않습니다. 제목 전체를 바꾸려면 제목 요소에 규칙을 적용하세요.

제목 일부의 굵은 글씨 스타일 제거

<span>은 부모 요소의 의미나 제목 수준을 바꾸지 않고 인라인 텍스트를 묶습니다. 글꼴 굵기를 보통으로 바꿀 단어만 span으로 감싸세요. span 바깥의 텍스트에는 제목의 다른 스타일이 그대로 적용됩니다. 반복해서 사용할 변경이라면 span에 클래스를 추가하고, 문서의 스타일시트나 <head> 안의 <style> 요소에 해당 클래스를 정의하세요.

선택한 텍스트에 CSS 클래스 사용

다음 JavaScript 예제는 클래스 규칙과 제목이 포함된 완전한 HTML 조각을 생성하도록 작성되었습니다. 생성된 내용을 페이지 마크업으로 사용한 다음 제목과 선택한 단어를 바꾸세요. .not-bold 선택자는 해당 클래스가 지정된 span만 대상으로 하므로 다른 span의 기존 스타일은 유지됩니다.

이 예제를 실행해 클래스 기반 페이지 조각을 생성하세요. 코드 블록과 그 안에 표시되는 문구는 바이트 단위로 보존되므로 영어로 남습니다.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

const page = `<style>
.not-bold { font-weight: normal; }
</style>
<h1>Keep this bold; <span class="not-bold">make these words normal weight</span></h1>`;
console.log(page);

<style>
.not-bold { font-weight: normal; }
</style>
<h1>Keep this bold; <span class="not-bold">make these words normal weight</span></h1>

같은 시각적 처리가 필요한 곳마다 이 클래스를 사용하세요. 선택한 텍스트만 바꿔야 한다면 범위가 넓은 span 선택자는 피하는 편이 좋습니다. 이 선택자는 적용 범위 안의 모든 span을 대상으로 하므로, 관련 없는 콘텐츠의 span까지 포함할 수 있습니다. 클래스를 사용하면 대상이 명확해지고 페이지가 커져도 의도하지 않은 변경을 줄일 수 있습니다.

한 번만 적용할 때 인라인 CSS 사용

한 곳만 바꾸려면 span의 HTML style 속성에 선언을 넣으세요: <span style="font-weight: normal">selected words</span>. 변경이 한 번뿐일 때는 빠르지만, 표현 방식이 해당 요소에 직접 연결되므로 클래스보다 재사용하기 어렵습니다. 제목의 나머지 부분 스타일은 유지되도록 선언을 span에만 적용하세요. 여러 요소에 같은 처리가 필요하면 선언을 클래스 규칙으로 옮기세요.

제목 전체의 굵은 글씨 스타일 제거

제목 전체를 바꾸려면 제목 요소 자체에 font-weight: normal을 설정하세요. 예를 들면 다음과 같습니다: <h1 style="font-weight: normal">A normal-weight heading</h1>. 이 규칙은 제목 안의 인라인 콘텐츠를 포함해 모든 텍스트에 적용됩니다. 여러 제목이나 페이지에 같은 처리를 적용하려면 인라인 style 속성 대신 스타일시트 규칙을 사용하세요. 시각적인 굵기를 바꿔도 제목 수준이나 문서 개요에서의 역할은 달라지지 않습니다. 예제 코드와 그 안에 표시되는 텍스트는 변경 없이 영어로 남습니다.

방법을 선택하고 결과 확인

선택한 텍스트에 반복해서 적용할 규칙이 필요하면 클래스를, span 한 곳만 바꾸려면 인라인 CSS를, 제목 전체를 바꾸려면 제목 규칙을 사용하세요. 규칙을 적용한 뒤 렌더링된 페이지를 살펴보고 클래스가 의도한 span에 지정되어 있는지, CSS 선택자가 그 span과 일치하는지 확인하세요. 텍스트가 계속 굵게 보이면 페이지 스타일시트의 다른 적용 가능한 스타일도 확인하세요. 더 구체적인 규칙이나 뒤에 선언된 규칙이 영향을 줄 수 있습니다. 브라우저 개발자 도구에서 계산된 font-weight를 확인하면 선택자가 대상을 놓쳤는지, 다른 규칙이 표시되는 굵기를 결정하는지 파악하는 데 도움이 됩니다.