CSS line-height

LINE-HEIGHT In Korean

행간 leading 이란?

오래 전 글자를 손으로 배열하여 활판 인쇄 하던 때로 돌아가봅시다.

활자 인쇄물은 독립적으로 만들어진 활자 블럭을

가로로 이어 붙여서 만들어 냈습니다.

행간 leading 은 각 글줄들 사이에 적절한 공간을 주기 위해

조각블럭을 넣는 방법으로 추가 되었습니다.

CSS에서는 line-height를 사용하여 글줄 사이의 수직 여백을

조정할 수 있습니다.

하지만 행간이나 반행간 half-leading 과 같은 표현은

CSS line-height를 이야기 할 때도 계속해서 사용되고 있습니다.

어떻게 line-height를 사용할 수 있나요?

브라우저들은 1.0 에서 1.2의 값을 line-height의 초기 기본값으로

사용합니다.

CSS의 line-height 속성을 사용해서 이 값을

새롭게 지정할 수 있습니다.

p

{

line-height: 140%;

}

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

1. Line-height에는 normal값을 사용할 수 있습니다.

body

{

line-height: normal;

}

2. Line-height에는 inherit(상속)값을

사용할 수 있습니다.

p

{

line-height: inherit;

}

3. Line-height에는 퍼센트 값을


p

{

line-height: 120%;

}

4. Line-height에는 길이 단위 값(px, em 등)을


p

{

line-height: 20px;

}

5. Line-height에는 숫자 값(단위표기 없는)을

사용 할 수 있습니다.

p

{

line-height: 1.2;

}

line-height 축약표기

이상의 5가지 line-height 값들은 font 축약표기 방식으로도

지정할 수 있습니다.

line-height값은 font-size값과 결합하여 작성합니다.

각 값 사이에는 다음과 같이 슬래시를 넣어 구분합니다.

<font-size>/<line-height>

예를 들면...

Normal 값

body

{

font: 100%/normal arial,

helvetica, sans-serif;

}

퍼센트 값

body

{

font: 100%/120% arial,


}

길이 단위 값

body

{

font: 100%/20px arial,


}

숫자 값

body

{

font: 100%/1.2 arial,


}

line-height 계산하기

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

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

아래의 HTML 코드를 통해 실제로 사용되는 다양한 line-height의

경우를 살펴봅시다.

<h1>

consect etuer adipi scing eli

</h1>

<p>

Lorem ipsum dolor sit amet co

</p>

<div id="footer">

Duis autem vel eum iriure dol

</div>

이 코드들은 아래와 같은 문서 구조tree를 갖습니다.

div#footer p h1

body

자식 요소

부모 요소

CSS도 같이 살펴봅시다.

(픽셀 단위를 사용한 것은 쉬운 이해를 위해서 사용한 것이지 추천하고 싶은 방법은 아닙니다!)

body

{

font-size: 16px;

line-height: XXX;

}

h1 { font-size: 32px; }

p { font-size: 16px; }

#footer { font-size: 12px; }

예시 1 퍼센트 단위 값

line-height를 퍼센트 값으로 지정 했습니다. (120%)

body

{

font-size: 16px;

line-height: 120%;

}




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

(16px x 120% = 19.2px) 이 계산된 값은

자식 요소에게 상속됩니다.

모든 자식요소들은 각 요소의 font 크기와 관계없이 모두 같은

계산된 line-height값을 상속받습니다.

요소 font-size line height 계산된 line-height 값

body 16px 120% 16px x 120% = 19.2px

h1 32px 계산된 상속 값 - 19.2px 19.2px

p 16px 계산된 상속 값 - 19.2px 19.2px

#footer 12px 계산된 상속 값 - 19.2px 19.2px

각 line-height는 font 크기에 관계 없이 변하지 않습니다.

너무 좁음

OK

너무 넓음

예시 2 길이 단위 값

line-height를 길이 단위 값으로 지정 했습니다. (20px)

body

{

font-size: 16px;

line-height: 20px;

}




이 길이 단위 값(20px)은 자식 요소에게 상속됩니다.

모든 자식요소들은 각 요소의 font 크기와 관계없이 모두 같은 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 크기에 관계 없이 변하지 않습니다.

너무 좁음

OK

너무 넓음

예시 3 normal 값

line-height를 normal(대략 1.2)로 지정 했습니다.

body

{

font-size: 16px;

line-height: normal;

}




이 경우에는 계산된 값이 아닌 normal 값이

자손 요소에게 상속됩니다. normal 값 사용시 적용되는 값은

브라우저들 마다 약간씩 다르게 계산될 수 있습니다.

이 경우 각 요소의 font 크기에 따라 다른 line-height값을 갖게 됩니다.


body 16px normal 16px x 대략 1.2 = 대략 19.2px

h1 32px normal 32px x 대략 1.2 = 대략 38.4px

p 16px normal 16px x 대략 1.2 = 대략 19.2px

#footer 12px normal 11.2px x 대략 1.2 = 대략 13.44px

line-height가 font 크기에 따라 다른 값을 가지게 되었습니다.

OK

OK

OK

만약 normal처럼 유연한 적용을 원하지만, 대략의 근사치가 아닌

정확한 수치의 값을 사용하고 싶다면 어떻게 해야할까요?

이것이 곧 설명할 숫자 값을 사용하는 이유입니다.

예시 4 숫자 값

line-height를 숫자 값으로 지정 했습니다. (1.5)

body

{

font-size: 16px;

line-height: 1.5;

}




이 경우에는 계산된 값이 아닌 인수factor(1.5) 값이

자손 요소에게 상속됩니다.

각 요소의 font 크기에 따라 다른 line-height값을 갖게 됩니다.


