CSS line-height

이 포스팅에서는 CSS 의 line-height에 대해 알아보도록 합니다.

행간(leading)이란?

오래 전 글자를 손으로 배열하여 활판 인쇄하던 때의 활자 인쇄물은 독립적으로 만들어진 활자 블럭을 가로로 이어 붙여서 만들어 냈습니다.

그리고 행간(leading)은 각 글줄들 사이에 적절한 공간을 주기 위해 조각블럭을 넣는 방법으로 추가되었습니다.

이러한 행간과 같은 표현을 CSS에서는 line-height 를 사용하여 글줄 사이의 수직 여백을 조정할 수 있습니다.

line-height 사용 방법

브라우저들은 1.0 에서 1.2 의 값을 line-height 의 초기 기본값으로 사용하고, CSS 의 line-height 속성을 다음과 같이 지정할 수 있습니다.

CSS

p { line-height: 140%; }

line-height 는 5가지의 다양한 단위를 사용하여 지정할 수 있습니다.

CSS

/* 1. normal 값 사용 */
p { line-height: normal; }

/* 2. inherit(상속)값 사용 */
p { line-height: inherit; }

/* 3. 퍼센트값 사용 */
p { line-height: 120%; }

/* 4. 길이 단위 값(px, em 등) 사용 */
p { line-height: 20px; }

/* 5. 숫자 값(단위 표기가 없는) 사용 */
p { line-height: 1.2; }

line-height 계산하기

CSS 의 어떤 속성들은 상속됩니다. 즉, 자손 요소에게 값을 물려줍니다.

line-height의 경우에는 상속방식이 좀 더 복잡합니다.

다음의 코드를 통해 실제로 사용되는 다양한 line-height 의 경우를 살펴보도록 합니다.

See the Pen line-height by jaeheekim (@jaehee) on CodePen.

위 코드는 아래 그림과 같은 문서 구조(tree)를 갖습니다.

#1 퍼센트 값 사용

예를 들어 body 요소에 퍼센트 값으로 120% 로 지정한다고 가정해 봅시다.

이 퍼센트 값(120%)과 body 요소의 font 크기 값(16px)은 다음과 같은 계산된 결과 값을 만들어 냅니다.

16px * 120% = 19.2px

이 계산된 값은 자식 요소에게 상속되게 됩니다.

요소	font-size	line-height	계산된 line-height 값
body	16px	120%	16px * 120% = 19.2px
h1	32px	계산된 상속 값 : 19.2px	19.2px
p	16px	계산된 상속 값 : 19.2px	19.2px
#footer	12px	계산된 상속 값 : 19.2px	19.2px

이 결과는 다음의 그림과 같이 렌더링될 것입니다.

퍼센트를 사용했을 때의 중요한 점은 각 line-height 는 font-size 에 관계없이 변하지 않는다는 것입니다.

#2 길이 단위 값 사용

이번에는 body 요소에 길이 단위 값으로 20px 을 지정한다고 가정해 봅시다.

이 길이 단위값(20px)은 자식 요소에게 상속되고 모든 자식 요소들은 각 요소의 font-size 와 관계없이 모두 같은 line-height 값을 상속받게 됩니다.

요소	font-size	line-height	계산된 line-height 값
body	16px	20px	20px
h1	32px	상속 값 :20px	20px
p	16px	상속 값 :20px	20px
#footer	12px	상속 값 :20px	20px

위 결과 역시 각 line-height 는 font-size 와 관계없이 변하지 않습니다.

#3 normal 값 사용

브라우저마다 기본 line-height 값이 다르기 때문에 normal 이 대략 1.2 라고 가정해 봅니다.

그리고 body 요소에 line-height: normal; 을 적용해 봅니다.

normal 값을 적용하면 계산된 값이 아닌 normal 값이 자손 요소에게 상속됩니다.
(normal 값 사용시 적용되는 값은 브라우저마다 약간씩 다르게 계산될 수 있음에 주의)

normal 의 경우는 각 요소의 font-size 에 따라 다른 line-height 값을 갖게 됩니다.

요소	font-size	line-height	계산된 line-height 값
body	16px	normal	16px * 대략 1.2 = 대략 19.2px
h1	32px	normal	32px * 대략 1.2 = 대략 38.4px
p	16px	normal	16px * 대략 1.2 = 대략 19.2px
#footer	12px	normal	12px * 대략 1.2 = 대략 13.44px

normal 값은 이렇게 유연한 적용이 가능하지만 대략의 근사치를 사용할 여지가 크기 때문에 권장되지는 않습니다.

그렇다면 정확한 수치의 값을 사용하면서 유연하게 적용하려면 어떻게 해야할까요?

다음에 설명드릴 숫자 값을 사용하는 방법입니다.

#4 숫자 값(단위없는) 사용

body 요소에 line-height: 1.5; 를 지정한다고 가정해 봅니다.

이 경우에는 계산된 값이 아닌 인수(1.5) 값이 자손 요소에게 상속됩니다.

즉, 각 요소의 font-size 크기에 따라 다른 line-height 값을 가지게 됩니다.

요소	font-size	line-height	계산된 line-height 값
body	16px	1.5	16px * 1.5 = 24px
h1	32px	1.5 의 인수	32px * 1.5 = 48px
p	16px	1.5 의 인수	16px * 1.5 = 24px
#footer	12px	1.5 의 인수	12px * 1.5 = 18px

그렇다면 어떤 방식이 가장 좋은 방식일까?

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

각 상황에 맞는 완벽한 행간을 설정하는 것은 어려운 일입니다.
하지만, 제목(heading)은 문단의 line-height 와 독립되어 있는 편이 좋다고 볼 수 있습니다.

