반폭 목업 · 웹 보고서 대시보드(PC)

보고 체계나 운영 방식 제안 장의 절반 칸에 웹 보고서 첫 화면을 놓을 때. 옆 칸에는 보고 주기 표나 지표 정의. 수치 타일 4개, 단계 4행, 주간 막대 6개 고정. 값 바꾸는 법: .tl 의 span=지표 이름, b=값. 단계 막대는 u 의 width = 완료 건수 ÷ 전체 건수 × 100%. 주간 막대는 .bars i 의 height = 값 ÷ 최댓값 × 100%, 강조 막대 하나에 class="on". 창은 칸 폭과 높이를 그대로 채우고 글자는 12px 고정(행 간격과 막대만 늘어남). 아래 설명은 한 줄 30자 이내.

직접 제작. 마케팅 보고용 대시보드의 일반 구성(상단 수치 타일, 단계별 진행 막대, 주간 추이 막대)을 참고. 화면 구성만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지·실제 계정명 미사용.

<div class="dk dkh dkh-m-dash"><div class="dk-card"><p class="dk-lb">웹 보고서 · 진행 현황판</p><div class="scr mock"><div class="cr"><i></i><i></i><i></i></div><div class="tp"><b>10월 캠페인 진행 현황</b><span>기준일 10. 5.</span></div><div class="tl"><div><span>노출</span><b>128만</b></div><div><span>클릭</span><b>2.4만</b></div><div><span>전환</span><b>612건</b></div><div><span>전환율</span><b>2.5%</b></div></div><div class="pn"><div class="st"><b>단계별 진행</b><ul><li><span>기획</span><i><u style="width:100%"></u></i><em>12/12</em></li><li><span>제작</span><i><u style="width:75%"></u></i><em>9/12</em></li><li><span>검수</span><i><u style="width:50%"></u></i><em>6/12</em></li><li><span>발행</span><i><u style="width:17%"></u></i><em>2/12</em></li></ul></div><div class="ch"><b>주간 전환 추이</b><div class="bars"><i style="height:42%"></i><i style="height:58%"></i><i style="height:52%"></i><i style="height:73%"></i><i style="height:85%"></i><i class="on" style="height:100%"></i></div><div class="ax"><span>1주</span><span>2주</span><span>3주</span><span>4주</span><span>5주</span><span>6주</span></div></div></div></div><p class="cap"><b>화면 구성</b>수치 타일 4개, 단계별 진행, 주간 추이 · 구성 예시</p></div></div>

.dkh-m-dash .dk-card{display:flex;flex-direction:column;padding:18px 22px}
.dkh-m-dash .dk-lb{flex:none;margin:0 0 8px}
.dkh-m-dash .scr{flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid var(--line2);border-radius:8px;overflow:hidden;background:var(--card);font-size:12px;line-height:1.3;color:var(--ink);letter-spacing:-.01em}
.dkh-m-dash .scr b{font-weight:700}
.dkh-m-dash .cr{flex:none;height:14px;background:var(--g1);display:flex;align-items:center;gap:4px;padding:0 8px}
.dkh-m-dash .cr i{width:5px;height:5px;border-radius:50%;background:var(--g3)}
.dkh-m-dash .cap{flex:none;margin:8px 0 0;font-size:var(--f-cap);line-height:1.5;color:var(--mu)}
.dkh-m-dash .cap b{color:var(--ink2);margin-right:10px}
.dkh-m-dash .tp{flex:none;display:flex;justify-content:space-between;align-items:baseline;padding:8px 12px 6px}
.dkh-m-dash .tp span{color:var(--mu)}
.dkh-m-dash .tl{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 12px}
.dkh-m-dash .tl div{background:var(--soft);border-radius:5px;padding:5px 9px;display:flex;flex-direction:column}
.dkh-m-dash .tl span{color:var(--mu)}
.dkh-m-dash .tl b{font-size:15px}
.dkh-m-dash .pn{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:9px 12px 8px}
.dkh-m-dash .st,.dkh-m-dash .ch{display:flex;flex-direction:column;min-height:0;min-width:0}
.dkh-m-dash .st ul{flex:1;list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;justify-content:space-around}
.dkh-m-dash .st li{display:grid;grid-template-columns:26px 1fr 34px;align-items:center;gap:6px;color:var(--ink2)}
.dkh-m-dash .st li i{display:block;height:7px;border-radius:4px;background:var(--g1)}
.dkh-m-dash .st li u{display:block;height:100%;border-radius:4px;background:var(--g4)}
.dkh-m-dash .st li em{font-style:normal;color:var(--mu);text-align:right}
.dkh-m-dash .bars{flex:1;min-height:0;display:flex;align-items:flex-end;gap:8px;margin-top:6px;padding:0 4px;border-bottom:1px solid var(--line2)}
.dkh-m-dash .bars i{flex:1;background:var(--g2);border-radius:2px 2px 0 0}
.dkh-m-dash .bars i.on{background:var(--g4)}
.dkh-m-dash .ax{flex:none;display:flex;gap:8px;padding:2px 4px 0}
.dkh-m-dash .ax span{flex:1;text-align:center;color:var(--mu)}