HTML DOM Style lineHeight 속성이란?
HTML DOM Style의 lineHeight 속성은 텍스트에서 줄과 줄 사이의 간격, 즉 행 높이(line height)를 설정하거나 현재 값을 반환하는 데 사용됩니다. 문단의 가독성을 조절하거나 디자인 의도에 맞게 텍스트 배치를 다듬을 때 유용하게 활용할 수 있습니다.
구문(Syntax)
lineHeight 속성의 현재 값을 가져오려면 다음과 같이 작성합니다.
object.style.lineHeight
lineHeight 속성을 새로 설정하려면 다음 구문을 사용합니다.
object.style.lineHeight = "normal|number|length|%|initial|inherit"
속성 값 설명
- normal: 일반적인 행 높이를 적용합니다. 기본값입니다.
- number: 현재 글꼴 크기에 곱해지는 숫자 값으로 행 높이를 설정합니다. 예를 들어 2를 지정하면 글꼴 크기의 2배가 됩니다.
- length: px, em 등 길이 단위로 행 높이를 지정합니다.
- %: 현재 글꼴 크기를 기준으로 하는 백분율(%) 값으로 행 높이를 지정합니다.
- initial: 이 속성을 기본값으로 되돌립니다.
- inherit: 부모 요소로부터 이 속성 값을 상속받습니다.
참고로, 단위 없는 숫자(number) 방식으로 지정하면 하위 요소들이 자신의 글꼴 크기에 맞춰 행 높이를 상대적으로 계산하기 때문에 실무에서 가장 권장되는 방식입니다.
이제 DOM Style lineHeight 속성을 실제로 구현한 예제를 살펴보겠습니다.
예제
<!DOCTYPE html>
<html>
<body>
<h2>데모 제목</h2>
<div id="myid">
여기에는 데모 텍스트가 들어갑니다. 여기에는 데모 텍스트가 들어갑니다. 여기에는 데모 텍스트가 들어갑니다.
여기에는 데모 텍스트가 들어갑니다. 여기에는 데모 텍스트가 들어갑니다. 여기에는 데모 텍스트가 들어갑니다.
여기에는 데모 텍스트가 들어갑니다. 여기에는 데모 텍스트가 들어갑니다. 여기에는 데모 텍스트가 들어갑니다.
여기에는 데모 텍스트가 들어갑니다. 여기에는 데모 텍스트가 들어갑니다. 여기에는 데모 텍스트가 들어갑니다.
</div>
<br>
<button type="button" onclick="display()">클릭하면 행 높이가 늘어납니다</button>
<script>
function display() {
document.getElementById("myid").style.lineHeight = "3";
}
</script>
</body>
</html>
실행 결과
페이지를 처음 열었을 때의 화면은 아래와 같습니다.
버튼을 클릭하면 div 영역의 행 높이가 현재 글꼴 크기의 3배로 변경되어 텍스트 줄 간격이 눈에 띄게 넓어집니다.
