HTML DOM fontVariant 속성이란?
HTML DOM의 style.fontVariant 속성은 텍스트 글꼴을 스몰캡스(small-caps) 형태로 변환할지 여부를 설정하거나, 현재 설정된 값을 반환하는 데 사용됩니다.
스몰캡스(small caps)는 모든 소문자를 대문자 모양으로 바꾸되, 크기는 원래 소문자와 동일하게 유지하는 서체 스타일입니다. 이때 기존의 대문자는 아무런 영향을 받지 않고 그대로 표시됩니다.
구문(Syntax)
fontVariant 속성을 설정하는 구문은 다음과 같습니다.
object.style.fontVariant = "normal|small-caps|initial|inherit"
속성 값 설명
| 값 | 설명 |
|---|---|
| normal | 글꼴을 일반 형태로 표시합니다. 이 값이 기본값(default)입니다. |
| small-caps | 텍스트를 작은 대문자(스몰캡스) 형태로 표시합니다. |
| initial | 해당 속성을 기본 초기값으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
예제
다음 예제는 버튼을 클릭하면 두 개의 div 요소에 포함된 텍스트의 fontVariant 속성을 small-caps로 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo2,#demo1 {
font-family: 'times new roman';
font-size: 25px;
}
</style>
<script>
function changeFontVariant() {
document.getElementById("demo1").style.fontVariant="small-caps";
document.getElementById("demo2").style.fontVariant="small-caps";
document.getElementById("Sample").innerHTML="글꼴 변형(font variant)이 small-caps로 변경되었습니다.";
}
</script>
</head>
<body>
<div id="demo1" >This is demo text</div>
<div id="demo2">This is demo text</div>
<p>아래 버튼을 클릭하면 위 div 안의 텍스트에 fontVariant 속성이 적용됩니다</p>
<button onclick="changeFontVariant()">fontVariant 변경 </button>
<p id="Sample"></p>
</body>
</html>출력 결과
위 화면에서 “fontVariant 변경” 버튼을 클릭하면 다음과 같이 두 div 요소의 텍스트가 스몰캡스 형태로 변환되고, 하단에 변경 완료 메시지가 표시됩니다.
