제안 시스템

디자인킷 · 도식

원칙 4가지(굵은 낱말과 설명)

D-도식-글-원칙4

원칙 4가지(굵은 낱말과 설명)

언제 쓰는가

순서가 없는 원칙이나 약속 4개. 번호 없이 굵은 낱말이 표제 역할. 4개 고정, 낱말 2~5자, 설명 2줄 이내. 값 바꾸는 법: div 하나가 원칙(h3 굵은 낱말, p 설명). 4개 고정. 색 강조 없음. 낱말이 6자를 넘으면 문장처럼 읽히므로 줄임.

참고

편집 디자인의 2단 격자와 큰 표제어 조판(상자 없이 윗선 하나로 칸을 구분). 글머리표 대안 정리 글(Visme 'bullet points presentation' https://visme.co/blog/bullet-points-presentation/ , SlideGenius '3 Bullet Point Alternatives' https://www.slidegenius.com/blog/3-bullet-point-alternatives-that-will-improve-your-deck , Maurizio La Cava FAQ https://www.mauriziolacava.com/en/faq/creative-alternatives-to-using-bullet-points-on-a-slide/)의 '목록을 구조로 바꾼다'는 방식 참고. 구성 방식만 참고, 그림과 코드는 직접 제작.

조각

<div class="dk dk-tpr">
  <div><h3>기준 먼저</h3><p>전환과 기여 기간의 집계 기준을 집행 전에 문서로 확정. 기준이 바뀌면 이전 수치도 같은 기준으로 다시 계산</p></div>
  <div><h3>주 단위</h3><p>예산과 소재 조정은 매주 같은 요일에 한 번. 그 사이의 변경은 긴급 건에 한정하고 사유를 기록</p></div>
  <div><h3>그대로 보고</h3><p>미노출, 삭제, 목표 미달 건도 빼지 않고 대체 조치와 함께 기재</p></div>
  <div><h3>창구 하나</h3><p>매체가 몇 개든 연락과 보고는 전담 AE 한 사람을 통해 진행</p></div>
</div>

스타일

.dk-tpr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 72px}
.dk-tpr>div{padding-top:22px;border-top:1px solid var(--line2);min-height:150px}
.dk-tpr h3{margin:0 0 8px;font-size:var(--f-h);font-weight:700;line-height:1.25;letter-spacing:-.025em}
.dk-tpr p{margin:0;font-size:var(--f-body);color:var(--ink2);line-height:1.65}