디자인킷 · 레이아웃
표지: 왼쪽 정렬 제목형
D-레이아웃-표지-좌측제목
언제 쓰는가
문서의 첫 장. 문서명, 범위 한 줄, 대상·제안사·제출일·문서 구분을 왼쪽 시작선 하나에 정렬. 문서명 2줄 이내(줄당 13자 안팎), 아래 정보 3~4칸. 값 바꾸는 법: h1 에 문서명 그대로(수사 문구 금지). .scope 에 범위와 기간 한 줄. .meta 의 div 를 3~4개로 조절. 강조색은 .kind 한 곳.
참고
McKinsey·BCG·Bain 장 구성 해설(slidemodel.com/mckinsey-presentation-structure, deckary.com/blog/consulting-slide-standards, deckary.com/blog/executive-summary-slides) 의 표지 관행(문서명·대상·날짜만, 장식 없음). 구성 방식만 참고, 코드와 문구는 직접 제작.
조각
<section class="slide lo-cover-left">
<div class="body">
<div class="logo">제안사 로고 자리</div>
<div class="ttl">
<p class="kind">제안서</p>
<h1>모루리빙 2027 상반기<br>통합 디지털 마케팅 제안서</h1>
<p class="scope">검색 광고, 디스플레이 광고, 인플루언서 협업, 자사몰 전환 개선 · 2027년 1월~6월</p>
</div>
<dl class="meta">
<div><dt>대상</dt><dd>모루리빙 마케팅본부</dd></div>
<div><dt>제안사</dt><dd>슬로우베리</dd></div>
<div><dt>제출일</dt><dd>2026년 10월 5일</dd></div>
<div><dt>문서 구분</dt><dd>1차 제안 · 대외비</dd></div>
</dl>
</div>
</section>스타일
.slide.lo-cover-left{padding:56px 64px 48px}
.slide.lo-cover-left .body{padding:0;justify-content:space-between;gap:0}
.slide.lo-cover-left .logo{width:148px;height:36px;background:var(--soft);border:1px dashed var(--line2);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:var(--f-cap);color:var(--mu)}
.slide.lo-cover-left .kind{font-size:var(--f-body);font-weight:600;color:var(--ac);margin:0}
.slide.lo-cover-left h1{font-size:var(--f-big);font-weight:700;line-height:1.2;letter-spacing:-.03em;margin:12px 0 24px}
.slide.lo-cover-left .scope{font-size:var(--f-lg);color:var(--ink2);margin:0}
.slide.lo-cover-left .meta{display:flex;gap:56px;margin:0;padding-top:20px;border-top:1px solid var(--line2)}
.slide.lo-cover-left dt{font-size:var(--f-cap);color:var(--mu)}
.slide.lo-cover-left dd{font-size:var(--f-body);font-weight:600;margin:2px 0 0}