웹 페이지에서 텍스트의 가독성을 높이려면 줄 높이(행간) 조절이 필수적입니다. CSS에서는 line-height 속성을 사용하여 텍스트 줄 사이의 간격을 손쉽게 설정할 수 있습니다.
line-height 속성 값
line-height 속성에 사용할 수 있는 값은 다음과 같습니다.
line-height: normal|number|length|initial|inherit;
- normal – 브라우저 기본값으로, 일반적인 줄 높이를 적용합니다.
- number – 숫자 값(예: 1.9)을 지정하면 현재 글꼴 크기에 해당 배수만큼 줄 높이가 설정됩니다.
- length – px, em 등 고정 단위로 줄 높이를 지정합니다.
- % – 백분율(예: 200%)로 지정하면 글꼴 크기를 기준으로 줄 높이가 계산됩니다.
- initial – 속성을 기본값으로 되돌립니다.
- inherit – 부모 요소의 줄 높이 값을 상속받습니다.
예제 1: 숫자 값 사용하기
아래 예제는 숫자 값 1.9를 사용해 div 요소 내부 텍스트의 줄 높이를 설정한 것입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
line-height: 1.9;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>This is demo text.<br>
This is another demo text.
</p>
</div>
</body>
</html>실행 결과
예제 2: 백분율(%) 값 사용하기
다음 예제는 백분율 값 200%를 사용하여 줄 높이를 설정한 것입니다. 글꼴 크기의 2배에 해당하는 간격이 적용됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
line-height: 200%;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>This is demo text.<br>
This is another demo text.
</p>
</div>
</body>
</html>실행 결과
마무리
line-height 속성은 숫자, 길이 단위, 백분율 등 다양한 방식으로 지정할 수 있으며, 일반적으로는 숫자 값(단위 없는 배수)을 사용하는 것이 반응형 웹 디자인에서 권장됩니다. 적절한 줄 높이를 활용하면 문서의 가독성이 크게 향상됩니다.