5. Breadcrumb & Pagination (feat. anchor의 끝판왕)

이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다.

출처:edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

김버그의 HTML&CSS는 재밌다 - 구름EDU

 

 

 

 

 

📸 Screenshot 

---

 

 

 

 

 

 

📝 메모

---

1. breadcrumb에서

책 모양 아이콘과 중간 슬래쉬는 의미적으로는 크게 중요하지 않고 꾸며주는 요소들 

=> 마크업하지 않고 CSS로 처리한다.

 

 

 

2. pagination에서

- Previous와 Next는 따로 <a> 태그로 뺄 것. 

- 페이지 목록은 순서가 중요하니까 <ol> 태그 쓸 것.

- 중간에 '...'으로 된 부분은 클릭도 안되고 다른 페이지로 넘어가는 요소가 아니니까 <a> 태그를 쓰기 보다는

  <button type="button" disabled>...</button>으로 처리

 

 

새로운 attribute!

aria-label=""

:인터넷에 접근성을 높이는 API로 생각하면 된다.

모든 태그에 사용 가능한 속성.

스크린 리더 이용자의 웹접근성을 높여준다.

 

aria-label을 사용하면

(특히 이번 예시에서처럼 pagination에서)

"Link 1", "Link 2", "Link 3" 이런 식으로 읽어 주는 것이 아니라

aria-label에 들어간 text를 읽어준다.

 

가령, 

스크린 리더가 "Link 1"이라고 읽어주면

도대체 무슨 Link인지, 갑자기 어디로 가는 건지(;;) 이해하기 어렵지만 

aria-label="Go to page 1"이라는 속성을 넣어주면

"Go to page 1"이라고 읽어주기 때문에

웹페이지 구조를 이해하고 사용하는데 훨씬 도움이 된다.

 

참고로 UI에는 아무 변화가 없다.