HTML DOM의 fontWeight 속성은 요소 내 텍스트 문자의 굵기(두께)를 설정하거나, 현재 적용된 굵기 값을 반환하는 데 사용됩니다. 자바스크립트를 통해 동적으로 텍스트의 강조 정도를 조절하고 싶을 때 유용하게 활용할 수 있습니다.
구문(Syntax)
fontWeight 속성을 설정하는 기본 구문은 다음과 같습니다.
object.style.fontWeight = "normal|lighter|bold|bolder|value|initial|inherit"
속성 값 설명
사용할 수 있는 각 값의 의미는 아래 표와 같습니다.
| 값 | 설명 |
|---|---|
| normal | 기본값으로, 글꼴에 별도의 변경을 적용하지 않습니다. |
| lighter | 글꼴을 현재 상태보다 더 얇게(가볍게) 표시합니다. |
| bold | 글꼴을 굵게 설정합니다. lighter보다 두꺼운 굵기입니다. |
| bolder | 글꼴을 bold보다 더 굵게 설정합니다. |
| 100 ~ 900 | 얇은 글자부터 굵은 글자까지 단계별로 굵기를 지정할 수 있습니다. 일반(normal)은 400, 굵게(bold)는 700에 해당합니다. |
| initial | 해당 속성을 기본(initial) 값으로 되돌립니다. |
| inherit | 부모 요소의 속성 값을 그대로 상속받습니다. |
참고: 숫자 값(100~900)은 해당 글꼴이 여러 굵기를 지원할 때 특히 유용합니다. 지원하지 않는 굵기를 지정하면 브라우저가 가장 근접한 굵기로 대체하여 표시합니다.
예제
다음 예제는 버튼을 클릭하면 두 개의 div 요소 안에 있는 텍스트의 글꼴 굵기를 bold로 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo2,#demo1 {
font-family: 'times new roman';
font-size: 25px;
}
</style>
<script>
function changeFontWeight() {
document.getElementById("demo1").style.fontWeight="bold";
document.getElementById("demo2").style.fontWeight="bold";
document.getElementById("Sample").innerHTML="위 문단들의 글꼴 굵기가 변경되었습니다";
}
</script>
</head>
<body>
<div id="demo1">데모 텍스트입니다</div>
<div id="demo2">데모 텍스트입니다</div>
<p>아래 버튼을 클릭하면 위 div 안의 텍스트 굵기가 변경됩니다</p>
<button onclick="changeFontWeight()">글꼴 굵기 변경</button>
<p id="Sample"></p>
</body>
</html>
실행 결과
페이지가 처음 로드되면 다음과 같이 일반 굵기의 텍스트가 표시됩니다.
“글꼴 굵기 변경” 버튼을 클릭하면 두 문단의 텍스트가 모두 굵게 바뀌고, 아래와 같이 변경되었음을 알리는 메시지가 출력됩니다.
