글줄 사이의 수직여백을 조정하여 글의 가독성을 높이기 위하 사용된다.
line-height는 5가지의 다양한 단위를 사용하여 지정할 수 있다.
- 기본 값
- inherit(상속)값
- 퍼센트값
- 길이 단위(px, em 등)
- 숫자 값(단위 표기가 없는)
1. 퍼센트 값 사용
예를 들어 body 요소에 퍼센트 값으로 12%로 지정한다고 가정해 봅시다.
이 퍼센트 값(120%)과 body 요소의 font 크기 값(16px)은 다음과 같은 계산된 결과 값을 만들어 냅니다.
16px * 120% = 19.2px
이 계산된 값은 자식 요소에게 상속되게 됩니다.
퍼센트를 사용했을 때의 중요한 점은 각 line-height는 font-size에 관계없이 변하지 않는다는 것입니다.
2. 길이 단위 값 사용
이번에는 body 요소에 길이 단위 값으로 20px을 지정한다고 가정해 봅시다.
이 길이 단위값(20px)은 자식 요소에게 상속되고 모든 자식 요소들은 각 요소의 font-size와 관계없이 모두 같은 line-height 값을 상속받게 됩니다.
위 결과 역시 각 line-height는 font-size와 관계없이 변하지 않습니다.
3. normal 값 사용
브라우저마다 기본 line-height 값이 다르기 때문에 normal이 대략 1.2라고 가정해 봅니다.
그리고 body 요소에 line-height:normal;을 적용해 봅니다.
normal 값을 적용하면 계산된 값이 아닌 normal 값이 자손 요소에게 상속됩니다.
noraml의 경우는 각 요소의 font-size에 따라 다른 line-height 값을 갖게 됩니다.
normal 값은 이렇게 유연한 적용이 가능하지만 대략의 근사치를 사용할 여지가 크기 때문에 권장되지는 않습니다.
그렇다면 정확한 수치의 값을 사용하면서 유연하게 적용하려면 어떻게 해야할까요?
다음에 설명드릴 숫자 값을 사용하는 방법입니다.
4. 숫자 값(단위없는) 사용
body 요소에 line-height: 1.5;를 저장한다고 가정해 봅니다.
이 경우에는 계산된 값이 아닌 인수(1.5) 값이 자손 요소에게 상속됩니다.
즉, 각 요소의 font-size 크기에 따라 다른 line-height 값을 가지게 됩니다.
그렇다면 어떤 방식이 가장 좋은 방식일까?
일반적으로 font-size 크기에 따라 line-height 값이 달라질 수 있도록 단위없는 숫자 값을 사용하는 것이 가장 좋은 방식입니다.
웹 접근성 가이드(WCAG) 2.은 "행간은 적어도 문단내의 띄어쓰기(space)보다 1.5배 이상이어야 한다"고 정의되어 있습니다.
이것은 AAA 레벨(권장등급)로서 문단의 line-height가 1.5로 지정되어야 한다는 의미이기도 합니다.
line-height 심화 학습
<p>
The<em>emphasis</em>
elment is defined as
"inline".
</p>위 예제는 4가지 박스 타입과 관련이 있습니다.
- 감싸는(conatining) 박스
- inline 박스
- line 박스
- 내용 영역(content area)
1. containing 박스
위 예제에서 문단(p 요소)은 다른 박스들은 감싸는 박스의 역할을 합니다.
2. inline 박스
문단 안에는 inline 박스들이 줄지어 있습니다.
그리고 예제 코드의 강조 요소(em) 또한 inline 박스 타입입니다.
3. line 박스
inline 박스는 감싸는 박스와 함께 난란히 line 박스 형태를 이루면서 앉혀져 있게 됩니다.
4. 내용 영역(content area)
내용 영역은 텍스트를 감싸고 있는 투명한 박스를 말합니다.
그 박스의 높이는 font-size에 의해 결정되게 됩니다.
지금까지 알아본 각각의 박스들은 복합적으로 line-height에 영향을 미치게 되는데 이 박스들과의 관계에 대해 알아보겠습니다.
inline 박스와 line-height
inline박스는 간닪나 공식을 통해 line-height 값이 적용됩니다.
font-size와 line-height의 차이를 구분하면 그 값이 행간이 됩니다.
예를 들어 font-size:16px; line-height20px; 이라면 그 차이는 4px(행간)이 됩니다.
그리고 그 행간을 반으로 나누어 반행간 값을 구하게 됩니다.
하지만 위와 같은 계산은 좀더 복잡해 질 경우가 많습니다.
일반적으로 아래 그림과 같이 inline 박스는 내용 영역(content area)을 감싸고 반행간은 내용영역의 위, 아래로 위치합니다.
그러나 inline 박스는 때때로 내용 영역보다 더 작아질 수도 있습니다.
예를 들어 line-height가 font-size보다 작다면 ,line 박스는 line-height 값을 따라가게 됩니다.
즉 font-size: 16px; line-height:12px;이라면 inline 박스 사이즈는 12px이 됩니다.
이런 경우 내용 영역은 inliine 박스 위, 아래에서 튀어나오게 되고, 반행간들은 함께 무너져 내려 inline 박스 높이만큼을 차지하게 됩니다.
line 박스와 line-height
더 나아가 line 박스 높이에 대해 몇가지만 살펴보자면 line 박스의 높이는 카장 큰 inline 박스에 의해 결정되게 됩니다.
다시말해, 익명 inline 박스가 가장 큰 inline 박스일 수도 있단거죠
위와 같은 경우가 아니라면 증가된 line-height를 가진 inline 박스 일 수도 있습니다.
그렇지 않다면 더 큰 font-size를 가진 inline 박스 형태를 가질 수도 있습니다.
또는 위첨자나 아래 첨자가 있는 경우에도 line 박스에 영향을 끼칠 수도 있습니다.
그리고 이미지 같은 대체 요소가 있는 경우에도 마찬가지로 영향을 미칠 수 있습니다.
line 박스는 감싸는(containing) 박스 안에서 각각의 위에 쌓이게 됩니다.
