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;}

직접 시도해 보세요

둥근 모서리의 활성화 가능한 페이지

둥근 모서리의 "active"과 "hover" 버튼이 필요하다면 추가하세요 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; /* 회색 */
}

직접 시도해 보세요

둥근 모서리 테두리

주의事项：첫 번째와 마지막 링크에 둥근 모서리 테두리를 추가합니다：

예제

.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, 자유롭게 조정할 수 있습니다 */
}

직접 시도해 보세요

페이지 크기

사용하세요 font-size 속성을 변경하여 페이지 크기를 조정합니다：

예제

.pagination a {
  font-size: 22px;
}

직접 시도해 보세요

정중분 페이지

정중분 페이지를 중앙에 배치하려면, 설정된 text-align:center 의 컨테이너 요소(예 <div>)로 둘러싸여 있습니다：

예제

.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";
}

직접 시도해 보세요