디자인킷 · 레이아웃
표지: 강조색 면 분할형
D-레이아웃-표지-면분할
언제 쓰는가
왼쪽에 문서명, 오른쪽 3분의 1을 강조색 면으로 채워 문서 정보를 담는 표지. 브랜드 색을 가장 크게 쓰는 장이므로 덱에서 한 번만 사용. 문서명 2줄, 정보 3~4항목. 값 바꾸는 법: h1 문서명, .pane 의 항목 3~4개. 색면 폭은 .pane width(340)와 .body 오른쪽 padding(388)을 함께 조정.
참고
장 레이아웃 유형 정리(madegooddesigns.com/slide-layout-ideas), Behance·Dribbble pitch deck·editorial slide layout 검색 결과의 공통 구성 의 색면 분할 표지(색면은 정보만, 제목은 무채색 면). 구성 방식만 참고, 코드와 문구는 직접 제작.
조각
<section class="slide lo-cover-split">
<div class="body">
<p class="kind">제안서</p>
<h1>모루리빙 2027 상반기<br>통합 디지털 마케팅 제안서</h1>
<p class="scope">검색 광고, 디스플레이 광고, 인플루언서 협업, 자사몰 전환 개선</p>
</div>
<dl class="pane">
<div><dt>대상</dt><dd>모루리빙 마케팅본부</dd></div>
<div><dt>제안사</dt><dd>슬로우베리</dd></div>
<div><dt>집행 기간</dt><dd>2027년 1월~6월</dd></div>
<div><dt>제출일</dt><dd>2026년 10월 5일</dd></div>
</dl>
</section>스타일
.slide.lo-cover-split{padding:56px 64px 48px}
.slide.lo-cover-split .body{padding:0 388px 0 0;gap:0}
.slide.lo-cover-split .kind{font-size:var(--f-body);font-weight:600;color:var(--mu);margin:0}
.slide.lo-cover-split h1{font-size:var(--f-big);font-weight:700;line-height:1.2;letter-spacing:-.03em;margin:12px 0 24px}
.slide.lo-cover-split .scope{font-size:var(--f-lg);color:var(--ink2);margin:0}
.slide.lo-cover-split .pane{position:absolute;top:0;right:0;bottom:0;width:340px;margin:0;padding:56px 48px 48px 40px;background:var(--ac);display:flex;flex-direction:column;justify-content:flex-end;gap:24px}
.slide.lo-cover-split .pane dt{font-size:var(--f-cap);color:var(--acw)}
.slide.lo-cover-split .pane dd{font-size:var(--f-lg);font-weight:600;color:var(--card);margin:2px 0 0}