제안 시스템

디자인킷 · 레이아웃

본문: 전폭 표 자리와 아래 한 줄 노트

D-레이아웃-본문-전폭표노트

본문: 전폭 표 자리와 아래 한 줄 노트

언제 쓰는가

표가 주인공인 장. 표를 본문 전폭에 놓고 아래에 읽는 법이나 판단 한 줄. 표 조각(D-표-…)을 자리에 끼워 사용. 표 행 4~7개. 값 바꾸는 법: .slot 을 표 조각으로 교체(높이 300 이내). .note 한 줄(70자 이내). 출처는 .src.

참고

McKinsey·BCG·Bain 장 구성 해설(slidemodel.com/mckinsey-presentation-structure, deckary.com/blog/consulting-slide-standards, deckary.com/blog/executive-summary-slides) 의 "한 장에 표 하나 + 출처 줄", 증권사 리포트의 표 아래 주석. 구성 방식만 참고, 코드와 문구는 직접 제작.

조각

<section class="slide lo-table-note">
  <div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>PART 03 · 매체별 실행안</span></div>
  <div class="hd"><p class="lb">매체별 실행안</p><h1>검색 광고만 목표 전환 비용 이내, 나머지 3개 매체는 추적 보완 대상</h1><p class="lede">매체 4종의 2026년 3분기 성과 비교</p></div>
  <div class="body">
    <div class="slot">표 자리 · 폭 1152 × 높이 300, 행 4~7개</div>
    <p class="note">디스플레이와 SNS 광고는 클릭률이 평균 이상이나 전환 추적 누락으로 판단 보류. 1월 추적 설치 후 재평가</p>
  </div>
  <div class="pg">24</div>
  <div class="src">출처: 매체사 리포트 4종, 자사몰 주문 데이터</div>
</section>

스타일

.slide.lo-table-note .slot{background:var(--soft);border:1px dashed var(--line2);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:var(--f-cap);color:var(--mu)}
.slide.lo-table-note .body{gap:var(--s4)}
.slide.lo-table-note .slot{height:300px}
.slide.lo-table-note .note{margin:0;color:var(--ink2);padding-left:26px;position:relative}
.slide.lo-table-note .note::before{content:"→";position:absolute;left:0;color:var(--mu);font-weight:600}