CSS속성_line-height(행간)

장문의 글에서는 가독성을 위해서 글 사이의 간격을 띄우기도 합니다.

이때 행간을 조정한다고 하는데요.

line-height 속성을 이용해 이 행간을 조정할 수 있습니다.

그러나 정확하게 line-height는 줄의 높이를 의미하는 것이고, 이를 이용해서

행간을 조정할 수 있는 것입니다.

line-height

line-height는 텍스트 라인의 높이를 의미하는 것으로 주로 행간을 제어할때 이용합니다.

 

행간을 제어할 때 사용하는 속성이라 해서 줄 간격으로 생각해 오해하기 쉬울 수가 있습니다.

줄 바꿈이 되었을 때, 윗줄의 텍스트 하단과 아랫줄의 텍스트 상단까지의 간격이라고 생각할 수도 있지만,

line-height로 제어되는 부분을 line-box라고도 하며 이는 타이포그래피 구조에서 배웠던 [em 박스] + [상하단의 여백]까지를 의미합니다.

또한 line-height를 적용할 때 적용할 기준 브라우저를 확인해야합니다.

예를 들어 { Font-size :17px; line-height:20px; } 일때, 행간으로 적용되어야 하는 3px가 font 위 아래 부분에 각각 어떻게 적용되는지가 브라우저에 따라 달라지기 때문입니다.

 

 

 

< 속성 값 >(기본값:noramal)

normal	기본값으로 브라우저의 기본 속성을 따릅니다. 폰트에 따라 브라우저에 따라 다르지만 보통 1.2 정도로 할당되어 있습니다.
number	number는 단위가 없는 숫자만 입력 가능하며 font-size를 기준으로 설정한 숫자만큼 배율로 적용합니다.
length	px, em 등 고정 수치로 할당할 수 있습니다.
%	font-size를 기준으로 설정한 퍼센트만큼 배율로 적용합니다.

 

 

주의할 점은, line-height의 값으로 number를 선언할 때와 %로 선언할 때의 차이입니다.

두 값 모두 font-size를 기준으로 동작하기 때문에 1이나 100%를 같은 것이라고 오해할 수 있습니다.

하지만 두 값은 큰 차이가 있습니다. 바로 line-height의 값이 자식 요소로 상속되었을 때의 계산 방식입니다.

- number 부모 요소의 숫자 값이 그대로 상속됩니다. 즉, 자식 요소에서도 또 한 번 자식 요소의 font-size를 기준으로 계산된 값을 가집니다.
- % 부모 요소에서 %값이 그대로 상속되는 것이 아니고, %에 의해 이미 계산된 px값이 상속됩니다.

number를 선언할 때 계산된 값이 아닌 숫자값을 상속하기 때문에 숫자값을 사용하면 부모 엘리먼트에 계산된 값 대신 비율을 그대로 상속 받을 수 있으므로 가능하면 단위가 없는 값을 사용하는 것이 좋습니다.

{line-height:2;} 와 {line-height:200%} 은 둘다 font-size의 두배를 갖기 때문에 20px*2 = 40px라는 line-height값이 나왔습니다.

이 상태에서 자식요소인 <p>의 line height를 보시면

{부모요소에 number로 선언된 경우} -> 동일한 값을 부여 받아 <p>의 font-size의 두배인 10px*2=20px가 되었습니다.

{부모요소에 %로 선언된 경우} -> 부모 font-size의 두배인 40px를 그대로 적용하였습니다.

 

이처럼 상속 시 발생하는 차이점 때문에 가급적 number로 선언하는 것이 좋습니다.