<br> 태그로 구분된 줄바꿈 항목에 내어쓰기를 적용하려면 블록 컨테이너에 text-indent: 2em hanging each-line을 지정하세요. 두 키워드가 모두 지원되는지 확인하세요. 구형 브라우저도 고려해야 한다면 각 항목을 별도의 블록으로 만들고 패딩과 음수 들여쓰기를 사용하세요.

이 가이드는 Mac에서 간단한 HTML 페이지를 편집하면서 모든 항목의 시작은 왼쪽 가장자리에 맞추고 이어지는 줄은 더 안쪽에 놓고 싶은 사용자를 위한 것입니다. 예제에는 실제와 무관한 텍스트를 사용하며, 일반 텍스트 편집기나 코드 편집기와 브라우저만 있으면 됩니다.

줄바꿈 태그 뒤에서 일반 내어쓰기가 작동하지 않는 이유

고려해야 할 줄 끝에는 두 가지 유형이 있습니다. <br>은 명시적인 줄바꿈을 만듭니다. 소프트 줄바꿈은 브라우저가 텍스트를 사용 가능한 너비에 맞출 때 발생합니다. 원하는 레이아웃에서는 첫 번째 줄 끝이 새 항목의 시작이고, 두 번째 줄 끝은 이어지는 줄입니다. WHATWG는 <br>을 줄바꿈으로 정의하며, 새 문단이나 항목 컨테이너를 만들지는 않습니다. HTML 표준: br 요소.

일반적인 음수 text-indent는 블록의 서식이 적용된 첫 번째 줄에 영향을 줍니다. 따라서 패딩을 추가하면 해당 블록에 내어쓰기를 적용할 수 있지만, 각 <br> 뒤에서 내어쓰기가 다시 시작되지는 않습니다. 뒤따르는 항목도 여전히 같은 블록에 속합니다. MDN: text-indent.

CSS 사양은 여기에 필요한 조합을 정의합니다. each-line은 첫 번째 줄과 강제 줄바꿈 바로 다음에 오는 줄을 포함하고, hanging는 그 선택을 뒤집습니다. 두 옵션을 함께 사용하면 소프트 줄바꿈으로 이어지는 줄은 안쪽으로 들여쓰고, 명시적으로 시작된 각 줄은 가장자리에 맞춥니다. W3C: 첫 줄 들여쓰기.

목표 레이아웃은 다음과 같습니다. 아래의 줄 끝은 설명을 위한 예시입니다. 브라우저는 사용 가능한 너비와 글꼴 메트릭을 바탕으로 실제 줄바꿈 지점을 결정합니다.

항목 A는 바깥쪽 가장자리에서 시작해 이어집니다
    사용 가능한 너비를 채우면 안쪽으로 이어집니다.
항목 B도 바깥쪽 가장자리에서 시작하며
    자체적으로 들여쓴 이어지는 줄이 있습니다.
항목 C는 짧습니다.

페이지를 변경하기 전에 방법 선택하기

기존 마크업과 브라우저 요구 사항을 바탕으로 접근 방식을 선택하세요. 이 결정 표는 문서화된 들여쓰기 동작과 브라우저 지원 데이터를 따릅니다. 별도의 브라우저 기능이라기보다 구현을 돕기 위한 안내입니다.

상황 권장 방법
명시적 줄바꿈이 하나의 텍스트 구절에 속하고 지원되는 브라우저면 충분한 경우 줄바꿈을 유지하고 hanging each-line 사용
항목이 별도의 문단이나 목록 항목인 경우 각 항목에 적절한 구조 마크업 적용
구형 브라우저에서도 내어쓰기가 표시되어야 하는 경우 항목마다 블록을 만들고 패딩과 음수 들여쓰기 사용
CSS만 편집할 수 있고 구형 브라우저가 키워드를 지원하지 않는 경우 읽기 쉬운 기본 왼쪽 정렬 레이아웃을 유지하거나 마크업 변경 요청

기본 text-indent 지원 여부만으로 키워드 지원을 추론하지 마세요. MDN의 최신 호환성 데이터에 따르면 hanging과 each-line은 Safari 15, Firefox 121, Chrome 146부터 지원됩니다. 구형 버전은 일반 들여쓰기는 지원하면서 이 조합은 거부할 수 있습니다. MDN 브라우저 호환성 데이터: text-indent.

