목차 스타일 데모
계층형 제목과 스크롤 위치가 오른쪽 목차에 어떻게 반영되는지 확인하는 더미 문서입니다.
확인용 더미 문서
문서 개요
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae justo sed arcu consequat posuere. Donec feugiat, velit at finibus tempor, nibh sem interdum neque, vitae feugiat lectus erat non urna.
확인 목적
이 영역은 상위 제목과 하위 제목의 들여쓰기 차이를 보여줍니다. 스크롤할 때 현재 읽는 항목이 강조되고 진행선이 함께 이동합니다.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae justo sed arcu consequat posuere. Donec feugiat, velit at finibus tempor, nibh sem interdum neque, vitae feugiat lectus erat non urna.
사용 범위
데스크톱에서는 오른쪽 고정 목차로, 작은 화면에서는 상단 접이식 목차로 전환되는지 확인합니다.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae justo sed arcu consequat posuere. Donec feugiat, velit at finibus tempor, nibh sem interdum neque, vitae feugiat lectus erat non urna.
콘텐츠 구성
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae justo sed arcu consequat posuere. Donec feugiat, velit at finibus tempor, nibh sem interdum neque, vitae feugiat lectus erat non urna.
정보 구조
두 번째 깊이의 제목은 본문의 큰 구간을 나타내고, 세 번째 깊이의 제목은 각 구간 안의 세부 내용을 나타냅니다.
- 상위 제목은 목차 진행선의 기본 축에 배치합니다.
- 하위 제목은 한 단계 안쪽으로 들여써 관계를 보여줍니다.
- 현재 위치는 컬러 토큰을 사용해 강조합니다.
본문 요소
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae justo sed arcu consequat posuere. Donec feugiat, velit at finibus tempor, nibh sem interdum neque, vitae feugiat lectus erat non urna.
이 인용문도 목차와 본문 사이의 간격과 읽기 흐름을 확인하기 위한 더미 요소입니다.
검수 흐름
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae justo sed arcu consequat posuere. Donec feugiat, velit at finibus tempor, nibh sem interdum neque, vitae feugiat lectus erat non urna.
확인 항목
- 목차 항목을 누르면 해당 제목으로 이동하는지 확인합니다.
- 스크롤할 때 활성 색상과 진행선이 변경되는지 확인합니다.
- 라이트·다크 모드에서 대비가 유지되는지 확인합니다.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae justo sed arcu consequat posuere. Donec feugiat, velit at finibus tempor, nibh sem interdum neque, vitae feugiat lectus erat non urna.
완료 기준
모든 제목이 같은 순서로 표시되고 현재 구간이 정확히 강조되면 목차 데모의 확인을 마칩니다.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae justo sed arcu consequat posuere. Donec feugiat, velit at finibus tempor, nibh sem interdum neque, vitae feugiat lectus erat non urna.