HTML DOM의 letterSpacing 속성은 텍스트 내 문자 사이의 간격(자간)을 설정하거나 가져오는 데 사용됩니다. 이 속성을 활용하면 자바스크립트를 통해 동적으로 글자 간격을 조절할 수 있어, 다양한 타이포그래피 효과를 구현할 때 유용합니다.
문법(Syntax)
letterSpacing 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.letterSpacing = "normal|length|initial|inherit"
속성 값 설명
| 값 | 설명 |
|---|---|
| normal | 기본값으로, 문자 간격을 일반적인 상태로 설정합니다. |
| length | px, em 등 길이 단위로 자간을 지정합니다. 음수 값도 허용되어 문자를 더 좁게 배치할 수 있습니다. |
| initial | 해당 속성을 초기(default) 값으로 되돌립니다. |
| inherit | 부모 요소의 letterSpacing 값을 상속받습니다. |
예제 코드
다음 예제는 버튼을 클릭하면 문단의 자간이 넓어지도록 letterSpacing 속성을 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<script>
function changeSpacing() {
document.getElementById("myP").style.letterSpacing = "12px";
document.getElementById("Sample").innerHTML = "이제 문자 사이의 간격이 넓어졌습니다";
}
</script>
</head>
<body>
<p id="myP">샘플 문단 안에 있는 텍스트입니다. 문단의 두 번째 줄입니다. 문단의 세 번째 줄입니다.</p>
<p>아래 버튼을 클릭하면 위 문단의 문자 간격이 넓어집니다</p>
<button type="button" onclick="changeSpacing()">자간 넓히기</button>
<p id="Sample"></p>
</body>
</html>
실행 결과
페이지를 처음 열면 기본 자간으로 텍스트가 표시됩니다.
“자간 넓히기(Increase Letter Spacing)” 버튼을 클릭하면 다음과 같이 문자 사이의 간격이 12px만큼 늘어납니다.
정리
letterSpacing 속성은 CSS의 letter-spacing 속성을 자바스크립트로 제어할 수 있게 해주는 DOM 스타일 속성입니다. normal, length(px·em·pt 등), initial, inherit 네 가지 값을 지원하며, 특히 length 값에 음수를 사용하면 자간을 좁힐 수도 있습니다. 버튼 클릭 같은 사용자 이벤트와 함께 활용하면 텍스트 강조나 시각적 효과를 동적으로 연출하는 데 매우 유용합니다.