HTML 코드
<nav class="crumb"><a>홈</a><span>›</span><a>노트북</a><span>›</span><b>울트라북 14</b></nav>
<h2>울트라북 14</h2>
<style>
.crumb{display:flex;gap:8px;font-size:13px;color:var(--muted)}
.crumb a{color:var(--accent)}
.crumb b{color:var(--fg)}
h2{margin:8px 0}
</style>AI에게 이렇게 요청하세요
상세 페이지 제목 위에 '홈 > 카테고리 > 상품명' 순서로, 마지막 항목은 링크 없이 진하게 브레드크럼 넣어줘
<nav class="crumb"><a>홈</a><span>›</span><a>노트북</a><span>›</span><b>울트라북 14</b></nav>
<h2>울트라북 14</h2>
<style>
.crumb{display:flex;gap:8px;font-size:13px;color:var(--muted)}
.crumb a{color:var(--accent)}
.crumb b{color:var(--fg)}
h2{margin:8px 0}
</style>언제 쓰나
분류가 여러 단계인 쇼핑몰·문서 사이트에서 지금 위치를 알려주고 상위로 쉽게 돌아가게 할 때.
비슷한 것과 차이
- 스테퍼: 순서대로 진행하는 단계(1→2→3)를 보여줌. 브레드크럼은 위치(계층)를 보여줌