HTML DOM Style의 fontSize 속성은 웹 페이지에서 요소의 폰트 크기를 설정하거나 현재 설정된 값을 반환하는 데 사용됩니다. JavaScript를 통해 동적으로 글자 크기를 조절해야 할 때 매우 유용하게 활용할 수 있습니다.
fontSize 속성 문법
fontSize 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.fontSize = "value|initial|inherit"
속성 값 설명
fontSize 속성에 사용할 수 있는 값은 다음과 같습니다.
| 값 | 설명 |
|---|---|
| xx-small x-small small medium large x-large xx-large | xx-small부터 xx-large까지 사전에 정의된 키워드 값 중 하나를 사용하여 폰트 크기를 설정합니다. |
| smaller | 상대 단위를 기준으로 텍스트의 폰트 크기를 한 단계 줄입니다. |
| larger | 상대 단위를 기준으로 텍스트의 폰트 크기를 한 단계 키웁니다. |
| length | px, em, pt 등 유효한 길이 단위를 사용하여 폰트 크기를 지정합니다. |
| % | 부모 요소 폰트 크기에 대한 백분율(%)을 기준으로 자식 요소의 폰트 크기를 설정합니다. |
| initial | 해당 속성을 브라우저의 기본값으로 되돌립니다. |
| inherit | 부모 요소의 속성 값을 그대로 상속받습니다. |
그럼 fontSize 속성의 실제 사용 예제를 살펴보겠습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
li{
font-size: 1.1em;
background-color: snow;
font-family: cursive;
}
</style>
<script>
function changeFontSize() {
for(var i=0;i<3;i++){
document.getElementsByTagName("li")[i].style.fontSize="xx-large";
}
document.getElementById("Sample").innerHTML="위 목록의 폰트 크기가 xx-large로 변경되었습니다.";
}
</script>
</head>
<body>
<ul>
<li>첫 번째 리스트 항목입니다.</li>
<li>두 번째 리스트 항목입니다.</li>
<li>세 번째 리스트 항목입니다.</li>
</ul>
<p>아래 버튼을 클릭하면 위 목록 항목들의 폰트 크기가 변경됩니다.</p>
<button onclick="changeFontSize()">폰트 크기 변경</button>
<p id="Sample"></p>
</body>
</html>실행 결과
페이지를 처음 열면 세 개의 리스트 항목이 기본 크기(1.1em)로 표시됩니다.
이후 “폰트 크기 변경” 버튼을 클릭하면 다음과 같이 모든 리스트 항목의 폰트 크기가 xx-large로 즉시 변경되는 것을 확인할 수 있습니다.
이처럼 DOM Style의 fontSize 속성을 활용하면 버튼 클릭과 같은 사용자 이벤트에 반응하여 텍스트 크기를 실시간으로 조절할 수 있으며, 접근성 향상을 위한 글자 크기 조절 기능 구현에도 널리 활용됩니다.