번호 목록 2열 6개

항목이 6개라 한 줄로 세우면 넘칠 때. 번호는 왼쪽 열을 위에서 아래로 채운 뒤 오른쪽 열로 이어짐. 항목 6개 고정(5개면 번호목록5 사용), 제목 12자 이내, 설명 2줄 이내. 값 바꾸는 법: li 하나가 항목. 번호는 세로 방향(왼쪽 열 먼저)으로 흐름. 행 수를 바꾸려면 CSS 의 grid-template-rows 반복 수와 nth-child 의 3 를 같이 바꿈.

글머리표 대안 정리 글(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-tn6">
  <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>15초 이내 소재 3종을 4주 주기로 교체</p></div></li>
    <li><span class="n num">04</span><div><h3>체험단</h3><p>월 20건 안팎, 검색 노출 키워드 기준으로 주제 배정</p></div></li>
    <li><span class="n num">05</span><div><h3>자사 채널</h3><p>주 2회 게시, 광고 소재와 같은 메시지 사용</p></div></li>
    <li><span class="n num">06</span><div><h3>보고</h3><p>상시 대시보드와 월간 종합 리포트 1건</p></div></li>
  </ol>
</div>

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