Disclosure
원본: projects/skill-lens/design/components/Disclosure/README.md
상태: Experimental(초안), 접근성 △, 다크 ✓, 코드 ✗
접기와 용어 풀이
근거, 산식, 사용법처럼 필요한 사람만 여는 내용을 접어 둡니다. 낱말 풀이는 작은 말풍선(sl-tip)입니다.
쓰는 곳
SRS 산식 보기, 요구레벨 근거, 용어(필수, 확장, 진단스킬) 풀이.
구성(화면이 넘겨줄 것)
제목, 접힌 내용 / 낱말과 풀이 한 문장.
규칙
- 접힌 제목은 무엇이 들었는지 말합니다("산식 보기").
- 풀이는 한두 문장. 길면 접기로.
- 호버에만 나오지 않게, 누르면 열립니다(터치와 키보드).
접근성
- 접기는
details/summary또는aria-expanded. 풀이는 버튼 +aria-describedby.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Display" height=170 subtitle="접기와 용어 풀이" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}.stack{display:flex;flex-direction:column;gap:var(--space-3)}.wrap{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}</style>
<div class="sl stack">
<details class="sl-disclosure"><summary>산식 보기</summary><p>요구레벨 충족도 70 + 다양성 10 + 균형 10 + 참여도 10. 충족률은 min(1, 실제 ÷ 요구)이고 필수 1.0, 확장 0.5로 가중합니다.</p></details><p class="sl-tipline">이 스킬은 <button class="sl-tip">확장 스킬<span role="tooltip">직무와 연관이 상대적으로 낮지만 업무 폭을 넓히는 스킬이에요. 가중치 0.5.</span></button>이에요.</p>
</div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.