CSS line-height

11,449 views

Published on

Published in: Education
5 Comments
29 Likes
Statistics
Notes
  • 아 귀중한 번역자료 감사합니다. ^^
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 굿굿~! 정말 좋은 자료 입니다. 감사합니다 ㅎㅎ
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 이 자료 한번 보고나니 완전히 해소되네요!!
    처음부터 끝까지 쏙쏙 들어오는 자료였습니다~
    덕분에 많은 도움이 되었습니다.
    감사합니다~!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 와 잘 보고 갑니다~!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 정말 부지런하시네요. 안그래도 저도 번역해볼까? 했는데(물론 못했겠지만..).. 이렇게 솔선수범을 보여주시니... 감사할 따름입니다 :) 한글로 다시 보니 더 잘 이해가 되는군요~
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
11,449
On SlideShare
0
From Embeds
0
Number of Embeds
370
Actions
Shares
0
Downloads
84
Comments
5
Likes
29
Embeds 0
No embeds

No notes for slide

CSS line-height

  1. 1. LINE-HEIGHT In Korean
  2. 2. 행간 leading 이란?
  3. 3. 오래 전 글자를 손으로 배열하여활판 인쇄 하던 때로 돌아가봅시다.
  4. 4. 활자 인쇄물은독립적으로 만들어진 활자 블럭을 가로로 이어 붙여서 만들어 냈습니다.
  5. 5. 행간 leading 은 각 글줄들 사이에 적절한 공간을 주기 위해 조각블럭을 넣는 방법으로 추가 되었습니다.
  6. 6. CSS에서는 line-height를 사용하여 글줄 사이의 수직 여백을 조정할 수 있습니다.
  7. 7. 하지만 행간이나 반행간 half-leading 과 같은 표현은CSS line-height를 이야기 할 때도 계속해서 사용되고 있습니다.
  8. 8. 어떻게 line-height를 사용할 수 있나요?
  9. 9. 브라우저들은 1.0 에서 1.2의 값을 line-height의 초기 기본값으로 사용합니다.
  10. 10. CSS의 line-height 속성을 사용해서 이 값을 새롭게 지정할 수 있습니다.p{ line-height: 140%;}
  11. 11. Line-height는 5가지의 다양한단위를 사용하여 지정할 수 있습니다.
  12. 12. 1. Line-height에는 normal값을 사용할 수 있습니다.body{ line-height: normal;}
  13. 13. 2. Line-height에는 inherit(상속)값을 사용할 수 있습니다.p{ line-height: inherit;}
  14. 14. 3. Line-height에는 퍼센트 값을 사용할 수 있습니다.p{ line-height: 120%;}
  15. 15. 4. Line-height에는 길이 단위 값(px, em 등)을 사용할 수 있습니다.p{ line-height: 20px;}
  16. 16. 5. Line-height에는 숫자 값(단위표기 없는)을 사용 할 수 있습니다.p{ line-height: 1.2;}
  17. 17. line-height 축약표기
  18. 18. 이상의 5가지 line-height 값들은 font 축약표기 방식으로도 지정할 수 있습니다.
  19. 19. line-height값은 font-size값과 결합하여 작성합니다. 각 값 사이에는 다음과 같이 슬래시를 넣어 구분합니다. <font-size>/<line-height> 예를 들면...
  20. 20. Normal 값body{ font: 100%/normal arial, helvetica, sans-serif;}
  21. 21. 퍼센트 값body{ font: 100%/120% arial, helvetica, sans-serif;}
  22. 22. 길이 단위 값body{ font: 100%/20px arial, helvetica, sans-serif;}
  23. 23. 숫자 값body{ font: 100%/1.2 arial, helvetica, sans-serif;}
  24. 24. line-height 계산하기
  25. 25. CSS의 어떤 속성들은 상속됩니다.(자손 요소에게 값을 물려줍니다.)
  26. 26. line-height의 경우에는 상속방식이 좀 더 복잡합니다.
  27. 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. 28. 이 코드들은 아래와 같은 문서 구조tree를 갖습니다. body 부모 요소h1 p div#footer 자식 요소
  29. 29. CSS도 같이 살펴봅시다. (픽셀 단위를 사용한 것은 쉬운 이해를 위해서 사용한 것이지 추천하고 싶은 방법은 아닙니다!)body{ font-size: 16px; line-height: XXX;}h1 { font-size: 32px; }p { font-size: 16px; }#footer { font-size: 12px; }
  30. 30. 예시 1퍼센트 단위 값
  31. 31. line-height를 퍼센트 값으로 지정 했습니다. (120%)body{ font-size: 16px; line-height: 120%;}h1 { font-size: 32px; }p { font-size: 16px; }#footer { font-size: 12px; }
  32. 32. 이 퍼센트 값(120%)과body 요소의 font 크기 값(16px)은 계산된 결과 값을 만들어냅니다. (16px x 120% = 19.2px) 이 계산된 값은 자식 요소에게 상속됩니다.
  33. 33. 모든 자식요소들은 각 요소의 font 크기와 관계없이 모두 같은계산된 line-height값을 상속받습니다.요소 font-size line height 계산된 line-height 값body 16px 120% 16px x 120% = 19.2pxh1 32px 계산된 상속 값 - 19.2px 19.2pxp 16px 계산된 상속 값 - 19.2px 19.2px#footer 12px 계산된 상속 값 - 19.2px 19.2px
  34. 34. 각 line-height는 font 크기에 관계 없이 변하지 않습니다. 너무 좁음 OK 너무 넓음
  35. 35. 예시 2길이 단위 값
  36. 36. line-height를 길이 단위 값으로 지정 했습니다. (20px)body{ font-size: 16px; line-height: 20px;}h1 { font-size: 32px; }p { font-size: 16px; }#footer { font-size: 12px; }
  37. 37. 이 길이 단위 값(20px)은자식 요소에게 상속됩니다.
  38. 38. 모든 자식요소들은 각 요소의 font 크기와 관계없이 모두 같은 line-height값을 상속받습니다.요소 font-size line height 계산된 line-height값body 16px 20px 20pxh1 32px 상속값 20px 20pxp 16px 상속값 20px 20px#footer 12px 상속값 20px 20px
  39. 39. 이번에도, 각 line-height는font 크기에 관계 없이 변하지 않습니다. 너무 좁음 OK 너무 넓음
  40. 40. 예시 3normal 값
  41. 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. 42. 이 경우에는 계산된 값이 아닌 normal 값이 자손 요소에게 상속됩니다.normal 값 사용시 적용되는 값은 브라우저들 마다 약간씩 다르게 계산될 수 있습니다.
  43. 43. 이 경우 각 요소의 font 크기에 따라다른 line-height값을 갖게 됩니다.요소 font-size line height 계산된 line-height값body 16px normal 16px x 대략 1.2 = 대략 19.2pxh1 32px normal 32px x 대략 1.2 = 대략 38.4pxp 16px normal 16px x 대략 1.2 = 대략 19.2px#footer 12px normal 11.2px x 대략 1.2 = 대략 13.44px
  44. 44. line-height가 font 크기에 따라 다른 값을 가지게 되었습니다. OK OK OK
  45. 45. 만약 normal처럼 유연한 적용을 원하지만, 대략의 근사치가 아닌정확한 수치의 값을 사용하고 싶다면 어떻게 해야할까요?이것이 곧 설명할 숫자 값을 사용하는 이유입니다.
  46. 46. 예시 4숫자 값
  47. 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. 48. 이 경우에는 계산된 값이 아닌 인수factor(1.5) 값이 자손 요소에게 상속됩니다.
  49. 49. 각 요소의 font 크기에 따라 다른 line-height값을 갖게 됩니다.요소 font-size line height 계산된 line-height값body 16px 1.5 16px x 1.5 = 24pxh1 32px 1.5의 인수 32px x 1.5 = 48pxp 16px 1.5의 인수 16px x 1.5 = 24px#footer 12px 1.5의 인수 12px x 1.5 = 18px
  50. 50. 이번에도 line-height가 font 크기에따라 다른 값을 가지게 되었습니다. 너무 넓죠? OK OK
  51. 51. 그렇다면 어떤 방식이가장 좋은 방식일까?
  52. 52. 일반적으로 font 크기에 따라line-height 값이 달라질 수 있도록 숫자 값을 사용하는 것이 line-height를 지정하는 가장 좋은 방식입니다.
  53. 53. 각 상황에 맞는 “완벽한 행간”을 설정하는 것은 어렵습니다. 하지만, 제목heading은 문단의line-height와 독립되어있는 편이 좋다고 볼 수 있습니다.
  54. 54. 예를 들자면, 모든 내용을 1.5로 지정한 뒤에제목은 1.2로 재지정 하는 것입니다. body { line-height: 1.5; } h1, h2, h3, h4, h5, h6 { line-height: 1.2; }
  55. 55. 웹 접근성 가이드(WCAG) 2.0은: “행간은 적어도 문단내의 띄어쓰기space 보다 1.5배이상이어야 한다”고 되어있습니다. 이것은 AAA 레벨(권장등급)로서 문단의 line-height가 1.5으로 지정되어야 한다는 뜻입니다. http://www.w3.org/TR/WCAG20/ - 1.4.8 Visual Presentation
  56. 56. 좀 더 깊이들어가봅시다
  57. 57. line-height를 더 확실히 이해하기 위해서,우리는 CSS 박스의 다양한 타입을 살펴보아야 합니다.
  58. 58. 자, 간단한 HTML 코드로 시작해봅시다.<p> The <em>emphasis</em> element is defined as “inline”.</p>
  59. 59. 이 코드는 대부분의 브라우저에서 아래와 같이 렌더링 될 겁니다. The emphasis element is defined as inline.
  60. 60. 이 예제는 4가지 박스 타입과 관련이 있습니다.
  61. 61. 박스 타입1:감싸는containing 박스
  62. 62. 이 예제에서 문단(p 태그)은다른 박스들을 감싸는 박스의 역할을 합니다.The emphasis element is defined asinline.
  63. 63. 박스 타입 2:inline 박스
  64. 64. 문단 안에는 inline 박스들이 줄지어 있습니다.The emphasis element is defined asinline.
  65. 65. inline 박스들은 줄을 바꾼 형태로 배치되지 않고 한 줄에 이어져 배치됩니다.
  66. 66. 이 예제의 강조 요소em는 inline 박스 타입입니다.The emphasis element is defined asinline.
  67. 67. 특별히 마크업 되지 않은 다른 박스들은익명 inline 박스로 간주됩니다. The emphasis element is defined as inline.
  68. 68. 박스 타입 3: line 박스
  69. 69. inline 박스는 감싸는 박스와 함께나란히 line 박스 형태를 이룬채로 앉혀져 있습니다Line 박스 The emphasis element is defined as inline.
  70. 70. 박스 타입 4:내용영역content area
  71. 71. 내용영역은 텍스트를 감싸고 있는 투명한 박스입니다. 그 높이는 font-size에 의해 결정됩니다. 내용 영역
  72. 72. inline 박스와 line-height
  73. 73. inline 박스는 간단한 공식을 통해 line-height 값이 적용됩니다.
  74. 74. 1. font-size와 line-height의 차이를 구합니다. 이 값이 행간이 됩니다. 예를 들면, Font-size: 16px Line-height: 20px 차이: 4px (행간)
  75. 75. 2. 행간을 반으로 나누어 반행간 값을 구합니다. 4px 행간 / 2 = 2px 반행간
  76. 76. 3. 이 반행간 값을 내용영역의 위와 아래에 적용합니다. 2px 반행간 2px 반행간 내용영역
  77. 77. 하지만 이런 계산은좀 더 복잡해질 수도 있습니다.
  78. 78. 일반적으로 inline 박스는 내용영역을 감쌉니다. 반행간은 내용영역의 위아래로 위치합니다. Inline 박스
  79. 79. 그러나 inline 박스는때때로 내용영역보다 더작아질 수도 있습니다!
  80. 80. 예를들어 line-height가 font size 보다 작다면,inline 박스는 line height 값을 따라가게 됩니다. Font-size: 16px Line-height: 12px Inline 박스 사이즈: 12px
  81. 81. 이런 경우 내용영역은 inline박스의 위아래에서 튀어나오게 됩니다. 반행간들은 함께 무너져 내려inline 박스 높이 만큼을 차지합니다. Inline 박스내용영역 상단 반행간 하단 반행간
  82. 82. line 박스 높이에 대해몇가지만 더 살펴봅시다
  83. 83. line 박스의 높이는 그 안에 들어있는가장 큰 inline 박스(또는 대체 요소)에 의해 결정됩니다.
  84. 84. 익명 inline 박스가가장 큰 inline 박스일 수 있습니다. Line 박스
  85. 85. 아니면 증가된 line-height를 가진 inline 박스 일 수도 있겠지요. Line 박스 증가된 line-height
  86. 86. 더 큰 font-size를 가진inline 박스일 수도 있습니다. Line 박스 더 큰 font
  87. 87. 위첨자나 아래첨자가 있는 경우에도 Line박스에 영향을 줄 수 있지요. Line 박스 위첨자
  88. 88. 이미지와 같은 대체요소가 있는 경우에도 마찬가지입니다. Line 박스 Baseline에 맞춰 정렬된 inline 이미지
  89. 89. Line 박스는 감싸는 박스 안에서 각각의 위에 쌓이게 됩니다.감싸는 박스 Line 박스 Line 박스
  90. 90. 조금만 더 볼까요
  91. 91. 위첨자와 아래첨자
  92. 92. 위첨자와 아래첨자 요소는때때로 line 박스가 보통의 경우보다 더 커지도록 만듭니다. Line 박스 위첨자
  93. 93. 원한다면 첨자요소들에 line-height를 “0”으로 주어 반행간을 제거함으로써이런 현상을 막을 수 있습니다.sup, sub{ line-height: 0; } Hat tip: www.velvetblues.com/
  94. 94. IE6, line-height와 inline 이미지
  95. 95. IE5/6는 inline 이미지가 존재할 때 상단의 반행간을 잘못 제거하는 문제가 있습니다. Line 박스 제거된 상단 반행간 inline 이미지
  96. 96. 이 현상은 고치기가 어렵습니다. 하지만 필요하다면 이미지의 상단에 margin을 더해서 반행간을 흉내낼 수 있습니다. 조건절 주석conditional comments을 사용하면 상단 margin을IE5/6에서만 나타나게 할 수 있습니다.
  97. 97. 자 이제 정말끝났습니다!
  98. 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

×