CSS 강좌 / 문단과 목록의 간격, 정렬, 목록 표시 설정하기

CSS에서 문단 안의 줄 간격은 line-height, 문단 사이 여백은 margin, 첫 줄 들여쓰기는 text-indent로 조절합니다. 목록은 표시 기호의 종류와 위치, 안쪽 여백, 항목 사이 간격을 따로 설정해야 긴 항목도 읽기 좋게 정렬할 수 있습니다.

문단 안의 간격과 문단 사이의 간격 나누기

.article p {
  line-height: 1.65;
  margin-block: 0 1.2em;
}

line-height를 키우면 같은 문단에서 줄의 배치가 넓어집니다. margin-block을 키우면 문단 상자와 다음 내용 사이의 바깥 여백이 늘어납니다. 둘을 같은 의미로 사용하면 짧은 문단에서는 괜찮아 보여도 긴 문단의 줄 간격이 과해질 수 있습니다.

margin-block: 0 1.2em은 쓰기 흐름의 시작 쪽 여백을 0, 끝 쪽 여백을 1.2em으로 정합니다. 이 예제처럼 가로쓰기에서는 위쪽 0, 아래쪽 1.2em입니다. 세로쓰기에서는 물리적인 방향이 달라지므로 항상 위·아래라는 뜻은 아닙니다. 여기서 em은 문단 자신의 글자 크기를 기준으로 합니다. 원리는 MDN의 margin-block 설명를 참고하세요.

브라우저는 p와 목록에 기본 여백을 부여합니다. CSS에서 원하는 값으로 덮어쓰면 기본 여백과 새 여백을 구분하기 쉽습니다. 바깥 세로 여백은 조건에 따라 서로 합쳐질 수 있으므로 두 선언의 숫자를 항상 단순히 더하지 마세요. 예제는 시작 여백을 0으로 정해 문단 사이 간격을 끝 여백에서 조절하도록 했습니다.

정렬과 첫 줄 들여쓰기 구분하기

.article p { text-align: start; }
.article .intro { text-indent: 1.5em; }

text-align은 줄 안의 텍스트 정렬을 정합니다. start는 글 흐름의 시작 쪽이며 기본적인 왼쪽에서 오른쪽으로 쓰는 한국어 문서에서는 왼쪽입니다. 문단 전체 상자를 화면 중앙으로 옮기는 속성은 아닙니다. 가운데 정렬한 긴 설명문은 줄마다 시작 위치가 달라지므로 본문에는 읽기 쉬운 정렬을 먼저 선택하세요.

text-indent: 1.5em은 각 줄이 아니라 첫 줄의 시작을 들여씁니다. 전체 예제의 첫 문단에 class="intro"를 넣었으므로 실제로 관찰할 수 있습니다. 문단 전체를 들여쓰려면 padding 등 다른 설정을 검토해야 합니다. 정렬·들여쓰기·여백을 각각 바꾸고 어떤 부분이 움직이는지 비교하세요.

목록 기호와 글자 시작 위치 조절하기

순서가 있는 과정에는 ol, 순서가 중요하지 않은 항목에는 ul을 사용합니다. CSS에서 숫자 모양을 점으로 바꾸더라도 원래 HTML 구조가 바뀌지는 않습니다. 내용의 의미를 먼저 선택하고 표시 방법을 조절하세요.

outside에서는 표시 기호가 밖에 있으므로 목록의 시작 쪽에 공간을 남겨야 합니다. 예제는 padding-inline-start: 1.6em을 사용합니다. 기본적인 가로쓰기 한국어에서는 왼쪽 padding에 해당합니다. inside는 기호가 첫 줄의 공간을 차지하여 긴 항목의 줄바꿈 위치가 달라집니다. 어느 쪽이 좋은지는 짧은 항목 하나로 결정하지 말고 실제 길이의 문장으로 확인하세요.

표시 기호를 없애려면 접근성도 함께 검토합니다. Safari는 nav 밖의 list-style: none 목록을 보조 기술에서 목록으로 인식하지 않을 수 있습니다. 의미를 유지해야 하는 디자인에서는 role="list" 보완 등을 검토할 수 있습니다. 이 강의의 전체 예제는 기호를 유지합니다. 관련 동작은 MDN의 list-style 설명에 설명되어 있습니다.

항목 사이 간격과 줄 사이 간격 구분하기

.article li + li { margin-block-start: 0.45em; }

