글꼴과 관련된 모든 속성(fontStyle, fontVariant, fontWeight, fontSize, lineHeight, fontFamily)을 개별적으로 설정하는 대신, JavaScript의 font 단축 속성을 사용하면 하나의 선언만으로 한 번에 지정할 수 있습니다.
font 단축 속성이란?
CSS의 font 속성은 여러 글꼴 관련 하위 속성을 묶어 처리하는 단축 속성(shorthand)입니다. JavaScript에서는 element.style.font 형태로 접근하여 사용합니다.
단축 속성 작성 시 기본 문법은 다음과 같습니다.
font: style variant weight size/lineHeight family;
이 중 fontSize와 fontFamily는 반드시 포함해야 하며, 나머지 값은 선택 사항입니다. 생략한 항목은 기본값으로 초기화되므로 주의가 필요합니다.
예제 코드
아래 예제는 버튼을 클릭하면 특정 문단의 글꼴 스타일을 한 번에 변경하는 코드입니다.
<!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</button>
<script>
function display() {
document.getElementById("myID").style.font = "italic 15px verdana,sans-serif";
}
</script>
</body>
</html>코드 설명
위 예제에서 display() 함수는 document.getElementById("myID")를 통해 id가 myID인 문단 요소를 가져온 뒤, style.font 속성에 "italic 15px verdana,sans-serif" 값을 할당합니다.
- italic – fontStyle(기울임꼴) 지정
- 15px – fontSize(글자 크기) 지정
- verdana, sans-serif – fontFamily(글꼴 종류) 지정
버튼을 클릭하면 해당 문단 전체가 기울임꼴 Verdana 서체, 15px 크기로 즉시 변경됩니다. 이처럼 font 단축 속성을 활용하면 여러 줄의 코드를 한 줄로 줄여 코드의 가독성과 유지보수성을 높일 수 있습니다.