line-height 계산

오민영·2023년 2월 13일
0

CSS

목록 보기
2/22

line-height

텍스트 라인의 높이를 의미하고, 행간을 제어할 때 사용한다.

line-height:  **normal** | number | length | initial | inherit;

line-height로 제어되는 부분을 line-box 라고도 하며, 폰트 사이즈 + 상하단의 여백 까지를 의미한다.

속성 값

속성값설명
normal기본 값. 폰트에 따라 브라우저에 따라서 조금씩 상이하지만, 보통 1.2 정도로 할당되어 있다.
numberfont-size 를 기준으로 설정한 숫자만큼 배율로 line-height가 적용된다.
lengthpx, em 등 고정 수치로 할당할 수 있다.
%font-size를 기준으로 설정한 퍼센트만큼 배율로 line-height가 적용된다.

주의할 점

number 와 % 로 선언할 때, 두 값 모두 font-size를 기준으로 동작하기 때문에 1이나 100% 이 동일한 값이 적용된다고 생각할 수 있으나, 큰 차이가 있다. 바로, line-height값이 자식 요소로 상속의 유무 차이가 있다.

차이 설명

number → 부모 요소의 line-height 숫자 값이 그대로 상속되기 때문에, 자식 요소에서도 또 한 번 자식 요소의 font-size를 기준으로 계산 된 값을 가진다.

% → 부모 요소에서 % 값이 그대로 상속되는 것이 아니고, 최초 %에서 선언되어 계산된 px 값이 상속된다.

  • 예시 - 자식이 없는 경우, body에 동일한 40px 이 적용 된다.
body { font-size: 20px; line-height: 2; }       /* line-height = 40px; */
body { font-size: 20px; line-height: 200%; }    /* line-height = 40px; */
  • number는 상위 부모 2 값에 본인 10px을 곱해 20px 이 되고, %는 상위 부모에 계산된 값 자체를 상속받는다.
body { font-size: 20px; line-height: 2; }    /* line-height = 40px; */
p { font-size: 10px; }                        /* line-height = 20px; */

body { font-size: 20px; line-height: 200%; }    /* line-height = 40px; */
p { font-size: 10px; }                          /* line-height = 40px; */

속성 단위에 따른 예시

퍼센트 값 사용

  • 자식 요소의 line-height는 font-size에 관계없이 상위 부모 값으로 상속된다.
요소font-sizeline-height계산된 line-height 값
body16px120%16px * 120% = 19.2px
h132px계산된 상속 값: 19.2px19.2px
p16px계산된 상속 값: 19.2px19.2px
footer12px계산된 상속 값: 19.2px19.2px

길이 단위 값 사용

  • 길위 단위 값은 자식 요소에게 상속이 되고, font-size와 관계 없이 같은 line-height가 적용된다.
요소font-sizeline-height계산된 line-height 값
body16px20px20px
h132px상속 값: 20px20px
p16px상속 값: 20px20px
footer12px상속 값: 20px20px

normal 값 사용

  • 브라우저마자 기본 line-height 값이 조금씩 다르고, 보통 1.0 - 1.2 이다.
  • normal의 경우는 각 요소의 font-size에 따라 다른 line-height 값을 갖게 된다.
요소font-sizeline-height계산된 line-height 값
body16pxnormal16px * 약 1.2 = 19.2px
h132pxnormal32px * 약 1.2 = 38.4px
p16pxnormal16px * 약 1.2 = 19.2px
footer12pxnormal12px * 약 1.2 = 13.44px

단위 없는 숫자 값 사용

  • 이 경우에는 계산 된, 픽스 된 값이 아닌 인수 (1.5) 값이 자손에게 상속된다.
  • 즉, 각 요소의 font-size 에 따라 다른 line-height 값을 가지게 된다.
요소font-sizeline-height계산된 line-height 값
body16px1.516px * 1.5 = 24px
h132px1.5의 인수32px * 1.5 = 48px
p16px1.5의 인수16px * 1.5 = 24px
footer12px1.5의 인수12px * 1.5 = 18px

좋은 방식

일반적으로 font-size 크기에 따라 line-height 값이 달라질 수 있도록 단위 없는 숫자 값을 사용하는 것이 가장 좋다.

Reference

CSS line-height

profile
이것저것 정리하는 공간

0개의 댓글