StatRow
원본: projects/skill-lens/design/components/StatRow/README.md
상태: Stable, 접근성 ✓, 다크 ✓, 코드 ✗
숫자 칸(8판 .nums): 칸 사이 1px 선, 라벨 위 숫자 아래. 아래는 숫자 칸이 곧 필터(고른 칸 보라 링 2 + 연보라)
핵심 숫자 셋~넷을 한 줄로 보여 줍니다. 원본은 8판 .nums(보드맞춤 1판).
쓰는 곳
화면 머리 아래 요약("추천 직무 46개, 바로 사용 41개, 확인 필요 5개").
구성(화면이 넘겨줄 것)
라벨과 숫자 쌍(라벨이 위, 숫자가 아래), 강조 하나.
규칙
- 칸 사이 1px 선으로 붙은 한 덩어리, 둥글기 12, 칸 안쪽 14 16.
- 라벨 13 회색, 숫자 28 800(폰 20). 넷이면
sl-stats--4(폰은 둘씩 두 줄). --accent는 보라 숫자,--attention은 진한 산호 숫자(바탕은 바꾸지 않음).- 필터 변형(
sl-stats--filter): 숫자 칸이 곧 필터. 고른 칸은 보라 링 2 + 연보라 바탕. 따로 칩 줄을 두지 않습니다. - 숫자는 천 단위 쉼표, 단위를 붙입니다.
접근성
- 필터 칸은
role="tab"+aria-selected(또는aria-pressed).
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Display" height=290 width=880 subtitle="숫자 칸(8판 .nums): 칸 사이 1px 선, 라벨 위 숫자 아래. 아래는 숫자 칸이 곧 필터(고른 칸 보라 링 2 + 연보라)" -->
<style>body{margin:0;padding:var(--space-6);background:var(--canvas)}.stack{display:flex;flex-direction:column;gap:var(--space-6)}.w880{max-width:814px}</style><div class="sl stack w880">
<div class="sl-stats"><div class="sl-stat"><span class="sl-stat__label">직무</span><span class="sl-stat__value">46개</span></div><div class="sl-stat"><span class="sl-stat__label">스킬(겹침 빼고)</span><span class="sl-stat__value">126개</span></div><div class="sl-stat sl-stat--accent"><span class="sl-stat__label">꼭 묻는 진단스킬</span><span class="sl-stat__value">43개</span></div></div>
<div class="sl-stats sl-stats--filter" role="tablist"><button class="sl-stat" role="tab" aria-selected="false"><span class="sl-stat__label">추천 직무</span><span class="sl-stat__value">46개</span></button><button class="sl-stat" role="tab" aria-selected="false"><span class="sl-stat__label">바로 사용</span><span class="sl-stat__value">41개</span></button><button class="sl-stat sl-stat--attention" role="tab" aria-selected="true"><span class="sl-stat__label">확인 필요</span><span class="sl-stat__value">5개</span></button></div>
</div>이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.