1.2.1과 같은 완전한 섹션 경로를 표시하려면 순서가 있는 목록을 중첩하고 CSS counters()를 사용해 각 단계의 번호를 연결하세요. 이 튜토리얼에서는 Mac에서 로컬 HTML 파일을 만들고, 개요의 순서를 유지하며, 편집 후 번호 매김을 확인하는 방법을 설명합니다.

전체 경로 번호 매김은 어떻게 작동하나요?

완전한 섹션 경로는 항목이 모든 단계에서 어디에 위치하는지를 나타냅니다. 예를 들어 1.2.1는 첫 번째 최상위 항목의 두 번째 하위 항목 아래에 있는 첫 번째 항목을 뜻합니다. CSS는 중첩된 카운터 값을 결합하기 위한 counters()를 제공하며, 가장 바깥쪽 카운터부터 가장 안쪽 카운터까지 읽어 선택한 구분자를 넣습니다. MDN: counters() CSS 함수

이 작업에서 개요는 하위 분기가 있는 순서 목록입니다. 문서의 다른 위치에 있는 제목으로 자동 생성되는 목차가 아닙니다. HTML은 순서 목록의 항목을 트리 순서로 정의하므로, 소스 순서를 의도한 읽기 순서와 일치시키세요. HTML 표준: ol 요소

이 예제는 세 가지 규칙을 사용합니다. 참여하는 각 목록에 카운터를 만들고, 각 항목마다 카운터를 증가시키며, 항목 레이블 앞에 결합된 경로를 표시합니다. 이는 MDN에서 문서화한 중첩 카운터 패턴을 따르며, 선택자는 이 개요에만 적용되도록 범위를 제한합니다. MDN: CSS 카운터 사용하기

Mac에서 개요 파일 만들기

TextEdit와 Safari 같은 브라우저가 필요합니다. 전체 예제에는 자체 스타일시트와 예시용 샘플 콘텐츠가 포함되어 있으며, 패키지, 빌드 도구 또는 JavaScript가 필요하지 않습니다.

  1. TextEdit을 열고 File > New를 선택합니다.
  2. Format > Make Plain Text를 선택합니다.
  3. 아래의 전체 예제를 붙여넣습니다.
  4. File > Save를 선택하고 파일 이름을 outline.html으로 지정한 다음 데스크톱처럼 편리한 위치에 저장합니다.
  5. TextEdit에서 사용할 확장자를 묻는 경우 Use .html을 선택합니다.

Apple은 TextEdit에서 HTML 파일을 만들 때 이 일반 텍스트 작업 흐름을 안내합니다. Apple: Mac의 TextEdit에서 HTML 문서 작업하기

다음은 완전한 문서입니다. Markdown 펜스 줄은 제외하고 코드 블록의 내용을 복사하세요.

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

    .outline,
    .outline ol {
      counter-reset: outline-section;
      list-style-type: none;
      padding-inline-start: 1.5rem;
    }

    .outline li {
      counter-increment: outline-section;
      margin-block: 0.35rem;
    }

    .outline li::before {
      content: counters(outline-section, ".") " ";
      font-weight: 600;
    }
  </style>
</head>
<body>
  <h1>Sample document outline</h1>
  <ol class="outline" role="list">
    <li>Node A
      <ol role="list">
        <li>Node B</li>
        <li>Node C
          <ol role="list">
            <li>Node D</li>
            <li>Node E</li>
          </ol>
        </li>
        <li>Node F</li>
      </ol>
    </li>
    <li>Node G
      <ol role="list">
        <li>Node H</li>
      </ol>
    </li>
    <li>Node I</li>
  </ol>
</body>
</html>

Safari를 열고 Finder에서 outline.html를 Safari 창으로 드래그합니다. TextEdit에서 소스를 편집하고 Safari에서 렌더링된 개요를 확인하세요. 편집할 때마다 파일을 저장하고 브라우저 페이지를 새로고침합니다.

TextEdit을 코드 편집 모드로 유지하기

