line-height

1 개요
2 문법
3 예제 1
4 예제 2

개요

line-height 속성은 텍스트 줄 간격(줄 높이)을 조절하는 데 사용됩니다. 텍스트의 가독성을 높이고, 디자인적으로 더 일관된 레이아웃을 만들기 위해 자주 사용됩니다.

기본값 : normal
상속 : Yes
애니메이션 : Yes
버전 : CSS Level 1

문법

line-height: normal | length | number | percentage | initial | inherit

normal : 웹브라우저에서 정한 기본값입니다. 보통 1.2입니다.
length : 길이로 줄 높이를 정합니다.
number : 글자 크기의 몇 배인지로 줄 높이를 정합니다.
percentage : 글자 크기의 몇 %로 줄 높이로 정합니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

예를 들어 글자크기가 40px일 때 line-height의 값을 1.5로 하면, 줄 높이는 40의 1.5배인 60px가 됩니다. 줄 높이는 60px인데 글자 크기는 40px이므로, 글자 위와 아래에 각각 10px의 여백이 생깁니다. 줄 높이가 글자 크기보다 작으면 세로 방향으로 글자가 겹치게 됩니다.

예제 1

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style type="text/css">
      h1 {
        font-size: 24px;
      }
      p {
        font-size: 20px;
      }
      .a {
        line-height: normal;
      }
      .b {
        line-height: 25px;
      }
      .c {
        line-height: 1.6;
      }
      .d {
        line-height: 160%;
      }
      .e {
        line-height: 30%;
      }
    </style>
  </head>
  <body>
    <h1>line-height: normal</h1>
    <p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</p>
    <h1>line-height: 25px</h1>
    <p class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</p>
    <h1>line-height: 1.6</h1>
    <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</p>
    <h1>line-height: 160%</h1>
    <p class="d">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</p>
    <h1>line-height: 50%</h1>
    <p class="e">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</p>
  </body>
</html>

예제 2

숫자(number)와 숫자 이외의 값은 상속에서 차이가 납니다. 부모 요소의 line-height 값이 숫자라면 자식 요소의 줄 높이는 자식 요소의 글자 크기에 비례해서 높이가 조정됩니다. 예를 들어 부모 요소의 line-height 값이 1.5, 글자 크기가 30px, 자식 요소의 글자 크기가 20px라면

부모 요소의 줄 높이는 30의 1.5배인 45px
자식 요소의 줄 높이는 20의 1.5배인 30px

가 됩니다. 만약 부모 요소의 line-height 값이 150%라면

부모 요소의 줄 높이는 30의 150%인 45px
자식 요소의 줄 높이는 부모 요소의 값을 상속 받아 45px

가 됩니다. 따라서 부모 요소와 자식 요소 간 글자 크기의 차이가 크다면 숫자를 속성값으로 하는 것이 좋습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style type="text/css">
      body {
        font-size: 20px;
      }
      .a {
        line-height: 120%;
      }
      .b {
        line-height: 1.2;
      }
    </style>
  </head>
  <body>
    <div class="a">
      <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</p>
    </div>
    <div class="b">
      <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</p>
    </div>
  </body>
</html>

CSS / Reference / content

content는 선택한 요소의 앞이나 뒤에 텍스트, 이미지 등을 추가하는 속성입니다. 기본값 : normal 상속 : No 애니메이션 : No 버전 : CSS Level 2

CSS / Reference / font-style

font-style은 글자 모양을 정하는 속성으로, 기울임 여부를 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / text-decoration

개요 text-decoration은 선으로 텍스트를 꾸밀 수 있게 해주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 text-decoration: none | line-through | overline | underline | initial | inherit none : 선을 만들지 않습니다. line-through : 글자 중간에 선을 만듭니다. overline : 글자 위에 선을 만듭니다. underline : 글자 아래에 선을 만듭니다. initial : 기본값으로 ...

CSS / Reference / list-style-type

목록은 ul 태그 또는 ol 태그로 만듭니다. 목록 앞에 붙는 도형이나 문자을 마커(Marker)라고 하는데, 어떤 형식 또는 어떤 모양의 마커를 사용할지는 list-style-type으로 정할 수 있습니다.

CSS / Reference / font-variant

font-variant는 소문자를 작은 대문자, 즉 소문자 크기의 대문자로 바꾸는 속성입니다. 따라서 한글에서는 의미 없는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / background-clip

HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성이 background-clip입니다. 기본값 : border-box 상속 : No 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / border-spacing

개요 border-spacing은 표의 테두리와 셀의 테두리 사이의 간격을 정하는 속성입니다. 기본값 : 2px 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 border-spacing은 border-collapse의 값이 separate일 때만 적용됩니다. 문법 border-spacing: length | initial | inherit length : 길이를 입력합니다. 값이 한개면 모든 간격에 같은 값을 사용하고, 값이 두개면 첫번째 값은 좌우, 두번째 값은 상하의 간격으로 사용합니다. initial : ...

CSS / Reference / box-shadow

box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 글자에 그림자 효과를 주고 싶다면 text-shadow 속성을 사용합니다.

CSS / Reference / text-indent

들여쓰기와 내어쓰기는 text-indent 속성으로 만듭니다. 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 됩니다. 내어쓰기를 할 때는 왼쪽에 여백을 적절히 줍니다.

CSS / Reference / calc()

calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다. 예를 들어 다음은 는 글자 크기를 20px로 설정합니다. font-size: calc( 10px + 10px );