Shell

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

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

온보딩 틀(8판 jobs~0): 위 바 60(워드마크, 진행 점 420, 가이드), 가운데 카드 880(둥글기 24, 안쪽 32, 사이 24), 아래 띠 80. 폰은 위 56, 흰 본문, 아래 고정 버튼

견본만 새 창으로

온보딩과 진단 화면의 바깥 틀입니다. 원본은 8판 .fpc(PC)와 .fph(폰).

쓰는 곳

온보딩, 실무자 진단.

구성(화면이 넘겨줄 것)

위 바(워드마크, 진행 점, 가이드, 사용자), 카드 내용, 아래 띠의 이전, 이유 한 줄, 주 버튼.

규칙

• PC 위 바 60(좌우 72, 유리, 아래 1px 선): 왼쪽 워드마크(sl-topbar__brand), 가운데 진행 점 420(sl-topbar__progress, 단계 글은 숨김), 오른쪽 가이드와 사용자(sl-topbar__end, 13 회색).
• PC 카드: 최대 880, 흰 면, 1px 테, 둥글기 24, 안쪽 32, 사이 24. 카드 위아래 32. 머리는 sl-top sl-top--lg sl-top--flush.
• PC 아래 띠 80(유리, 위 1px 선): 안쪽 줄이 카드와 같은 880 폭. 왼쪽 이전, 오른쪽 이유 한 줄 + 주 버튼.
• 폰: 위 56(뒤로 + 진행 점), 본문은 흰 면 전체 폭(20 20 24, 사이 16), 아래 띠는 화면 아래 고정(이유 한 줄 + 주 버튼 56 전체 폭, 이전은 위 바의 뒤로).
• 카드 안의 sl-card는 겉모양 없이 내용만 보입니다.

접근성

• 아래 띠가 마지막 내용과 포커스를 가리지 않게 본문 아래 여백을 둡니다.

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