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 / text-align

text-align은 문단 정렬 방식을 정하는 속성입니다. 기본값 : 읽는 방향이 LTR(왼쪽에서 오른쪽)인 경우 left, RTL(오른쪽에서 왼쪽)인 경우 right 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / letter-spacing, word-spacing

글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정합니다. 값이 커지면 간격이 커집니다. 값에는 음수를 넣을 수 있습니다. 음수를 값으로 하는 경우 글자가 겹칠 수 있습니다.

CSS / Reference / background-origin

개요 HTML 요소는 박스로 이루어져 있고, 바깥 여백 영역(Margin Area), 테두리 영역(Border Area), 안쪽 여백 영역(Padding Area), 내용 영역(Content Area)으로 구분합니다. background-origin으로 배경 이미지를 어느 영역부터 채워나갈지를 정합니다. 기본값 : padding-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-origin: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역 왼쪽 위부터 채웁니다. padding-box : 안쪽 여백 영역 왼쪽 ...

CSS / Reference / white-space

개요 white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 white-space: normal | nowrap | pre | pre-wrap | pre-line | initial | inherit normal, nowrap, pre, pre-wrap, pre-line : 아래 표 참고 initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 스페이스와 탭1 줄바꿈2 자동 줄바꿈3 normal 병합 병합 O nowrap 병합 병합 X pre 보존 보존 X pre-wrap 보존 보존 O pre-line 병합 보존 O 연속된 스페이스와 탭의 처리 방법입니다. 병합은 1개의 ...

CSS / Reference / empty-cells

empty-cells은 표(table)에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성입니다. 기본값 : show 상속 : Yes 애니메이션 : No 버전 : CSS Level 2

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 / font-variant

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

CSS / Reference / font-size

font-size는 글자 크기를 정하는 속성입니다. 기본값 : medium 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1

CSS / Reference / background-clip

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

CSS / Reference / font-style

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