CSS에서 줄 간격 설정

CSS에서 줄 간격을 설정하는 몇 가지 방법을 소개합니다.

line-height 속성을 사용하여 CSS에서 줄 간격 설정

CSS line-height 속성을 사용하여 단락에서 줄 사이의 간격을 정의할 수 있습니다. 속성은 선의 높이를 설정합니다.

선 높이를 정의하는 동안 선 사이의 공간이 그에 따라 늘어나거나 줄어듭니다. line-height 속성을 텍스트 요소, 특히 단락에 적용할 수 있습니다.

속성은 normal, number, length, %, initial 및 inherit와 같은 다른 값을 사용합니다. 이 기사에서 이러한 다양한 옵션의 사용법을 보여줍니다.

normal 값은 line-height 속성의 기본값입니다. 일반 라인 높이를 설정합니다.

값을 단위 없는 number로 설정할 수 있습니다. 주어진 숫자에 현재 글꼴 크기가 곱해지고 line-height를 설정하는 데 사용됩니다. 숫자 1.6은 line-height 속성의 권장 값입니다.

length 값을 사용하여 pt, px, cm 등과 같은 단위를 지정할 수도 있습니다. %의 값은 line-height를 설정하기 위해 현재 글꼴 크기의 백분율을 지정합니다.

initial 값을 사용하여 line-height 속성의 기본값을 설정할 수 있습니다. inherit 값은 상위 요소의 속성과 동일한 값을 사용합니다.

예를 들어 HTML에서 normal, number, percentage 및 length 클래스를 사용하여 4개의 div를 만듭니다. div 안에 더미 텍스트를 작성하십시오.

그런 다음 CSS에서 div 요소를 선택하고 width 속성을 400px로, word-wrap 속성을 break-word로 설정합니다. 다음으로, 클래스 이름이 있는 div 개체를 선택하고 line-height 속성 값을 아래 예제와 같이 클래스 이름에 따라 normal, 2, 80%, 10px로 설정합니다.

div 너비와 word-wrap 속성을 break-word로 설정하여 텍스트를 다음 줄로 강제 설정합니다. 이런 식으로 line-height 속성을 사용하여 CSS에서 줄 간격을 설정할 수 있습니다.

예제 코드:

<h2>Normal Value</h2>
<div class="normal">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio. </div>

<h2>Number Value </h2>
<div class="number">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>

<h2>Percentage Value</h2>
<div class="percentage">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>

<h2>Length Value</h2>
<div class="length">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>

div{
 width:400px;
 word-wrap: break-word;
}
div.normal {
 line-height: normal;
}

div.number {
 line-height: 2;
}

div.percentage {
 line-height: 80%;
}

div.length {
 line-height: 10px;
}