간지: 큰 번호와 파트명

D-레이아웃-간지-큰번호

언제 쓰는가

파트가 바뀌는 자리에 두는 간지. 큰 번호, 파트명, 다루는 범위 한 줄, 쪽 범위만 표시. 파트명 12자 이내. 값 바꾸는 법: .no 번호, h1 파트명, .scope 범위 한 줄, .pp 쪽 범위. 수사 문구를 넣지 않는다.

참고

장 레이아웃 유형 정리(madegooddesigns.com/slide-layout-ideas), Behance·Dribbble pitch deck·editorial slide layout 검색 결과의 공통 구성 의 section divider(번호와 몇 단어만 두는 장). 구성 방식만 참고, 코드와 문구는 직접 제작.

조각

<section class="slide lo-div-num">
  <div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>PART 02</span></div>
  <div class="body">
    <p class="no num">02</p>
    <h1>전략 방향</h1>
    <p class="scope">상반기 목표 지표, 매체 역할 재배치, 운영 기준 변경</p>
    <p class="pp num">10~15쪽 · 6장</p>
  </div>
  <div class="pg">10</div>
</section>

스타일

.slide.lo-div-num .body{justify-content:flex-end;gap:0;padding:0 0 40px}
.slide.lo-div-num .no{font-size:var(--f-huge);font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--ac);margin:0}
.slide.lo-div-num h1{font-size:var(--f-num);font-weight:700;line-height:1.25;letter-spacing:-.025em;margin:20px 0 12px}
.slide.lo-div-num .scope{font-size:var(--f-lg);color:var(--ink2);margin:0}
.slide.lo-div-num .pp{font-size:var(--f-cap);color:var(--mu);margin:28px 0 0;padding-top:16px;border-top:1px solid var(--line2)}