ListRow

원본: projects/skill-lens/design/components/ListRow/README.md

상태: Stable, 접근성 ✓, 다크 ✓, 코드 ✗

목록 행(8판 .jr): 줄 사이 선, 이름 600 + 보조 13, 행 끝 화살표나 링크, 체크 24. 묶음 머리말 두 꼴(보기용 작은 회색, 편집용 굵은 머리말 + 담은 수)

견본만 새 창으로

목록의 한 줄입니다. 원본은 8판 .jl, .jr. 카드 안에 줄 사이 선으로 이어 놓습니다.

쓰는 곳

직무 목록, 스킬셋 목록, 확인 필요 목록, 체크로 고르기.

구성(화면이 넘겨줄 것)

이름, 보조 글(small), (선택) 체크, 행 끝(화살표, 링크, 개수).

규칙

접근성

견본 코드

AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.

<!-- @dsCard group="Selection" height=640 width=880 subtitle="목록 행(8판 .jr): 줄 사이 선, 이름 600 + 보조 13, 행 끝 화살표나 링크, 체크 24. 묶음 머리말 두 꼴(보기용 작은 회색, 편집용 굵은 머리말 + 담은 수)" -->
<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-card"><div class="sl-rows">
<div class="sl-row"><span class="sl-row__main">교육 콘텐츠 기획<small>스킬 12개(하드 7, 소프트 5), 진단 6개</small></span><svg class="sl-ico sl-row__chev" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></div>
<div class="sl-row"><span class="sl-row__main">B2B 영업<small>스킬 11개(하드 5, 소프트 6), 진단 5개</small></span><svg class="sl-ico sl-row__chev" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></div>
<div class="sl-row is-pressed"><span class="sl-row__main">교육 운영 <span class="sl-status sl-status--active"><i></i>렌지가 짚음</span><small>스킬 8개(하드 3, 소프트 5), 진단 2개, 소프트가 많아요</small></span><svg class="sl-ico sl-row__chev" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></div>
</div></div>
<div class="sl-card">
<div class="sl-group sl-group--edit"><span class="sl-check" role="checkbox" aria-checked="mixed"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span><b>교육기획</b><span class="sl-group__count">3개 중 2개 담음</span></div>
<div class="sl-rows">
<div class="sl-row"><span class="sl-check" role="checkbox" aria-checked="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sl-row__main">교육 콘텐츠 기획<small>학습 콘텐츠를 기획하고 만들어요</small></span><span class="sl-row__end"><span class="sl-row__meta">212명</span></span></div>
<div class="sl-row"><span class="sl-check" role="checkbox" aria-checked="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sl-row__main">교육 운영<small>교육 과정을 열고 운영해요</small></span><span class="sl-row__end"><span class="sl-row__meta">171명</span></span></div>
<div class="sl-row"><span class="sl-check" role="checkbox" aria-checked="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sl-row__main">교수 설계<small>학습 목표와 평가를 설계해요</small></span><span class="sl-row__end"><a class="sl-btn sl-btn--link" href="#">보기</a></span></div>
</div></div>
<div class="sl-card"><div class="sl-group">교육기획 1개 확인</div><div class="sl-rows"><div class="sl-row sl-row--ai"><span class="sl-row__main">교육운영 매니저<small class="sl-row__ai"><i class="sl-lens-dot"></i>렌지가 공개 직무 사전에서 찾았어요: 표준 교육 프로그램 운영</small></span><span class="sl-row__end"><a class="sl-btn sl-btn--link" href="#">맞아요</a><a class="sl-btn sl-btn--link sl-btn--quiet" href="#">다른 표준</a></span></div></div></div>
</div>

이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.