파일을 다시 열 때 소스 코드 대신 서식이 적용된 콘텐츠가 표시될 수 있습니다. Apple은 두 가지 방법을 안내합니다. File > Open을 사용하고 Show Options를 클릭한 다음 Ignore rich text commands를 선택하거나, TextEdit > Settings > Open and Save에서 Display HTML files as HTML code instead of formatted text를 활성화합니다. Apple: Mac의 TextEdit에서 HTML 문서 작업하기

샘플을 기준으로 완전한 경로 확인하기

예상되는 개요 표시 결과는 다음과 같습니다. 레이블은 의미 중립적인 자리표시자이며, 위치에 따라 번호가 결정됩니다.

1 Node A
  1.1 Node B
  1.2 Node C
    1.2.1 Node D
    1.2.2 Node E
  1.3 Node F
2 Node G
  2.1 Node H
3 Node I

이 샘플은 서로 다른 세 가지 전환을 확인합니다. Node D는 Node C 아래에서 세 번째 단계를 시작합니다. 해당 분기가 끝나면 Node F가 두 번째 단계를 이어갑니다. Node G는 최상위 단계를 이어가며, 첫 번째 하위 항목은 2.1에서 시작합니다. 샘플 트리를 결정적으로 순회해 예상 경로를 확인했으며, 준비 과정에서 예제를 브라우저에 렌더링하지는 않았습니다.

각 CSS 규칙이 중요한 이유

초기화 규칙은 .outline과 .outline ol 모두에 적용됩니다. 중첩된 각 목록에는 outline-section의 새 인스턴스가 필요합니다. 바깥 목록만 초기화하면 각 단계에 별도의 카운트가 설정되지 않습니다. 각 목록 항목에서 카운터를 증가시키면 현재 인스턴스의 값이 올라갑니다. MDN: CSS 카운터 사용하기

표시 규칙은 counters(outline-section, ".")를 사용합니다. 복수형 함수는 해당 이름을 가진 모든 활성 인스턴스의 값을 모읍니다. 이를 단수형 counter(outline-section)로 바꾸면 현재 단계의 값만 표시되어, 중첩된 항목에 완전한 경로 대신 1이 표시됩니다. MDN: counters() CSS 함수

이 예제는 자체 접두사를 제공하므로 기본 목록 마커를 제거합니다. 각 목록에는 role="list"도 있습니다. MDN 문서에 따르면, 그렇지 않으면 Safari가 list-style-type: none으로 스타일 지정된 목록을 접근성 트리에서 생략할 수 있습니다. 중첩 목록을 추가할 때도 이 속성을 유지하세요. MDN: list-style-type CSS 속성

구조를 깨뜨리지 않고 개요 편집하기

각 중첩 <ol>은 해당 분기를 소유하는 <li> 안에 넣으세요. 예를 들어 Node C의 하위 목록은 Node C의 닫는 </li> 앞에 들어갑니다. 중첩 목록은 다른 순서 목록의 직접 자식이 될 수 없습니다. MDN: HTML 순서 목록 요소

실용적인 편집 테스트로 Node C 바로 앞에 새 항목을 추가해 보세요. 새 경로는 1.2가 되고, Node C는 1.3가 되며, Node D와 Node E는 각각 1.3.1과 1.3.2가 되어야 합니다. Node G는 2로 유지되어야 합니다. 이러한 예상 변경 사항은 샘플의 계층 구조에 따라 달라지며, 번호가 분기 구조를 따르는지 확인하는 데 유용합니다.

분기를 이동하려면 중첩 목록과 닫는 태그를 포함해 해당 목록 항목 전체를 옮기세요. 레이블만 옮기면 하위 항목은 원래 위치에 남습니다. 네 번째 단계를 만들려면 적절한 항목 안에서 기존 중첩 목록 구조를 반복하세요. 레이블에 번호를 추가로 입력하지 마세요.

