CSS 페이지 매김 예제
CSS를 사용하여 반응형 페이지를 만드는 방법을 배웁니다.
단순 페이지 매김
페이지가 많은 웹 사이트가 있는 경우 각 페이지에 일종의 페이지 매김을 추가할 수 있습니다.
예시
.pagination {
display: inline-block;
}
.pagination a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
}
활성 및 호버블 페이지 매김
.active
클래스 가 있는 현재 페이지를 강조 표시하고 :hover
선택기를 사용하여 해당 페이지 위로 마우스를 이동할 때 각 페이지 링크의 색상을 변경합니다.
예시
.pagination a.active {
background-color:
#4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
둥근 활성 및 호버블 버튼
border-radius
둥근 "활성" 및 "호버" 버튼을 원하는 경우 속성을 추가하십시오 .
예시
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
호버블 전환 효과
transition
호버 시 전환 효과를 생성하려면 페이지 링크에 속성을 추가합니다 .
예시
.pagination a {
transition: background-color .3s;
}
테두리가 있는 페이지 매김
속성을 사용 border
하여 페이지 매김에 테두리를 추가합니다.
예시
.pagination a {
border: 1px solid #ddd; /* Gray
*/
}
둥근 테두리
팁: 페이지 매김의 첫 번째 링크와 마지막 링크에 둥근 테두리를 추가하세요.
예시
.pagination a:first-child {
border-top-left-radius:
5px;
border-bottom-left-radius: 5px;
}
.pagination
a:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
링크 사이의 공백
팁:margin
페이지 링크를 그룹화하지 않으려면 속성을 추가하십시오 .
예시
.pagination a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
페이지 매김 크기
font-size
속성 을 사용하여 페이지 매김 크기를 변경합니다 .
예시
.pagination a {
font-size: 22px;
}
중앙에 페이지 매김
페이지 매김을 가운데에 맞추려면 컨테이너 요소(예: <div>)를 다음으로 감쌉니다.text-align:center
예시
.center {
text-align: center;
}
더 많은 예
예시
빵 부스러기
페이지 매김의 또 다른 변형은 소위 "breadcrumbs"입니다.
예시
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}