예를 들자면 모든 내용을 1.5 로 지정한 뒤에 제목은 1.2 로 재지정하는 것입니다.

CSS

body {
    line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
}

웹 접근성 가이드(WCAG) 2.0 은 "행간은 적어도 문단내의 띄어쓰기(space)보다 1.5배 이상이어야 한다"고 정의되어 있습니다.

이것은 AAA 레벨(권장등급)로서 문단의 line-height 가 1.5 로 지정되어야 한다는 의미이기도 합니다.

line-height 심화 학습

지금부터 좀더 line-height 에 대해 깊이 공부해 보도록 하겠습니다.

line-height 를 더 확실히 이해하기 위해서는 CSS 박스의 다양한 타입을 알아볼 필요가 있습니다.

다음과 같은 코드가 있습니다.

HTML

<p>
    The <em>emphasis</em>
    element is defined as
    "inline".
</p>

위 예제 코드는 4가지 박스 타입과 관련이 있습니다.

• 감싸는(containing) 박스
• inline 박스
• line 박스
• 내용 영역(content area)

containing 박스

위 예제에서 문단(p 요소)은 다른 박스들을 감싸는(containing) 박스의 역할을 합니다.

inline 박스

문단 안에는 inline 박스들이 줄지어 있습니다.

inline 박스들은 줄 바꿈 형태로 배치되지 않고 한 줄에 이어져 배치되는 특징이 있습니다.

그리고 예제 코드의 강조 요소(em) 또한 inline 박스 타입입니다.

그리고 특별히 마크업되지 않은 다른 박스들은 익명 inline 박스로 간주되게 됩니다.

line 박스

inline 박스는 감싸는(containing) 박스와 함께 나란히 line 박스 형태를 이루면서 앉혀져 있게 됩니다.

내용 영역(content area)

내용 영역(content area)은 텍스트를 감싸고 있는 투명한 박스를 말합니다.

그 박스의 높이는 font-size에 의해 결정되게 됩니다.

지금까지 알아본 각각의 박스들은 복합적으로 line-height 에 영향을 미치게 되는데 이 박스들과의 관계에 대해 알아보겠습니다.

inline 박스와 line-height

inline 박스는 간단한 공식을 통해 line-height 값이 적용됩니다.

font-size 와 line-height 의 차이를 구하면 그 값이 행간이 됩니다.

예를 들어 font-size: 16px; line-height: 20px; 이라면 그 차이는 4px(행간)이 됩니다.

그리고 그 행간을 반으로 나누어 반행간 값을 구하게 됩니다.

4px(행간) / 2 = 2px(반행간)

이 반행간 값을 내용 영역(content area)의 위, 아래로 나누어 적용되게 됩니다.

하지만 위와 같은 계산은 좀더 복잡해 질 경우가 많습니다.

일반적으로 아래 그림과 같이 inline 박스는 내용 영역(content area)을 감싸고 반행간은 내용영역의 위,아래로 위치합니다.

그러나 inline 박스는 때때로 내용 영역보다 더 작아질 수도 있습니다.

예를 들어 line-height 가 font-size 보다 작다면, inline 박스는 line-height 값을 따라가게 됩니다.

즉, font-size: 16px; line-height:12px; 이라면 inline 박스 사이즈는 12px 이 됩니다.

이런 경우 내용 영역은 inline 박스의 위,아래에서 튀어나오게 되고, 반행간들은 함께 무너져 내려 inline 박스 높이만큼을 차지하게 됩니다.

line 박스와 line-height

더 나아가 line 박스 높이에 대해 몇가지만 살펴보도록 하겠습니다.

line 박스의 높이는 가장 큰 inline 박스(또는 대체 요소)에 의해 결정되게 됩니다.

다시말해, 익명 inline 박스가 가장 큰 inline 박스일 수도 있습니다.

위와 같은 경우가 아니라면 증가된 line-height 를 가진 inline 박스 일 수도 있습니다.

그렇지 않다면 더 큰 font-size 를 가진 inline 박스 형태를 가질 수도 있습니다.

또는 위첨자나 아래첨자가 있는 경우에도 line 박스에 영향을 끼칠 수도 있습니다.

그리고 이미지와 같은 대체요소가 있는 경우에도 마찬가지로 영향을 미칠 수 있습니다.

line 박스는 감싸는(containing) 박스 안에서 각각의 위에 쌓이게 됩니다.

마치며

지금까지 알아본 바와 같이 행간은 매우 복잡한 경우의 수를 내포하고 있습니다.

그리고 line-height 를 정확하게 크로스 브라우징하기는 매우 어렵습니다.

위와 같은 경우보다 더 복잡한 경우로 인해 그리고 OS와 브라우저마다의 렌더링 방식에 따라 1~2px 정도의 오차 범위가 발생할 수 여지가 많습니다.

이러한 복합적인 이유로 위, 아래로 애매한 여백이 생기기 때문에 완벽한 행간을 기대하기가 쉽지 않습니다.

하지만 적어도 행간을 계산하는 공식인 line-height(행간)와 폰트사이즈의 차이에서 반행간을 구하는 방법을 사용하면 좀더 정확한 행간을 사용할 수 있을 것입니다.

디자이너가 중요시하는 자간과 행간의 문제는 개발자의 실력도 원인이 될 수 있겠지만 최소한 디자이너와 원만한 의사소통으로 웹을 이해시키고 협력하여 나아간다면 더 나은 프로젝트 환경을 만들어 나갈 수 있지 않을까 기대해 봅니다.

Related Info

1. CSS line-height 원문
2. font metrics, line-height and vertical-align

Jaehee's WebClub