li + li는 다른 li 바로 뒤에 오는 li를 선택합니다. 첫 항목 앞에는 추가 여백을 만들지 않고 두 번째 이후 항목 사이에만 간격을 넣습니다. 항목 내부에서 여러 줄로 이어지는 부분은 목록에서 물려받는 line-height로 조절합니다. 내용이 빽빽하다고 항목 간격만 늘리면 항목 안의 문장은 여전히 좁게 보일 수 있습니다.

긴 문단과 목록으로 실행하기

아래 코드를 paragraphs.html에 UTF-8로 저장하고 엽니다. 두 목록의 문장을 같게 두었으므로 표시 위치만 비교할 수 있습니다. 첫 줄 들여쓰기와 순서 있는 목록도 같은 파일에서 확인합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>문단과 목록 비교</title>
  <style>
    body { margin: 24px; font-family: sans-serif; color: #333; }
    .article { max-width: 65ch; }
    .article p { line-height: 1.65; margin-block: 0 1.2em; text-align: start; }
    .article .intro { text-indent: 1.5em; }
    .article ul, .article ol { padding-inline-start: 1.6em; margin-block: 0 1.2em; line-height: 1.65; }
    .article li + li { margin-block-start: 0.45em; }
    .outside { list-style-position: outside; }
    .inside { list-style-position: inside; }
    ol { list-style-type: decimal; }
  </style>
</head>
<body>
  <main class="article">
    <h1>작은 정원 이용 안내</h1>
    <p class="intro">정원에 처음 오셨다면 안내 표지를 먼저 확인하세요. 첫 문단에는 첫 줄 들여쓰기를 적용했습니다. 문장이 여러 줄로 이어지면 둘째 줄부터는 일반적인 문단 시작 위치로 돌아갑니다.</p>
    <p>문단 안의 줄 간격은 line-height, 문단과 다음 문단 사이의 공간은 margin으로 나누어 조절합니다. 화면을 좁혀 줄바꿈이 늘어나는 조건에서도 읽기 편한지 확인하세요.</p>
    <h2>outside 목록</h2>
    <ul class="outside">
      <li>물을 줄 때에는 흙의 상태를 먼저 확인하고, 화분 밖으로 흘러나온 물은 다른 방문자가 미끄러지지 않도록 닦아 주세요.</li>
      <li>이름표와 안내판을 읽고 통로를 따라 이동하세요. 여러 줄로 이어지는 항목의 둘째 줄이 첫 줄 글자와 어떻게 맞춰지는지 비교합니다.</li>
    </ul>
    <h2>inside 목록</h2>
    <ul class="inside">
      <li>물을 줄 때에는 흙의 상태를 먼저 확인하고, 화분 밖으로 흘러나온 물은 다른 방문자가 미끄러지지 않도록 닦아 주세요.</li>
      <li>이름표와 안내판을 읽고 통로를 따라 이동하세요. 여러 줄로 이어지는 항목의 둘째 줄이 첫 줄 글자와 어떻게 맞춰지는지 비교합니다.</li>
    </ul>
    <h2>순서가 있는 준비 과정</h2>
    <ol><li>안내문을 읽습니다.</li><li>물뿌리개를 준비합니다.</li><li>사용한 도구를 제자리에 돌려놓습니다.</li></ol>
  </main>
</body>
</html>

변경 결과를 확인하는 실습

1. 창 너비를 줄여 목록 항목이 두 줄 이상이 되게 합니다. outside는 글자 시작이 맞고, inside는 둘째 줄이 표시 기호가 있던 공간 쪽까지 돌아오는지 비교하세요.
2. .intro의 text-indent를 0으로 바꿉니다. 첫 문단의 첫 줄만 시작 위치가 달라지는지 확인하고 1.5em으로 되돌립니다.
3. 문단의 margin-block 끝 값을 0으로 바꿉니다. 문단 안의 줄 간격은 유지되면서 문단 사이가 줄어드는지 확인하세요. 다음으로 line-height만 1.2로 바꾸어 차이를 구분한 뒤 원래 값으로 되돌립니다.
4. li + li의 0.45em을 0과 1em으로 바꿔 비교합니다. 항목 내부 줄 간격과 첫 항목 앞쪽 공간이 달라지지 않는지 확인하세요.

기호가 잘리면 목록의 padding과 바깥 요소의 overflow를 확인합니다. 일부 문단만 다른 간격이면 선택자와 브라우저 기본 스타일을 확인하세요. 전체 예제의 65ch는 숫자 0의 너비를 기준으로 한 최대 길이이며 한국어 글자 수를 고정하는 값은 아닙니다.