[HTML/CSS] 텍스트 줄간격 설정하기 (line-height)

 

CSS의 line-height 속성을 지정하여

텍스트의 줄간격(줄 높이)을 지정할 수 있습니다.

 

 

line-height

CSS의 line-height  속성은

텍스트 라인의 높이를 지정합니다.

주로, 줄간격을 지정하는데 많이 사용됩니다.

 

  허용 값  

• number - 해당 element의 폰트 사이즈를 기준으로 계산됩니다. ex) 폰트 사이즈 * number
• length - px, em 등의 단위를 사용합니다.
• percentage - 폰트 사이즈를 기준으로 계산됩니다. ex) 폰트사이즈 * percentage / 100
• keyword "normal" - 브라우저에 지정된 값으로 설정됩니다.

 

• 위 허용 값들 중 'number'를 사용하기를 추천합니다.

 

 

줄간격 설정하기

<p class='normal'> default 기본값 default 기본값 default 기본값 default 기본값 default 기본값 default 기본값 default 기본값 default 기본값 default 기본값 default 기본값 default 기본값 </p>
<p class='number'> number 단위없는 숫자 number 단위없는 숫자 number 단위없는 숫자 number 단위없는 숫자 number 단위없는 숫자 number 단위없는 숫자 number 단위없는 숫자 number 단위없는 숫자 </p>
<p class='percentage'> percentage 퍼센트 percentage 퍼센트 percentage 퍼센트 percentage 퍼센트 percentage 퍼센트 percentage 퍼센트 percentage 퍼센트 percentage 퍼센트 percentage 퍼센트 </p>

.normal {
  font-size: 12px;
  line-height: normal;
}

.number {
  font-size: 12px;
  line-height: 2.1;
}

.percentage {
  font-size: 12px;
  line-height: 210%;
}

 

 

line-height: normal;

브라우저의 기본 설정값을 사용합니다.

 

line-height: 2.1;

지정된 폰트 사이즈(12xp)의 2.1배인 25.2px를 줄간격으로 지정합니다.

 

line-height: 210%;

지정된 폰트 사이즈(12px)의 210%인 25.2px를 줄간격으로 설정합니다.

 

 

 

number와 percentage의 차이

<div class='number_div'>
  <p class='inner_p'> number 단위없는 숫자 number 단위없는 숫자 number 단위없는 숫자 number 단위없는 숫자 number 단위없는 숫자 number 단위없는 숫자 number 단위없는 숫자 number 단위없는 숫자 </p>
</div>
<div class='percentage_div'>
  <p class='inner_p'> percentage 퍼센트 percentage 퍼센트 percentage 퍼센트 percentage 퍼센트 percentage 퍼센트 percentage 퍼센트 percentage 퍼센트 percentage 퍼센트 percentage 퍼센트 </p>
</div>

.number_div {
  font-size: 12px;
  line-height: 2;
}

.percentage_div {
  font-size: 12px;
  line-height: 200%;
}

.inner_p {
  font-size: 27px;
}

 

line-height를

단위 없는 숫자(number)로 지정하는 것과

퍼센트로 지정하는 것의 차이를 알아보기 위한 예시입니다.

 

'number_div'와 'percentage_div'는 자식으로 'inner_p' 클래스를 가지고 있습니다.

여기서 line-height 속성은

텍스트를 가지는 'inner_p' 클래스가 아닌

상위 요소인 'number_div'와 'percenatge_div'에 지정되어 있습니다.

• number_div : line-height 값이 number로 지정됨(단위 없는 숫자)
• percentage_div : line-height 값이 퍼센트로 지정됨

그리고, 자식 요소인 'inner_p' 클래스는 폰트의 사이즈만 27px로 재정의 하고 있습니다.

 

이 예제에서는, 상위 클래스에서 line-height 값이 동일하게 2, 200%로 동일하게 지정되었음에도

하위 요소의 줄간격은 다르게 나타나고 있습니다.

 

line-height 값을 number로 지정하면,

하위 요소에 line-height가 적용될 때,

line-height 값 자체가 하위 요소에 상속되어

하위 요소의 폰트 사이즈에 따라서 줄 높이가 변경됩니다.

위 예제에서는, 하위 요소의 폰트 사이즈가 27px이므로, 줄 높이가 '27px * 2 =  54px'이 되었습니다.

 

line-height 값을 퍼센트로 지정하면,

하위 요소에 line-height가 적용될 때,

상위에서 이미 계산된 줄높이가 상속되어 적용됩니다.

위 예제에서는, line-height가 지정된 'percentage_div' 요소의 줄 높이인 '24px(12px * 200 / 100)'이

자식 요소인 'inner_p' 요소에 상속되어 적용됩니다.

 

이런 차이 때문에,

line-height 값을 퍼센트로 사용하면 가끔 예상하지 못한 결과가 나오기도 합니다.

따라서, 가능하면 line-height  값은 number로 지정하는 것이 좋다고 합니다.