하위 항목이 하나의 연속된 순서를 이루어야 한다면 분기마다 하위 목록 하나만 유지하세요. 이 구현에서는 형제 하위 목록을 새로 만들면 카운터가 다시 초기화되어 해당 목록의 번호가 다시 시작됩니다. MDN의 예제는 같은 항목 아래에 별도의 중첩 목록을 두었을 때 번호가 다시 시작되는 것을 보여줍니다. MDN: CSS 카운터 사용하기

잘못된 번호 매김을 효과적으로 진단하기

구조를 먼저 확인한 다음 카운터 규칙과 표시 방식을 살펴보세요. 들여쓰기를 바꿔도 빠진 중첩 단계는 복구되지 않습니다.

표시되는 현상 확인할 항목 이 예제의 수정 방법
모든 중첩 항목에 번호 하나만 표시됨 content의 함수 마침표 구분자를 사용해 복수형 counters()를 적용합니다.
모든 형제 항목이 1에서 시작함 초기화 선택자 모든 항목이 아니라 목록에서 초기화합니다.
완전한 경로 옆에 기본 번호가 표시됨 list-style 규칙 바깥 목록과 중첩 목록에 list-style-type: none을 적용합니다.
분기의 접두사가 예상과 다름 중첩 목록의 위치 하위 목록을 소유 항목 안에 둡니다.
다른 위치의 목록에도 접두사가 붙음 카운터 선택자의 범위 규칙에서 .outline 접두사를 유지합니다.

항목이 숨겨졌는지도 확인하세요. display: none인 요소를 포함해 상자를 생성하지 않는 요소에서는 CSS 카운터 작업이 실행되지 않습니다. 반대로 visibility: hidden은 여전히 상자를 생성하므로 카운트에 영향을 줄 수 있습니다. 생략된 항목이 위치를 차지해야 하는지 의도적으로 선택하세요. W3C: 상자를 생성하지 않는 요소의 카운터

사용자 지정 시작 번호는 어떻게 지정하나요?

이 예제는 일부러 0에서 시작해 1씩 증가하는 사용자 지정 카운터를 사용합니다. start, reversed 같은 HTML 속성과 목록 항목의 value는 기본 순서 목록 번호 매김을 제어합니다. 여기서 보여 주는 사용자 지정 outline-section 규칙은 이러한 속성을 읽지 않습니다. 따라서 start="4"만 추가해도 이 예제에 표시되는 접두사는 4에서 시작하지 않습니다. HTML 표준: 순서 목록과 목록 항목

연속되지 않는 번호 매김이나 내림차순 분기가 필요하다면 이 스타일시트를 수정하기 전에 요구 사항을 정하세요. 사용자 지정 표시가 무시하는 속성을 추가하는 대신, 표시 경로가 의도한 순서 목록 값과 일치하도록 유지하세요.

번호가 표시용인지 문서 내용인지 결정하기

이 튜토리얼의 접두사는 CSS 생성 콘텐츠입니다. 시각적인 개요에는 적합하지만, 중요한 참조 정보라면 추가로 고려해야 합니다. MDN에 따르면 ::before로 추가한 콘텐츠는 스크린 리더에서 안정적으로 제공되지 않습니다. role="list"을 추가하면 목록으로 인식되지만, 생성된 모든 경로가 낭독된다고 보장되지는 않습니다. MDN: ::before CSS 의사 요소

일반 텍스트 내보내기처럼 완전한 경로가 실제 텍스트에 포함되어야 한다면 문서에 텍스트로 넣거나 내보내기 단계에서 생성하세요. 이렇게 하면 유지 관리 방식이 달라집니다. 편집할 때 저장된 경로도 함께 업데이트해야 합니다. 모든 출력 형식에서 시각적 접두사가 필수 텍스트를 제공한다고 가정하지 마세요.

로컬 시각 개요의 경우, 샘플 경로 9개를 확인하고 형제 항목을 삽입한 다음 해당 분기의 번호가 예상대로 다시 매겨지는지 확인하면 됩니다. 브라우저에서 확인을 마치면 중첩 구조와 소스 순서를 유지하면서 예시용 레이블을 바꾸세요.

출처