번호 목록 2열 8개

항목이 7~8개라 한 줄로 세우면 넘칠 때. 번호는 왼쪽 열을 위에서 아래로 채운 뒤 오른쪽 열로 이어짐. 항목 8개(7개면 마지막 칸을 비움), 제목 12자 이내, 설명 1줄 이내. 값 바꾸는 법: li 하나가 항목. 번호는 세로 방향(왼쪽 열 먼저)으로 흐름. 행 수를 바꾸려면 CSS 의 grid-template-rows 반복 수와 nth-child 의 4 를 같이 바꿈.

글머리표 대안 정리 글(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-tn8">
  <ol>
    <li><span class="n num">01</span><div><h3>계정 진단</h3><p>캠페인 구조와 전환 설정 확인</p></div></li>
    <li><span class="n num">02</span><div><h3>키워드 정리</h3><p>검색어 묶음과 제외어 목록 작성</p></div></li>
    <li><span class="n num">03</span><div><h3>소재 제작</h3><p>묶음별 문구와 이미지 3종</p></div></li>
    <li><span class="n num">04</span><div><h3>랜딩 점검</h3><p>첫 화면 문구와 버튼 위치 확인</p></div></li>
    <li><span class="n num">05</span><div><h3>집행 개시</h3><p>검색과 디스플레이 동시 시작</p></div></li>
    <li><span class="n num">06</span><div><h3>주간 조정</h3><p>성과 좋은 묶음으로 예산 이동</p></div></li>
    <li><span class="n num">07</span><div><h3>월간 보고</h3><p>지표, 증빙, 다음 달 조정안</p></div></li>
    <li><span class="n num">08</span><div><h3>분기 점검</h3><p>목표 대비 진척과 범위 재확인</p></div></li>
  </ol>
</div>

.dk-tn8 ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(4,auto);grid-auto-flow:column;column-gap:64px}
.dk-tn8 li{display:grid;grid-template-columns:60px minmax(0,1fr);align-items:center;min-height:94px;border-top:1px solid var(--line)}
.dk-tn8 li:nth-child(4n+1){border-top-color:var(--line2)}
.dk-tn8 li:nth-child(4n){border-bottom:1px solid var(--line2)}
.dk-tn8 .n{font-size:var(--f-xl);font-weight:700;color:var(--g2);line-height:1}
.dk-tn8 h3{font-size:var(--f-lg);font-weight:700;margin:0 0 2px;line-height:1.35}
.dk-tn8 p{margin:0;font-size:var(--f-body);color:var(--ink2)}