CSS

1. CSS LINE-HEIGHT In Korean

2. 행간이란?

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. 이 코드들은 아래와 같은문서 구조를 갖습니다. 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값을 상속받습니다.

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값을 상속받습니다.

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

40. 예시 3normal 값

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. In this case, the normal value rather than a calculated value is inherited by descendant elements. Browsers may interpret the actual normal value in slightly different ways.

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

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. In this case, the factor (1.5) rather than a calculated value is inherited by descendant elements.

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

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