Breadcrumb & Pagination
😎 html
html 코드
Breadcrumb 부분
<a href="https://github.com/frenchkebab">frenchkebab</a>
<a href="https://github.com/Frenchkebab/html-css">html-css</a>Pagination 부분
<a href="#" aria-label="Go to previous page">Previous</a>
<ol>
<li><a href="#" aria-label="Current page. Go to page 1">1</a></li>
<li><a href="#" aria-label="Go to page 2">2</a></li>
<li><a href="#" aria-label="Go to page 3">3</a></li>
<li><a href="#" aria-label="Go to page 4">4</a></li>
<li><a href="#" aria-label="Go to page 5">5</a></li>
<li><button type="button" disabled>...</button></li>
<li><a href="#" aria-label="Go to page 6">6</a></li>
<li><a href="#" aria-label="Go to page 7">7</a></li>
<li><a href="#" aria-label="Go to page 8">8</a></li>
<li><a href="#" aria-label="Go to page 9">9</a></li>
</ol>
<a href="#" aria-label="Go to next page">Next</a>결과 화면
😎 css 입히기
Breadcrumb_Pagination.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Breadcrumb & Pagination</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="breadcrumb">
<a href="https://github.com/frenchkebab" aria-label="Go to frenchkebab profile page">frenchkebab</a>
<a href="https://github.com/Frenchkebab/html-css" aria-label="Go to Html Css repository page">html-css</a>
</div>
<div class="pagination">
<a href="#" aria-label="Go to previous page" class="disabled">Previous</a>
<ol>
<li class="current-page"><a href="#" aria-label="Current page. Go to page 1">1</a></li>
<li><a href="#" aria-label="Go to page 2">2</a></li>
<li><a href="#" aria-label="Go to page 3">3</a></li>
<li><a href="#" aria-label="Go to page 4">4</a></li>
<li><a href="#" aria-label="Go to page 5">5</a></li>
<li><button type="button" disabled>...</button></li>
<li><a href="#" aria-label="Go to page 6">6</a></li>
<li><a href="#" aria-label="Go to page 7">7</a></li>
<li><a href="#" aria-label="Go to page 8">8</a></li>
<li><a href="#" aria-label="Go to page 9">9</a></li>
</ol>
<a href="#" aria-label="Go to next page">Next</a>
</div>
</body>
</html>
styles.css
* {
margin: 0;
box-sizing: border-box;
}
html {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
'Helvetica Neue', sans-serif;
font-size: 16px;
line-height: 1.5;
color: #1f2d3d;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
margin: 0 auto;
background-color: #f8f9fa;
}
body::after {
content: 'frenchkebab©';
display: block;
margin-top: 50px;
color: #1f2d3d;
font-size: 12px;
font-weight: 600;
}
/* Breadcrumb */
.breadcrumb {
display: flex;
align-items: center;
margin-bottom: 56px;
font-size: 1.125rem;
color: #0366d6;
}
.breadcrumb::before {
content: '';
display: block;
width: 22px;
height: 22px;
margin-right: 4px;
background-color: transparent;
background-position: center center;
background-size: contain;
background-image: url('./assets/icon-repository.svg');
background-repeat: no-repeat;
}
.breadcrumb a {
color: inherit;
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
.breadcrumb a:first-child::after {
content: '/';
padding: 0 4px 0 8px;
color: #586069;
}
/* Pagination */
.pagination {
display: flex;
justify-content: center;
align-items: center;
border-radius: 3px;
background-color: #fff;
border: 1px solid #e1e4e8;
}
.pagination a,
.pagination button {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 7px 12px;
font-size: 13px;
font-weight: 500;
color: #0366d6;
text-decoration: none;
}
.pagination > a:first-child {
border-radius: 3px 0 0 3px;
}
.pagination > a:last-child {
border-radius: 0 3px 3px 0;
}
.pagination ol button {
background-color: #fff;
border: none;
}
.pagination ol {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
list-style-type: none;
background-color: #fff;
}
.pagination li {
display: inline-flex;
justify-content: center;
align-items: center;
min-width: 32px;
border-right: 1px solid #e1e4e8;
font-size: 13px;
font-weight: 500;
color: #0366d6;
}
.pagination li.disabled {
background-color: #fafbfc;
}
.pagination li.current-page {
border-color: #0366d6;
background-color: #0366d6;
}
.pagination li.current-page a {
color: #fff;
}
.pagination *[disabled],
.pagination .disabled {
color: #d1d5da;
background-color: #fafbfc;
}결과 화면
😎 알아갈 점
WAI-ARIA 란?
Web Accessibility Initiative – Accessible Rich Internet Applications 라는 의미로,
인터넷을 사용하는 사람들(특히 시각장애인들의 스크린 리더)이 조금 더 편하게 사용할 수 있도록 하는 방식으로, W3C의 기술 권고안.
button에서의 disabled 속성
여기서 다시 상기해서 알아가도록 하자!
... 부분처럼 회색처리되어 클릭이 되지 않는 버튼은 disabled 속성을 주면 된다!
ordered list
1, 2, 3, ..., 7, 8, 9 처럼 순서가 중요한 경우,
<ol>태그를 사용하도록 하자!
굳이 의미가 없는 부분
frenchkebab / html-css 의 '/'과 같은 경우 그냥 css로 처리를 해주는 것이 조금 더 깔끔한 것 같다!
anchor 태그에서의 disabled
disabled 속성은
<button>태그에서만 사용이 가능하므로, disabled 클래스 속성을 넣어주었다.
Blockchain Dev Journey