실행 가능한 CSS 문서: 줄 간격

Q: line-height에 단위를 붙여야 하나요?

보통은 아니에요. 1.5 같은 단위 없는 값은 각 요소 자신의 글자 크기에 곱해져서 크기가 다른 자식에서도 비율이 유지돼요. 단위가 있는 값은 한 번 계산된 뒤 고정된 길이로 상속돼요.

Q: HTML에서 줄 간격은 어떻게 바꾸나요?

HTML에는 줄 간격 속성이 없어요. CSS 속성을 쓰세요. 예를 들어 두 줄 간격이라면 예요.

line-height가 하는 일

line-height는 텍스트 각 줄의 높이를 정해요. 그 높이와 글꼴 자체에 필요한 높이의 차이가 반으로 나뉘어 글자 위아래에 더해지기 때문에, 줄 사이 간격을 조절하는 속성이에요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line height</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 16px; color: #111827; }
    .row { display: flex; gap: 16px; align-items: flex-start; }
    p { margin: 0; width: 200px; padding: 8px; background: #e5e7eb; }
    .tight { line-height: 1; }
    .comfy { line-height: 1.5; }
    .double { line-height: 2; }
  </style>
</head>
<body>
  <div class="row">
    <p class="tight">line-height: 1. Lines touch and long text is hard to follow.</p>
    <p class="comfy">line-height: 1.5. Comfortable spacing for a paragraph.</p>
    <p class="double">line-height: 2. Double spacing, like a draft.</p>
  </div>
</body>
</html>

세 문단 모두 16px 글꼴을 써요. 줄 높이는 16px, 24px, 32px이에요.

값: 단위 없는 값, 길이, 퍼센트, normal

값	예시	16px 텍스트의 줄 높이	자식에게 상속되는 형태
숫자	`1.5`	24px	숫자(1.5), 요소마다 다시 계산
길이	`24px`, `1.5em`, `1.5rem`	24px	계산된 길이(24px)
퍼센트	`150%`	24px	계산된 길이(24px)
`normal`	`normal`	글꼴에서, 보통 약 1.2	`normal`

첫째 줄과 둘째 줄은 요소 하나에서는 똑같아 보여요. 자식의 글자 크기가 다를 때만 차이가 드러나고, 그게 다음 섹션이에요.

단위 없는 값이 올바른 기본값인 이유

1.5em이나 150% 줄 높이는 부모에서 픽셀로 바뀌고, 자식은 그 픽셀을 상속받아요. 그러면 글자가 더 큰 자식은 글자보다 낮은 줄을 갖게 돼요. 단위 없는 1.5는 숫자 그대로 상속되어 각 자식 자신의 글자 크기에 곱해져요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unitless vs em</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; color: #111827; }
    .box { width: 220px; padding: 8px; margin-bottom: 12px; background: #e5e7eb; }
    .em { line-height: 1.5em; }       /* 21px, inherited as 21px */
    .unitless { line-height: 1.5; }   /* inherited as 1.5 */
    h2 { font-size: 32px; margin: 0; }
  </style>
</head>
<body>
  <div class="box em">
    <!-- line-height: 1.5em -->
    <h2 id="em-h">A heading that wraps</h2>
  </div>
  <div class="box unitless">
    <h2 id="num-h">A heading that wraps</h2>
  </div>
  <p id="out"></p>
  <script>
    const lh = (id) => getComputedStyle(document.getElementById(id)).lineHeight;
    document.getElementById('out').textContent =
      'em box heading: ' + lh('em-h') + ', unitless box heading: ' + lh('num-h');
  </script>
</body>
</html>

두 제목 모두 두 줄로 넘어가요. 첫 번째는 32px 글자에 21px 줄을 상속받아서 줄이 겹쳐요. 두 번째는 32 × 1.5 = 48px 줄을 가져요. body에 line-height를 숫자로 한 번 지정하면 대부분의 페이지는 다시 손댈 필요가 없어요.

직접 값을 넣어 보기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line height tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { width: 320px; margin-top: 12px; padding: 8px; background: #e5e7eb; }
  </style>
</head>
<body>
  <label>line-height: <input id="val" value="1.5" size="12"></label>
  <p id="sample">Line height changes the space between the lines of this paragraph. Type a number, a length or a percentage and watch the gaps change.</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.lineHeight = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).lineHeight;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

1, 2, 30px, 200%, normal을 넣어 보세요. Chrome은 normal을 픽셀 값이 아니라 단어 그대로 보여 줘요. 크기가 글꼴에서 나오기 때문이에요.

읽기 좋은 텍스트를 위한 값

본문 텍스트: 1.4에서 1.6. 줄이 길수록 눈이 다음 줄의 시작을 찾을 수 있게 줄 간격이 더 필요해요.
제목: 1.1에서 1.3. 큰 텍스트에 1.5 간격을 주면 한 제목이 아니라 따로 떨어진 줄처럼 보여요.
버튼과 한 줄짜리 레이블: 1에서 1.25, 높이는 padding으로 잡아요.

접근성 측면에서 WCAG 성공 기준 1.4.12는 독자가 줄 높이를 글자 크기의 1.5배로 설정해도 페이지가 제대로 동작할 것을 요구해요. 그러니 텍스트를 잘라 버릴 고정 높이를 텍스트 상자에 주지 마세요.

한 줄 텍스트를 세로 가운데 정렬하기

상자에 정확히 한 줄만 있다면, 상자 높이와 같은 line-height를 주면 여분의 공간이 위아래로 똑같이 나뉘어 텍스트가 세로 가운데에 놓여요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Single line centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      height: 40px;
      line-height: 40px;
      padding: 0 16px;
      width: max-content;
      background: #2563eb;
      color: white;
      border-radius: 20px;
    }
  </style>
</head>
<body>
  <div class="badge" id="badge">One line, centered</div>
</body>
</html>

텍스트가 두 줄로 넘어가면 바로 깨져요. 그러면 각 줄이 40px 높이가 되기 때문이에요. 줄이 넘어갈 수 있는 것은 div 가운데 정렬 페이지에서 보여 주는 것처럼 flexbox로 가운데 정렬하세요.

font 단축 속성

font 단축 속성은 슬래시로 크기와 줄 높이를 함께 지정해요.

body {
  font: 16px/1.5 system-ui, sans-serif; /* size 16px, line-height 1.5 */
}

단축 속성은 언급하지 않은 모든 글꼴 속성을 초기화해요(슬래시 부분을 빼면 line-height도 normal로 돌아가요). 그러니 개별 font-* 규칙보다 먼저 쓰세요.

자주 하는 실수

컨테이너에 em이나 % 쓰기. 자식이 고정 길이를 상속받아요. 단위 없는 숫자를 쓰세요.
텍스트 상자에 고정 height. 텍스트가 넘어가거나 독자가 간격을 넓히면 넘쳐요. 높이는 콘텐츠가 정하게 두세요.
너무 빽빽한 본문. line-height: 1은 문단을 읽기 어렵게 해요. 1.5에서 시작하세요.
line-height가 문단 사이 간격을 늘릴 거라고 기대하기. 그건 문단의 margin이에요.
normal에 기대기. 글꼴마다 달라서 글꼴이 바뀌면 레이아웃이 움직여요.

자주 묻는 질문

CSS에서 line-height는 무엇을 하나요?

텍스트의 각 줄 상자 높이를 정해요. 글꼴 자체 높이를 넘는 여분의 공간은 글자 위아래로 똑같이 나뉘어서, line-height가 클수록 줄 사이 간격이 넓어져요.

line-height에 단위를 붙여야 하나요?

보통은 아니에요. 1.5 같은 단위 없는 값은 각 요소 자신의 글자 크기에 곱해져서 크기가 다른 자식에서도 비율이 유지돼요. 단위가 있는 값은 한 번 계산된 뒤 고정된 길이로 상속돼요.

본문 텍스트에 좋은 line-height는 얼마인가요?

문단은 1.4에서 1.6, 큰 제목은 1.1에서 1.3 정도예요. WCAG의 AAA 지침은 문단에 최소 1.5를 요구해요.

line-height: normal은 무엇인가요?

기본값이에요. 브라우저는 글꼴 자체의 수치에서 값을 가져와요. 보통 1.2 정도지만 글꼴마다 달라서 글꼴 사이에서 예측할 수 없어요.

HTML에서 줄 간격은 어떻게 바꾸나요?

HTML에는 줄 간격 속성이 없어요. CSS 속성을 쓰세요. 예를 들어 두 줄 간격이라면 <p style="line-height: 2;">예요.

CSS 줄 간격 line-height: 단위 없는 값, px, em