HTML CSS를 가진 완벽한 목차-CSS 튜토리얼-php.cn

HTML CSS를 가진 완벽한 목차

Joseph Gordon-Levitt

풀어 주다： 2025-03-13 12:07:10

원래의

640명이 탐색했습니다.

HTML CSS를 가진 완벽한 목차

이 기사는 HTML 및 CSS 만 사용하여 강력하고 접근 가능한 목차 (TOC)를 구축하는데, 놀랍게도 도전적이지만 보람있는 노력입니다. 목표는 웹 페이지 (탐색 가능한 링크 포함)와 인쇄 매체 (책, 브로셔)에 적합한 TOC를 만드는 것이었고, 다단계 제목을 우아하게 처리하는 것이 었습니다.

목차 구성

TOC의 기본 구조는 간단합니다. 각 항목은 섹션 제목을 페이지 번호로 연결합니다. 종종 시각적 "리더"(점, 대시 등)를 연결합니다. 워드 프로세서에서 쉽게 생성되었지만 HTML 기반 워크 플로우가 주어지면 가능하지 않았습니다. 솔루션은 자동화 된 HTML 호환 접근법이 필요하여 접근성 및 인쇄물을 보장했습니다.

초기 연구에 따르면 유용하지만 불완전한 솔루션이 밝혀졌습니다. Julie Blanc의 "HTML에서 목차 구축"과 Christoph Grabo의 "CSS와의 반응 형 TOC 리더 라인"은 레이아웃 기술 (플로트 기반 대 CSS 그리드)에 대한 귀중한 통찰력을 제공했지만 요구 사항을 완벽하게 해결하지 못했습니다.

최적의 마크 업 선택

시맨틱 정확성은 마크 업 선택을 안내했습니다. 처음에<table> 그리고<code><dl></dl> 제목 페이지 번호 관계를 키 값 쌍으로 나타내는 것으로 간주되었습니다. 그러나 이들은 다단계 TOC (챕터 및 하위 섹션)에 불충분 한 것으로 판명되었습니다. 중첩<dl></dl> 요소는 의미 론적 선명도가 부족했습니다.

선택한 접근 방식은 주문한 목록을 활용했습니다 (<ol></ol> ) - 정렬되지 않은 목록보다 더 적합합니다 (<ul></ul> ) TOC의 순차적 특성. 제목 페이지 번호 관계는 각 목록 항목의 페이지 번호 전에 "페이지"를 명시 적으로 포함하여 유지 관리했습니다. 이 간단한 추가는 시각적 신호가 없어도 컨텍스트를 명확하게합니다.

기본적인 HTML 골격은 다음을 보여줍니다.

<ol role="list">
  <li>
    <a href="https://www.php.cn/link/8f646834ef1adefaef52d74d5ea8329d">
      장 또는 하위 섹션 제목 페이지 1
    </a>
    <ol role="list"></ol>
  </li>
</ol>

로그인 후 복사

목차 스타일링

스타일링은 몇 가지 단계를 포함했습니다.

자동 생성 숫자 제거 : 수동 번호 매기기를 사용하면 책에서 공통적 인 요소 (서문 등)가 허용됩니다.
목록 스타일 : 최상위 목록은 단락과 정렬하기 위해 padding: 0 사용합니다. 중첩 목록은 padding-inline-start: 2ch (글꼴 독립을위한 문자 width 기반 패딩)를 사용하여 들여 쓰기됩니다. 결정적으로, role="list" list-style-type: none 때 WebKit 브라우저의 목록 의미를 보존하기 위해 추가되었습니다.
제목 및 페이지 번호 스타일 : CSS 그리드는 특히 멀티 라인 타이틀의 우수한 정렬을 제공했습니다. 그리드의 두 열 ( grid-template-columns: auto max-content )은 제목이 사용 가능한 공간을 채우도록 확장하는 반면 페이지 번호 ( text-align: right )는 오른쪽에 맞 춥니 다. "페이지"텍스트는 접근성을 위해 visually-hidden 클래스를 사용하여 시각적으로 숨겨져 있습니다.
리더 구현 : leader() CSS 기능에는 지정되었지만 브라우저 지원이 부족합니다. 이전 기사에서 빌린이 솔루션은 긴 점이 길고 pseudo element를 사용하여 a ::after 사용합니다. 그러나 이것은 스크린 리더가 점을 알리는 것을 방지하기 위해 aria-hidden="true" 로 요소에 점을 감싸서 접근성을 향상 시켰습니다.
마무리 터치 : 최상위 항목이 굵게 표시되고 ( font-weight: bold ), 여백 ( margin-block-start: 1em )은 하위 섹션에서 장을 분리합니다. font-variant-numeric: tabular-nums and min-width: 2ch 적절한 리더 정렬을 위해 다른 숫자에 걸쳐 일관된 페이지 번호를 보장합니다.

결과 CSS는 효율적이고 유연하며 접근 가능하며 수정없이 중첩 하위 섹션을 수용합니다. 솔루션은 웹 탐색 및 인쇄 출력에도 효과적입니다. Julie Blanc, Christoph Grabo 및 Sara Soueidan에게 그들의 기여와 통찰력에 대한 신용이 제공됩니다.

위 내용은 HTML CSS를 가진 완벽한 목차의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!