줄바꿈이 올바른 구조를 나타내는지도 확인하세요. WHATWG는 <br>을 콘텐츠에 속하는 줄바꿈에 사용하며, 문단 안의 주제별 그룹을 구분하는 데 사용해서는 안 된다고 규정합니다. 별도의 문단에는 문단 요소를 사용하고, 목록에는 목록 마크업을 사용하세요. HTML 표준: br 요소, HTML 표준: 콘텐츠 그룹화.

기본 CSS 방식을 사용하면서 줄바꿈 태그 유지하기

다음 전체 HTML 문서는 줄바꿈을 유지하는 방법을 보여 줍니다. Mac에서 일반 텍스트 편집기나 코드 편집기에 붙여넣고 hanging-indent.html로 저장한 다음 브라우저에서 파일을 여세요. 서식 있는 텍스트 문서가 아니라 HTML 파일을 사용하세요.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Break-separated hanging indent</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .entries {
      max-inline-size: 30rem;
      margin: 0;
      white-space: normal;
      text-align: start;
      text-indent: 0;
    }

    @supports (text-indent: 2em hanging each-line) {
      .entries {
        text-indent: 2em hanging each-line;
      }
    }
  </style>
</head>
<body>
  <h1>Sample entries</h1>
  <p class="entries">Entry A: A long sample line describing a pale rectangular panel, a narrow heading area, and a small square beside the heading.<br>
Entry B: Another long sample line describing a circular tile, an open space beneath it, and a row of neutral labels.<br>
Entry C: A short sample line.</p>
</body>
</html>

@supports 조건은 선언 전체가 지원되는지 확인한 뒤 적용합니다. 이 조합을 지원하지 않는 브라우저에서는 명시적으로 정의된 왼쪽 정렬 레이아웃이 유지됩니다. 기능 쿼리는 브라우저 지원 여부에 따라 CSS를 조건부로 적용합니다. MDN: @supports.

텍스트를 포함하는 블록인 .entries에 들여쓰기를 적용하세요. 해당 속성은 블록 컨테이너에 적용됩니다. <br>에 선언을 넣어도 다음 항목을 위한 컨테이너가 생기지 않습니다. MDN: text-indent.

2em은 조정 가능한 디자인 선택입니다. 좁은 레이아웃을 확인한 뒤 더 작거나 큰 값을 사용해 보세요. 이 값은 이어지는 줄의 간격을 일정하게 만듭니다. Entry A:의 너비를 측정하거나, 길이가 제각각인 레이블 다음의 첫 단어에 맞춰 텍스트를 자동으로 정렬하지는 않습니다.

모든 브라우저에서 들여쓰기가 필요하면 별도 블록 사용하기

각 항목이 독립적인 문단이라면 마크업을 변경해 각 항목이 자체 첫 줄을 갖도록 하세요. 다음 완성된 대안은 구분용 줄바꿈을 제거하고 각 문단에 전통적인 내어쓰기 계산을 개별적으로 적용합니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Paragraph hanging indents</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .entries {
      max-inline-size: 30rem;
      text-indent: 0;
    }

    .entry {
      margin: 0;
      padding-inline-start: 2em;
      text-indent: -2em;
      white-space: normal;
      text-align: start;
    }
  </style>
</head>
<body>
  <h1>Sample entries</h1>
  <div class="entries">
    <p class="entry">Entry A: A long sample paragraph describing a pale rectangular panel, a narrow heading area, and a small square beside the heading.</p>
    <p class="entry">Entry B: Another long sample paragraph describing a circular tile, an open space beneath it, and a row of neutral labels.</p>
    <p class="entry">Entry C: A short sample paragraph.</p>
  </div>
</body>
</html>

패딩은 문단의 콘텐츠 시작 위치를 2em만큼 안쪽으로 이동합니다. 음수 들여쓰기는 첫 번째 줄만 같은 거리만큼 바깥으로 이동합니다. 줄바꿈된 줄은 패딩된 시작 위치를 유지합니다. 값은 같아야 합니다. 하나만 바꾸면 첫 번째 줄의 시작 위치가 달라집니다. MDN은 음수 들여쓰기를 설명하고, padding-inline-start은 논리적 시작 가장자리에 패딩을 지정합니다. MDN: text-indent, MDN: padding-inline-start.

