JavaScript로 텍스트 줄 간격 설정하기
텍스트에서 줄 사이의 거리, 즉 행간을 설정하려면 lineHeight 속성을 사용하면 됩니다. 이 속성은 CSS의 line-height와 동일한 방식으로 작동하며, 단위 없는 숫자를 지정하면 해당 요소의 글꼴 크기를 기준으로 한 배수로 적용됩니다.
예를 들어 값이 "2"라면 기본 행 높이의 두 배가 되어 텍스트 줄 사이가 훨씬 넓어지고, "1"보다 작은 값을 지정하면 줄이 서로 붙어 좁게 표시됩니다.
예제
아래 코드는 버튼을 클릭하면 문단의 줄 간격이 변경되는 간단한 예제입니다. 직접 실행해 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<p id="myID">This is Demo Text.<br>This is Demo Text<br>This is Demo Text</p>
<button type="button" onclick="display()">Set distance between lines</button>
<script>
function display() {
document.getElementById("myID").style.lineHeight = "2";
}
</script>
</body>
</html>코드 설명
document.getElementById("myID")— id가 "myID"인 문단 요소를 가져옵니다..style.lineHeight = "2"— 해당 요소의 줄 간격을 글꼴 크기의 2배로 설정합니다.- 버튼 클릭 시
display()함수가 호출되어 화면에 즉시 반영됩니다.
참고: 사용할 수 있는 값
lineHeight 속성에는 단위 없는 숫자 외에도 다양한 단위를 사용할 수 있습니다.
- 숫자(배수) : "2" → 글꼴 크기의 2배
- 픽셀(px) : "30px" → 줄 높이를 고정된 픽셀 값으로 지정
- 백분율(%) : "150%" → 글꼴 크기의 150%에 해당하는 줄 간격
반응형 웹 페이지에서는 글꼴 크기 변화에 따라 자동으로 조절되는 단위 없는 숫자 값을 사용하는 것이 일반적으로 권장됩니다.