1. LINE-HEIGHT
In Korean

2. 행간 leading 이란?

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

4. 활자 인쇄물은
독립적으로 만들어진 활자 블럭을
가로로 이어 붙여서
만들어 냈습니다.

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

6. CSS에서는 line-height를 사용하여
글줄 사이의 수직 여백을
조정할 수 있습니다.

7. 하지만 행간이나
반행간 half-leading 과 같은 표현은
CSS line-height를 이야기 할 때도
계속해서 사용되고 있습니다.

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

9. 브라우저들은 1.0 에서 1.2의 값을
line-height의 초기 기본값으로
사용합니다.

10. CSS의 line-height 속성을
사용해서 이 값을
새롭게 지정할 수 있습니다.
p
{
line-height: 140%;
}

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

12. 1. Line-height에는 normal값을
사용할 수 있습니다.
body
{
line-height: normal;
}

13. 2. Line-height에는
inherit(상속)값을
사용할 수 있습니다.
p
{
line-height: inherit;
}

14. 3. Line-height에는
퍼센트 값을
사용할 수 있습니다.
p
{
line-height: 120%;
}

15. 4. Line-height에는
길이 단위 값(px, em 등)을
사용할 수 있습니다.
p
{
line-height: 20px;
}

16. 5. Line-height에는
숫자 값(단위표기 없는)을
사용 할 수 있습니다.
p
{
line-height: 1.2;
}

17. line-height
축약표기

18. 이상의 5가지 line-height 값들은
font 축약표기 방식으로도
지정할 수 있습니다.

19. line-height값은 font-size값과
결합하여 작성합니다.
각 값 사이에는 다음과 같이
슬래시를 넣어 구분합니다.
<font-size>/<line-height>
예를 들면...

20. Normal 값
body
{
font: 100%/normal arial,
helvetica, sans-serif;
}

21. 퍼센트 값
body
{
font: 100%/120% arial,
helvetica, sans-serif;
}

22. 길이 단위 값
body
{
font: 100%/20px arial,
helvetica, sans-serif;
}

23. 숫자 값
body
{
font: 100%/1.2 arial,
helvetica, sans-serif;
}

24. line-height 계산하기

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

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

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; }

30. 예시 1
퍼센트 단위 값

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

34. 각 line-height는 font 크기에
관계 없이 변하지 않습니다.
너무 좁음
OK
너무 넓음

35. 예시 2
길이 단위 값

36. line-height를 길이 단위 값으로
지정 했습니다. (20px)
body
{
font-size: 16px;
line-height: 20px;
}
h1 { font-size: 32px; }
p { font-size: 16px; }
#footer { font-size: 12px; }

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

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

39. 이번에도, 각 line-height는
font 크기에 관계 없이 변하지 않습니다.
너무 좁음
OK
너무 넓음

40. 예시 3
normal 값

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

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

45. 만약 normal처럼 유연한 적용을
원하지만, 대략의 근사치가 아닌
정확한 수치의 값을 사용하고 싶다면
어떻게 해야할까요?
이것이 곧 설명할 숫자 값을 사용하는
이유입니다.

46. 예시 4
숫자 값

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

50. 이번에도 line-height가 font 크기에
따라 다른 값을 가지게 되었습니다.
너무 넓죠?
OK
OK

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

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

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

54. 예를 들자면,
모든 내용을 1.5로 지정한 뒤에
제목은 1.2로 재지정 하는 것입니다.
body
{ line-height: 1.5; }
h1, h2, h3, h4, h5, h6
{ line-height: 1.2; }

55. 웹 접근성 가이드(WCAG) 2.0은:
“행간은 적어도 문단내의
띄어쓰기space 보다 1.5배
이상이어야 한다”고 되어있습니다.
이것은 AAA 레벨(권장등급)로서
문단의 line-height가 1.5으로
지정되어야 한다는 뜻입니다.
http://www.w3.org/TR/WCAG20/ - 1.4.8 Visual Presentation

56. 좀 더 깊이
들어가봅시다

57. line-height를 더 확실히
이해하기 위해서,
우리는 CSS 박스의 다양한 타입을
살펴보아야 합니다.

58. 자, 간단한 HTML 코드로
시작해봅시다.
<p>
The <em>emphasis</em>
element is defined as
“inline”.
</p>

59. 이 코드는 대부분의 브라우저에서
아래와 같이 렌더링 될 겁니다.
The emphasis element is defined as
inline.

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

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

62. 이 예제에서 문단(p 태그)은
다른 박스들을 감싸는 박스의
역할을 합니다.
The emphasis element is defined as
inline.

63. 박스 타입 2:
inline 박스

64. 문단 안에는 inline 박스들이
줄지어 있습니다.
The emphasis element is defined as
inline.

65. inline 박스들은 줄을 바꾼 형태로
배치되지 않고
한 줄에 이어져 배치됩니다.

66. 이 예제의 강조 요소em는
inline 박스 타입입니다.
The emphasis element is defined as
inline.

67. 특별히 마크업 되지 않은
다른 박스들은
익명 inline 박스로 간주됩니다.
The emphasis element is defined as
inline.

68. 박스 타입 3:
line 박스

69. inline 박스는 감싸는 박스와 함께
나란히 line 박스 형태를 이룬채로
앉혀져 있습니다
Line 박스
The emphasis element is defined as
inline.

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

71. 내용영역은 텍스트를 감싸고 있는
투명한 박스입니다.
그 높이는 font-size에 의해
결정됩니다.
내용 영역

72. inline 박스와
line-height

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

74. 1. font-size와 line-height의
차이를 구합니다.
이 값이 행간이 됩니다.
예를 들면,
Font-size: 16px
Line-height: 20px
차이: 4px (행간)

75. 2. 행간을 반으로 나누어
반행간 값을 구합니다.
4px 행간 / 2 = 2px 반행간

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

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

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

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

80. 예를들어 line-height가
font size 보다 작다면,
inline 박스는 line height 값을
따라가게 됩니다.
Font-size: 16px
Line-height: 12px
Inline 박스 사이즈: 12px

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

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

83. line 박스의 높이는
그 안에 들어있는
가장 큰 inline 박스(또는 대체 요소)에
의해 결정됩니다.

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

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

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

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

88. 이미지와 같은 대체요소가 있는
경우에도 마찬가지입니다.
Line 박스
Baseline에 맞춰 정렬된 inline 이미지

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

90. 조금만 더 볼까요

91. 위첨자와 아래첨자

92. 위첨자와 아래첨자 요소는
때때로 line 박스가 보통의 경우보다
더 커지도록 만듭니다.
Line 박스
위첨자

93. 원한다면 첨자요소들에
line-height를 “0”으로 주어
반행간을 제거함으로써
이런 현상을 막을 수 있습니다.
sup, sub
{ line-height: 0; }
Hat tip: www.velvetblues.com/

94. IE6, line-height와
inline 이미지

95. IE5/6는 inline 이미지가 존재할 때
상단의 반행간을 잘못 제거하는
문제가 있습니다.
Line 박스
제거된 상단 반행간
inline 이미지

96. 이 현상은 고치기가 어렵습니다.
하지만 필요하다면
이미지의 상단에 margin을 더해서
반행간을 흉내낼 수 있습니다.
조건절 주석conditional comments을
사용하면 상단 margin을
IE5/6에서만 나타나게 할 수 있습니다.

97. 자 이제 정말
끝났습니다!

98. 작성자 : 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