디자인킷 · 레이아웃
목차: 번호·파트명·쪽 범위 줄 목록
D-레이아웃-목차-줄목록
언제 쓰는가
파트 번호, 파트명, 다루는 내용 한 줄, 쪽 범위를 줄 단위로 나열하는 목차. 4~6줄(부록 포함). 값 바꾸는 법: li 한 줄이 파트 하나. 4~6줄. 헤드카피에는 분량 사실만 기재. 진행 중인 파트를 표시하려면 해당 li 의 .no 색을 var(--ac) 로(그때는 .lb 를 무채색으로).
참고
McKinsey·BCG·Bain 장 구성 해설(slidemodel.com/mckinsey-presentation-structure, deckary.com/blog/consulting-slide-standards, deckary.com/blog/executive-summary-slides) 의 목차(agenda) 관행: 번호, 파트명, 쪽 범위만 두고 꾸밈 없음. 구성 방식만 참고, 코드와 문구는 직접 제작.
조각
<section class="slide lo-toc-list">
<div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>목차</span></div>
<div class="hd"><p class="lb">목차</p><h1>본문 4개 파트 30쪽, 부록 6쪽</h1></div>
<div class="body">
<ol>
<li><span class="no num">01</span><span class="nm">현황 진단</span><span class="ds">검색 유입 구조와 재구매 흐름 점검</span><span class="pp num">04~09</span></li>
<li><span class="no num">02</span><span class="nm">전략 방향</span><span class="ds">상반기 목표와 매체 역할 재배치</span><span class="pp num">10~15</span></li>
<li><span class="no num">03</span><span class="nm">매체별 실행안</span><span class="ds">검색, 디스플레이, 인플루언서, 자사몰</span><span class="pp num">16~27</span></li>
<li><span class="no num">04</span><span class="nm">운영과 보고</span><span class="ds">조직, 일정, 리포트 체계</span><span class="pp num">28~33</span></li>
<li><span class="no num">부록</span><span class="nm">참고 자료</span><span class="ds">지표 정의, 매체 규격, 수행 실적</span><span class="pp num">34~39</span></li>
</ol>
</div>
<div class="pg">02</div>
</section>스타일
.slide.lo-toc-list ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.slide.lo-toc-list li{display:grid;grid-template-columns:96px 300px 1fr auto;align-items:baseline;padding:17px 0;border-bottom:1px solid var(--line)}
.slide.lo-toc-list .no{font-size:var(--f-xl);font-weight:700;color:var(--mu)}
.slide.lo-toc-list .nm{font-size:var(--f-xl);font-weight:700}
.slide.lo-toc-list .ds{color:var(--ink2)}
.slide.lo-toc-list .pp{color:var(--mu)}