CSS line-height
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

CSS line-height

  • 7,082 views
Uploaded on

 

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 아 귀중한 번역자료 감사합니다. ^^
    Are you sure you want to
    Your message goes here
  • 굿굿~! 정말 좋은 자료 입니다. 감사합니다 ㅎㅎ
    Are you sure you want to
    Your message goes here
  • 이 자료 한번 보고나니 완전히 해소되네요!!
    처음부터 끝까지 쏙쏙 들어오는 자료였습니다~
    덕분에 많은 도움이 되었습니다.
    감사합니다~!!
    Are you sure you want to
    Your message goes here
  • 와 잘 보고 갑니다~!
    Are you sure you want to
    Your message goes here
  • 정말 부지런하시네요. 안그래도 저도 번역해볼까? 했는데(물론 못했겠지만..).. 이렇게 솔선수범을 보여주시니... 감사할 따름입니다 :) 한글로 다시 보니 더 잘 이해가 되는군요~
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
7,082
On Slideshare
7,009
From Embeds
73
Number of Embeds
6

Actions

Shares
Downloads
47
Comments
5
Likes
17

Embeds 73

http://www.inven.co.kr 24
https://twitter.com 19
http://pinterest.com 10
http://invalid.kr 10
http://blog.naver.com 6
http://fidohong.com 4

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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.2pxh1 32px 계산된 상속 값 - 19.2px 19.2pxp 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 20pxh1 32px 상속값 20px 20pxp 16px 상속값 20px 20px#footer 12px 상속값 20px 20px
  • 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. 이 경우에는 계산된 값이 아닌 normal 값이 자손 요소에게 상속됩니다.normal 값 사용시 적용되는 값은 브라우저들 마다 약간씩 다르게 계산될 수 있습니다.
  • 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. 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 = 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. 이번에도 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 asinline.
  • 63. 박스 타입 2:inline 박스
  • 64. 문단 안에는 inline 박스들이 줄지어 있습니다.The emphasis element is defined asinline.
  • 65. inline 박스들은 줄을 바꾼 형태로 배치되지 않고 한 줄에 이어져 배치됩니다.
  • 66. 이 예제의 강조 요소em는 inline 박스 타입입니다.The emphasis element is defined asinline.
  • 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