가로 타임라인(월 표시, 줄 5개)

여러 업무가 몇 월부터 몇 월까지 이어지는지 한 장에 보여줄 때. 캠페인 일정, 분기 집행 계획. 월 4~8개, 줄 3~6개, 막대 안 글 6자 이내. 반달 단위로 위치 지정. 값 바꾸는 법: 월 이름은 .hd 의 span. 한 달이 2칸(반달)이라 칸 번호는 1~13(첫 달 = 1~2, 둘째 달 = 3~4). 막대 위치는 style="grid-column:시작/끝"(둘째 달 초부터 셋째 달 말까지 = 3/7). 강조 막대 하나에 class="hot". 마름모 표시는 .ms(시작 칸/시작+2). 월 수를 바꾸면 .hd 의 6, .tr 의 12, background-size 의 6 을 함께 변경.

SlideModel Roadmap Timeline(https://slidemodel.com/templates/roadmap-timeline-powerpoint-template/). Slidesgo Roadmap Infographics(https://slidesgo.com/theme/roadmap-infographics). 간트 차트를 얇은 막대와 월 구분선만 남겨 단순화한 방식. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-months">
  <div class="lb"></div><div class="hd"><span>10월</span><span>11월</span><span>12월</span><span>1월</span><span>2월</span><span>3월</span></div>
  <div class="lb"><b>진단과 설계</b>계정, 추적, 전략</div><div class="tr"><span class="bar" style="grid-column:1/4">진단 보고</span></div>
  <div class="lb"><b>검색 광고</b>브랜드, 일반 검색어</div><div class="tr"><span class="bar" style="grid-column:3/13">상시 운영</span></div>
  <div class="lb"><b>시즌 캠페인</b>연말 기획전</div><div class="tr"><span class="bar hot" style="grid-column:4/8">집중 집행</span></div>
  <div class="lb"><b>콘텐츠</b>후기, 인플루언서</div><div class="tr"><span class="bar" style="grid-column:5/9">1차</span><span class="bar" style="grid-column:10/13">2차</span></div>
  <div class="lb"><b>보고</b>월간 리포트</div><div class="tr"><span class="ms" style="grid-column:3/5"><i></i>10월분</span><span class="ms" style="grid-column:5/7"><i></i>11월분</span><span class="ms" style="grid-column:7/9"><i></i>12월분</span><span class="ms" style="grid-column:9/11"><i></i>1월분</span><span class="ms" style="grid-column:11/13"><i></i>2월분</span></div>
</div>

.dk-months{display:grid;grid-template-columns:176px minmax(0,1fr)}
.dk-months .hd{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-bottom:1px solid var(--line2);padding-bottom:10px}
.dk-months .hd span{font-size:var(--f-sm);font-weight:600;color:var(--mu);padding-left:10px}
.dk-months .lb{font-size:var(--f-cap);color:var(--mu);display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid var(--line);line-height:1.4}
.dk-months .lb:first-child{border:0}
.dk-months .lb b{font-size:var(--f-body);font-weight:700}
.dk-months .tr{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;height:62px;border-bottom:1px solid var(--line);background-image:linear-gradient(to right,var(--line) 1px,transparent 1px);background-size:calc(100% / 6) 100%}
.dk-months .lb:nth-last-child(2),.dk-months .tr:last-child{border-bottom:0}
.dk-months .bar{grid-row:1;height:30px;border-radius:4px;background:var(--g1);font-size:var(--f-cap);font-weight:600;color:var(--ink);display:flex;align-items:center;padding-left:12px;margin:0 3px 0 1px;white-space:nowrap}
.dk-months .bar.hot{background:var(--ac);color:var(--card)}
.dk-months .ms{grid-row:1;display:flex;align-items:center;gap:8px;font-size:var(--f-cap);color:var(--ink2);white-space:nowrap;margin-left:-5px}
.dk-months .ms i{width:10px;height:10px;background:var(--g4);transform:rotate(45deg);flex:none}