<style>
.breadcrumb-item+.breadcrumb-item::before { content: ">"; }
</style>
<body>
<nav aria-label="breadcrumb">
<ol class="breadcrumbs">
<li class="breadcrumb-item"><a href="#">first</a></li>
<li class="breadcrumb-item"><a href="#">second</a></li>
<li class="breadcrumb-item active" aria-current="page">third</li>
</ol>
</nav>
</body>
<nav> 태그 및 aria-label 속성 사용- 상위 페이지는
<a/> 태그 삽입
- 순서가 있는 목록 →
<ol/> 태그 사용
- 현재 선택된 페이지는
aria-current="page" 속성 사용
- 구분자는 CSS 의
::before 속성과 인접선택자 X + Y 으로 해결
목록을 나타내는 태그 종류
<ol>: ordered list: 순서가 있는 목록
- 해당 목록의 항목은 숫자로 표시된다. (순서가 있기 때문에)
<ul>: unordered list: 순서가 없는 목록
- 해당 목록의 항목은 불릿 으로 표시된다. (순서가 없기 때문에)
<dl>: definition list: 사전처럼 용어를 설명하는 목록을 만들때
웹 접근성
- 화면에는 목록의 숫자가 나타나지 않지만 스크린 리더는 음성 출력을 해준다.
- 이것을 응용하면 기사나 상품의 목록을 시각적으로는 현재 모양과 똑같이 하면서도
스크린 리더 사용자에게는 목록의 번호를 음성 출력함으로서 훨씬 더 깊은 배려를 할 수 있다.
