디자인킷 · 레이아웃
간지: 파트명과 이 파트의 장 목록
D-레이아웃-간지-장목록
언제 쓰는가
분량이 많은 파트 앞에 두는 간지. 왼쪽에 파트 번호와 파트명, 오른쪽에 이 파트의 장 제목과 쪽 번호. 장 4~6개. 값 바꾸는 법: .pt 파트 번호, h1 파트명(2줄 이내), li 에 장 제목과 쪽 번호. 4~6줄.
참고
McKinsey·BCG·Bain 장 구성 해설(slidemodel.com/mckinsey-presentation-structure, deckary.com/blog/consulting-slide-standards, deckary.com/blog/executive-summary-slides) 의 파트별 소목차(tracker) 관행. 구성 방식만 참고, 코드와 문구는 직접 제작.
조각
<section class="slide lo-div-list">
<div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>PART 03</span></div>
<div class="body">
<div class="grid">
<div class="l">
<p class="pt">PART 03</p>
<h1>매체별<br>실행안</h1>
<p class="pp num">16~27쪽</p>
</div>
<ol>
<li><span>검색 광고 구조 재편</span><span class="p num">16</span></li>
<li><span>디스플레이 광고의 재방문 유도 전환</span><span class="p num">18</span></li>
<li><span>인플루언서 리뷰 콘텐츠 월 12건</span><span class="p num">20</span></li>
<li><span>자사몰 전환 개선 4개 지점</span><span class="p num">22</span></li>
<li><span>매체별 역할과 지표 종합</span><span class="p num">24</span></li>
<li><span>상반기 월별 실행 일정</span><span class="p num">26</span></li>
</ol>
</div>
</div>
<div class="pg">16</div>
</section>스타일
.slide.lo-div-list .grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
.slide.lo-div-list .pt{font-size:var(--f-body);font-weight:600;color:var(--ac);margin:0}
.slide.lo-div-list h1{font-size:var(--f-num);font-weight:700;line-height:1.25;letter-spacing:-.025em;margin:10px 0 20px}
.slide.lo-div-list .pp{color:var(--mu);margin:0}
.slide.lo-div-list ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.slide.lo-div-list li{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:15px 0;border-bottom:1px solid var(--line);font-size:var(--f-lg);font-weight:600}
.slide.lo-div-list li .p{font-size:var(--f-body);font-weight:400;color:var(--mu)}