27. 아래의 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>
28. 이 코드들은 아래와 같은
문서 구조tree를 갖습니다.
body 부모 요소
h1 p div#footer
자식 요소
29. CSS도 같이 살펴봅시다.
(픽셀 단위를 사용한 것은 쉬운 이해를 위해서 사용한 것이지
추천하고 싶은 방법은 아닙니다!)
body
{
font-size: 16px;
line-height: XXX;
}
h1 { font-size: 32px; }
p { font-size: 16px; }
#footer { font-size: 12px; }
31. line-height를 퍼센트 값으로
지정 했습니다. (120%)
body
{
font-size: 16px;
line-height: 120%;
}
h1 { font-size: 32px; }
p { font-size: 16px; }
#footer { font-size: 12px; }
32. 이 퍼센트 값(120%)과
body 요소의 font 크기 값(16px)은
계산된 결과 값을 만들어냅니다.
(16px x 120% = 19.2px)
이 계산된 값은
자식 요소에게 상속됩니다.
33. 모든 자식요소들은 각 요소의
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
38. 모든 자식요소들은 각 요소의
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
41. line-height를 normal(대략 1.2)로
지정 했습니다.
body
{
font-size: 16px;
line-height: normal;
}
h1 { font-size: 32px; }
p { font-size: 16px; }
#footer { font-size: 12px; }
42. 이 경우에는 계산된 값이 아닌
normal 값이
자손 요소에게 상속됩니다.
normal 값 사용시 적용되는 값은
브라우저들 마다 약간씩
다르게 계산될 수 있습니다.
43. 이 경우 각 요소의 font 크기에 따라
다른 line-height값을 갖게 됩니다.
요소 font-size line height 계산된 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
47. line-height를 숫자 값으로
지정 했습니다. (1.5)
body
{
font-size: 16px;
line-height: 1.5;
}
h1 { font-size: 32px; }
p { font-size: 16px; }
#footer { font-size: 12px; }
48. 이 경우에는 계산된 값이 아닌
인수factor(1.5) 값이
자손 요소에게 상속됩니다.
49. 각 요소의 font 크기에 따라
다른 line-height값을 갖게 됩니다.
요소 font-size line height 계산된 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