body 16px 1.5 16px x 1.5 = 24px

h1 32px 1.5의 인수 32px x 1.5 = 48px

p 16px 1.5의 인수 16px x 1.5 = 24px

#footer 12px 1.5의 인수 12px x 1.5 = 18px

이번에도 line-height가 font 크기에 따라 다른 값을 가지게 되었습니다.

너무 넓죠?

OK

OK

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

일반적으로 font 크기에 따라 line-height 값이 달라질 수 있도록

숫자 값을 사용하는 것이 line-height를 지정하는 가장 좋은 방식입니다.

각 상황에 맞는 “완벽한 행간”을 설정하는 것은 어렵습니다.

하지만, 제목heading은 문단의

line-height와 독립되어있는 편이 좋다고 볼 수 있습니다.

예를 들자면, 모든 내용을 1.5로 지정한 뒤에

제목은 1.2로 재지정 하는 것입니다.

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으로 지정되어야 한다는 뜻입니다.

http://www.w3.org/TR/WCAG20/ - 1.4.8 Visual Presentation

좀 더 깊이 들어가봅시다

line-height를 더 확실히 이해하기 위해서,

우리는 CSS 박스의 다양한 타입을 살펴보아야 합니다.

자, 간단한 HTML 코드로 시작해봅시다.

<p>

The <em>emphasis</em>

element is defined as

“inline”.

</p>

이 코드는 대부분의 브라우저에서 아래와 같이 렌더링 될 겁니다.

The emphasis element is defined as

inline.

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

박스 타입1: 감싸는containing 박스

이 예제에서 문단(p 태그)은 다른 박스들을 감싸는 박스의

역할을 합니다.


inline.

박스 타입 2: inline 박스

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


inline.

inline 박스들은 줄을 바꾼 형태로 배치되지 않고

한 줄에 이어져 배치됩니다.

이 예제의 강조 요소em는 inline 박스 타입입니다.


inline.

특별히 마크업 되지 않은 다른 박스들은

익명 inline 박스로 간주됩니다.


inline.

박스 타입 3: line 박스

inline 박스는 감싸는 박스와 함께 나란히 line 박스 형태를 이룬채로

앉혀져 있습니다


inline.

Line 박스

박스 타입 4: 내용영역content area

내용영역은 텍스트를 감싸고 있는 투명한 박스입니다.

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

내용 영역

inline 박스와 line-height

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

1. font-size와 line-height의 차이를 구합니다.

이 값이 행간이 됩니다.

예를 들면,

Font-size: 16px Line-height: 20px 차이: 4px (행간)

2. 행간을 반으로 나누어 반행간 값을 구합니다.

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

3. 이 반행간 값을 내용영역의 위와 아래에 적용합니다.

2px 반행간

2px 반행간

내용영역

하지만 이런 계산은 좀 더 복잡해질 수도 있습니다.

일반적으로 inline 박스는 내용영역을 감쌉니다. 반행간은 내용영역의 위아래로 위치합니다.

Inline 박스

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

예를들어 line-height가 font size 보다 작다면,

inline 박스는 line height 값을 따라가게 됩니다.

Font-size: 16px

Line-height: 12px Inline 박스 사이즈: 12px

이런 경우 내용영역은 inline박스의 위아래에서 튀어나오게 됩니다. 반행간들은 함께 무너져 내려

inline 박스 높이 만큼을 차지합니다.

Inline 박스

내용영역 상단 반행간 하단 반행간

line 박스 높이에 대해 몇가지만 더 살펴봅시다

line 박스의 높이는 그 안에 들어있는

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

익명 inline 박스가 가장 큰 inline 박스일 수 있습니다.

Line 박스

아니면 증가된 line-height를 가진 inline 박스 일 수도 있겠지요.

증가된 line-height

Line 박스

더 큰 font-size를 가진 inline 박스일 수도 있습니다.

Line 박스

더 큰 font

위첨자나 아래첨자가 있는 경우에도 Line박스에 영향을 줄 수 있지요.

Line 박스

위첨자

이미지와 같은 대체요소가 있는 경우에도 마찬가지입니다.

Line 박스

Baseline에 맞춰 정렬된 inline 이미지

Line 박스는 감싸는 박스 안에서 각각의 위에 쌓이게 됩니다.

Line 박스

Line 박스

감싸는 박스

조금만 더 볼까요

위첨자와 아래첨자

위첨자와 아래첨자 요소는 때때로 line 박스가 보통의 경우보다

더 커지도록 만듭니다.

Line 박스

위첨자

원한다면 첨자요소들에 line-height를 “0”으로 주어

반행간을 제거함으로써 이런 현상을 막을 수 있습니다.

sup, sub

{ line-height: 0; }

Hat tip: www.velvetblues.com/

IE6, line-height와 inline 이미지

IE5/6는 inline 이미지가 존재할 때 상단의 반행간을 잘못 제거하는

문제가 있습니다.

Line 박스

inline 이미지

제거된 상단 반행간

이 현상은 고치기가 어렵습니다. 하지만 필요하다면

이미지의 상단에 margin을 더해서 반행간을 흉내낼 수 있습니다. 조건절 주석conditional comments을

사용하면 상단 margin을 IE5/6에서만 나타나게 할 수 있습니다.

자 이제 정말 끝났습니다!

작성자 : Russ Weakley Max Design

Site: maxdesign.com.au

Twitter: twitter.com/russmaxdesign

Slideshare: slideshare.net/maxdesign

Linkedin: linkedin.com/in/russweakley

번역 : Toby Yun SK communications

Twitter: twitter.com/tobyyun

Slideshare: slideshare.net/headvoy

Education

CSS line-height