텍스트를 작은 대문자(small capital letters) 형태로 표시하고 싶다면 JavaScript에서 fontVariant 속성을 사용하면 됩니다. 이 속성에 "small-caps" 값을 설정하면 소문자가 크기가 작은 대문자로 변환되어 화면에 나타납니다.
fontVariant 속성이란?
fontVariant는 CSS의 font-variant 스타일을 JavaScript로 제어할 수 있게 해주는 DOM 속성입니다. 주요 값은 다음과 같습니다.
- normal: 기본값으로, 일반적인 글자 형태로 표시합니다.
- small-caps: 소문자를 크기가 작은 대문자(small capitals)로 표시합니다.
예제
아래 코드를 실행하면 버튼을 클릭했을 때 지정한 문단의 글꼴이 Verdana로 변경되고, 동시에 작은 대문자(small-caps) 스타일이 적용됩니다.
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<p id="myID">
This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text.
This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text.
</p>
<button type="button" onclick="display()">Set Font Family and Font Variant</button>
<script>
function display() {
document.getElementById("myID").style.fontFamily = "verdana,sans-serif";
document.getElementById("myID").style.fontVariant = "small-caps";
}
</script>
</body>
</html>코드 설명
버튼을 클릭하면 display() 함수가 호출되어 다음 두 가지 작업이 수행됩니다.
style.fontFamily를 통해 해당 문단의 글꼴을 Verdana(백업용 sans-serif 포함)로 변경합니다.style.fontVariant를"small-caps"로 설정하여 모든 소문자를 작은 대문자 형태로 렌더링합니다.
이처럼 fontVariant 속성을 활용하면 별도의 CSS 수정 없이 JavaScript만으로 텍스트의 대소문자 표기 스타일을 동적으로 제어할 수 있습니다.