HTML DOM의 fontStyle 속성은 텍스트의 글꼴 스타일을 설정하거나 현재 설정된 값을 반환하는 데 사용됩니다. 이 속성을 활용하면 특정 요소의 텍스트를 normal(보통), italic(이탤릭), oblique(기울임) 스타일로 지정할 수 있습니다.
fontStyle 속성 문법
fontStyle 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.fontStyle = "normal|italic|oblique|initial|inherit"
사용 가능한 값
- normal – 기본적인 보통 글꼴 스타일을 적용합니다.
- italic – 이탤릭체(기울어진 서체)를 적용합니다.
- oblique – 일반 글꼴을 기울여 표시합니다.
- initial – 해당 속성을 기본값으로 되돌립니다.
- inherit – 부모 요소의 글꼴 스타일을 상속받습니다.
fontStyle 속성 활용 예제
다음 예제는 버튼을 클릭하면 두 개의 div 요소 텍스트가 이탤릭체로 변경되는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo2,#demo1 {
font-family: 'times new roman';
font-size: 25px;
}
</style>
<script>
function changeFontStyle() {
document.getElementById("demo1").style.fontStyle="italic";
document.getElementById("demo2").style.fontStyle="italic";
document.getElementById("Sample").innerHTML="위 단락들의 글꼴 스타일이 변경되었습니다.";
}
</script>
</head>
<body>
<div id="demo1" >데모 텍스트 1입니다</div>
<div id="demo2">데모 텍스트 2입니다</div>
<p>아래 버튼을 클릭하면 위 div 요소들의 글꼴 스타일이 변경됩니다</p>
<button onclick="changeFontStyle()">fontStyle 변경</button>
<p id="Sample"></p>
</body>
</html>실행 결과
페이지를 처음 열면 두 개의 데모 텍스트가 보통 스타일로 표시됩니다.
이후 “fontStyle 변경” 버튼을 클릭하면 다음과 같이 두 단락의 텍스트가 이탤릭체로 바뀌는 것을 확인할 수 있습니다.
정리
fontStyle 속성은 자바스크립트를 통해 동적으로 텍스트 스타일을 제어할 때 유용하게 사용됩니다. 버튼 클릭, 마우스 오버 등 다양한 이벤트와 결합하면 사용자 인터랙션에 따라 글꼴 스타일을 자유롭게 변경할 수 있습니다.