텍스트에서 문자 사이의 간격, 즉 자간(letter spacing)을 조절하고 싶다면 JavaScript의 letterSpacing 속성을 사용하면 됩니다. 이 속성은 CSS의 letter-spacing 스타일과 동일한 역할을 하며, DOM 요소에 동적으로 적용할 수 있습니다.
기본 문법
letterSpacing 속성에는 px, em, pt 등 다양한 단위를 사용할 수 있습니다. 값이 클수록 문자 사이의 간격이 넓어집니다.
document.getElementById("요소ID").style.letterSpacing = "7px";예제
아래 코드는 버튼을 클릭하면 지정된 단락의 문자 간격을 7px로 넓히는 예제입니다. 직접 실행해 보면서 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<p id="myID">This is Demo Text.</p>
<button type="button" onclick="display()">Set Space between characters</button>
<script>
function display() {
document.getElementById("myID").style.letterSpacing = "7px";
}
</script>
</body>
</html>참고 사항
버튼을 클릭하면 display() 함수가 호출되어 id가 "myID"인 요소의 style.letterSpacing 값이 "7px"로 변경되고, 화면상에서 글자들이 일정한 간격으로 벌어지는 것을 확인할 수 있습니다. 음수 값을 지정하면 문자 간격을 좁힐 수도 있으며, "normal"을 설정하면 기본 간격으로 되돌릴 수 있습니다.