체크리스트 2열(완료·예정)

D-도식-글-체크리스트2열

언제 쓰는가

준비 사항이나 점검 항목의 진행 여부를 한눈에 보일 때. 2열, 열마다 4~5개, 항목 1줄, 오른쪽에 시점. 값 바꾸는 법: 완료 항목은 li 에 class="on" 과 채운 네모(i.bx.on + svg), 예정 항목은 빈 네모(i.bx). span=시점. 아래 .lg 의 em 에 완료 수 / 전체 수를 맞춰 적음. 열마다 4~5개.

참고

점검표 양식(네모 칸과 체크, 완료 항목은 진하게 예정 항목은 흐리게)과 프로젝트 준비 상태 장표. 글머리표 대안 정리 글(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-tchk">
  <div class="c">
    <h3>집행 전 준비</h3>
    <ul>
      <li class="on"><i class="bx on"><svg viewBox="0 0 24 24"><path d="M19 7 10 16l-5-5"/></svg></i><b>광고 계정 권한 공유</b><span>9월 1주</span></li>
      <li class="on"><i class="bx on"><svg viewBox="0 0 24 24"><path d="M19 7 10 16l-5-5"/></svg></i><b>전환 기준 합의서 작성</b><span>9월 2주</span></li>
      <li class="on"><i class="bx on"><svg viewBox="0 0 24 24"><path d="M19 7 10 16l-5-5"/></svg></i><b>키워드 묶음과 제외어 확정</b><span>9월 3주</span></li>
      <li class="on"><i class="bx on"><svg viewBox="0 0 24 24"><path d="M19 7 10 16l-5-5"/></svg></i><b>소재 1차 시안 검수</b><span>9월 4주</span></li>
      <li><i class="bx"></i><b>랜딩 화면 문구 수정</b><span>10월 1주 예정</span></li>
    </ul>
  </div>
  <div class="c">
    <h3>집행 후 운영</h3>
    <ul>
      <li class="on"><i class="bx on"><svg viewBox="0 0 24 24"><path d="M19 7 10 16l-5-5"/></svg></i><b>대시보드 주소 전달</b><span>9월 4주</span></li>
      <li class="on"><i class="bx on"><svg viewBox="0 0 24 24"><path d="M19 7 10 16l-5-5"/></svg></i><b>주간 회의 요일 확정</b><span>9월 4주</span></li>
      <li><i class="bx"></i><b>체험단 1차 모집</b><span>10월 2주 예정</span></li>
      <li><i class="bx"></i><b>소재 2차 교체</b><span>10월 4주 예정</span></li>
      <li><i class="bx"></i><b>첫 월간 리포트</b><span>11월 1주 예정</span></li>
    </ul>
  </div>
  <p class="lg"><span><i class="bx on"><svg viewBox="0 0 24 24"><path d="M19 7 10 16l-5-5"/></svg></i>완료</span><span><i class="bx"></i>예정</span><em class="num">완료 6 / 전체 10</em></p>
</div>

스타일

.dk-tchk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px}
.dk-tchk h3{margin:0;padding-bottom:12px;font-size:var(--f-lg);font-weight:700;border-bottom:1px solid var(--line2)}
.dk-tchk ul{list-style:none;margin:0;padding:0}
.dk-tchk li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;min-height:56px;border-bottom:1px solid var(--line)}
.dk-tchk li b{font-size:var(--f-md);font-weight:500;color:var(--mu)}
.dk-tchk li.on b{font-weight:600;color:var(--ink)}
.dk-tchk li span{font-size:var(--f-cap);color:var(--mu)}
.dk-tchk .bx{display:inline-flex;width:20px;height:20px;border:1.5px solid var(--g2);border-radius:4px}
.dk-tchk .bx.on{background:var(--ink);border-color:var(--ink)}
.dk-tchk .bx svg{width:100%;height:100%;fill:none;stroke:var(--card);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.dk-tchk .lg{grid-column:1/-1;display:flex;align-items:center;gap:24px;margin:16px 0 0;font-size:var(--f-cap);color:var(--mu)}
.dk-tchk .lg span{display:inline-flex;align-items:center;gap:8px}
.dk-tchk .lg .bx{width:14px;height:14px;border-radius:3px}
.dk-tchk .lg em{margin-left:auto;font-style:normal;font-size:var(--f-body);font-weight:700;color:var(--ac)}