텍스트 줄의 높이는 CSS의 line-height 속성으로 정의할 수 있습니다. 이 속성은 양수 값만 허용하며, 단위 없는 숫자, 백분율(%), px·em 등의 길이 단위 등 다양한 방식으로 지정할 수 있습니다. 줄 높이를 적절히 조절하면 텍스트의 가독성과 디자인 완성도를 크게 높일 수 있습니다.
구문
CSS line-height 속성의 기본 구문은 다음과 같습니다.
Selector {
line-height: /*value*/
}예제 1
다음 예제는 요소별로 서로 다른 line-height 값을 적용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div * {
margin: 1.5em;
box-shadow: -13px -10px 10px 1px crimson;
}
#demo {
line-height: 60%;
}
p {
box-shadow: 13px -10px 10px 1px grey;
line-height: 50px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>
<p>This is demo text one.</p>
<div>This is demo text two.</div>
<div id="demo">This is demo text three.</div>
</div>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제 2
다음 예제는 소수점 숫자 값을 사용해 원형 요소 안에서 텍스트의 줄 높이를 조절하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div * {
margin: auto;
padding: 3em;
}
p {
height: 100px;
width: 100px;
border: thin solid;
border-radius: 50%;
box-shadow: 0 20px 10px 1px grey;
line-height: 0.6;
}
</style>
</head>
<body>
<h2>What is C#?</h2>
<div>
<p>C# is a strongly-typed language. Every variable and constant has a type, as does every expression that evaluates to a value.</p>
</div>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