예시 글꼴 크기가 16픽셀이라면 2em 오프셋은 32픽셀에 해당합니다. 이어지는 줄은 32픽셀 안쪽에서 시작하고, 첫 줄 조정은 −32픽셀입니다. 이는 예시를 위한 계산이며 실제 렌더링 결과를 측정한 값은 아닙니다.

이 구조를 사용할 때는 기존 구분자를 제거하세요. 각 항목 전체와 기존 인라인 서식을 새 문단 안에 유지하세요. 콘텐츠가 목록이라면 대신 목록 항목을 사용하세요. 문단 예시는 독립된 문단에만 적합합니다. HTML 표준: 콘텐츠 그룹화.

마무리 전에 줄바꿈과 텍스트 흐름 확인하기

긴 항목 두 개가 모두 줄바꿈되는 너비에서 페이지를 테스트하세요. 그런 다음 창을 넓혀 한 줄에 들어갈 때까지 확인하세요. 다음 점검 항목을 활용해 들여쓰기 문제와 줄바꿈 또는 구조 문제를 구분하세요.

  1. 모든 항목의 시작을 확인하세요. 줄바꿈 유지 예시에서는 각 <br> 뒤의 텍스트가 바깥쪽 가장자리로 돌아와야 합니다. 그렇지 않다면 키워드 조합 전체의 지원 여부를 확인하세요.
  2. 이어지는 각 줄을 확인하세요. 긴 항목은 안쪽으로 줄바꿈되어야 합니다. 짧은 항목은 불필요한 앞 공백 없이 가장자리에 맞아야 합니다.
  3. 의도한 가장 좁은 열을 확인하세요. 들여쓰기가 사용 가능한 줄 너비를 너무 많이 차지하면 줄이세요.
  4. 실제 콘텐츠를 확인하세요. 콘텐츠를 별도 블록으로 옮길 때 각 항목의 단어와 인라인 강조, 의도된 명시적 줄바꿈을 유지하세요.

아무것도 줄바꿈되지 않으면 white-space을 확인하세요. 예제는 normal를 사용합니다. 이 설정은 소스 공백을 축약하고 줄바꿈을 허용합니다. pre는 공백을 유지하지만 일반적인 소프트 줄바꿈을 막습니다. pre-wrap은 공백을 유지하면서 줄바꿈을 허용합니다. 이어지는 줄이 생기지 않으면 들여쓰기도 표시되지 않습니다. MDN: white-space.

들여쓰기를 흉내 내려고 공백을 추가하지 마세요. white-space: normal에서는 연속된 공백이 하나로 축약됩니다. 현재 창에서 줄이 바뀌는 지점에 줄바꿈 태그를 추가하는 것도 피하세요. 그러면 브라우저가 선택한 이어지는 줄이 명시적인 시작점으로 바뀌어 each-line의 처리 방식이 달라집니다. MDN: white-space, W3C: 첫 줄 들여쓰기.

줄바꿈과 글리프 셰이핑은 브라우저가 처리하도록 하세요. 화면에 보이는 줄을 계산하려고 항목을 문자 단위 래퍼로 나누지 마세요. W3C 문서에 따르면 문자 사이의 인라인 패딩, 테두리 또는 여백이 0이 아닌 경우를 포함해 인라인 경계가 셰이핑을 방해할 수 있습니다. 이 작업에서는 항목 전체를 의도된 경계에서 줄바꿈하면 단어 내부에 그런 경계를 추가하지 않아도 됩니다. W3C: 요소 경계를 넘는 셰이핑.

콘텐츠에 맞는 구조로 마무리하세요. 의미 있는 명시적 줄바꿈을 유지하면서 hanging each-line을 적용하거나, 독립적인 항목에 각각 자체 블록을 부여하세요. 의도한 너비에서 모든 항목이 가장자리에 맞춰 시작하고 자연스럽게 줄바꿈된 이어지는 줄만 안쪽으로 이동하는지 확인하세요.

출처