HTML 코드
<ol class="steps">
<li class="done"><i>✓</i>약관 동의</li>
<li class="now"><i>2</i>정보 입력</li>
<li><i>3</i>완료</li>
</ol>
<style>
.steps{display:flex;list-style:none;padding:0;margin:0}
.steps li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;color:var(--muted);position:relative}
.steps li+li::before{content:"";position:absolute;top:14px;right:50%;width:100%;border-top:2px solid var(--border);z-index:-1}
.steps i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--border);color:var(--muted);font-weight:700}
.done i,.now i{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.now{color:var(--fg);font-weight:600}
</style>AI에게 이렇게 요청하세요
회원가입 3단계 화면 상단에 완료 단계는 체크, 현재 단계는 파란 원, 남은 단계는 회색으로 표시하는 스테퍼 넣어줘
<ol class="steps">
<li class="done"><i>✓</i>약관 동의</li>
<li class="now"><i>2</i>정보 입력</li>
<li><i>3</i>완료</li>
</ol>
<style>
.steps{display:flex;list-style:none;padding:0;margin:0}
.steps li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;color:var(--muted);position:relative}
.steps li+li::before{content:"";position:absolute;top:14px;right:50%;width:100%;border-top:2px solid var(--border);z-index:-1}
.steps i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--border);color:var(--muted);font-weight:700}
.done i,.now i{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.now{color:var(--fg);font-weight:600}
</style>언제 쓰나
회원가입, 결제, 설정 마법사처럼 정해진 순서로 진행하는 작업.
비슷한 것과 차이
- 진행 바: 퍼센트로 진행률만 표시, 단계 이름은 없음
- 브레드크럼: 사이트 안의 위치를 보여줌