w3.css

페이지 매김

 

페이지가 많은 웹사이트가 있다면 일종의 페이지 매김 기능을 사용하고 싶을 수도 있다.

기본 페이지 매김을 생성하려면 막대(w3-bar)에 있는 버튼(w3-button)을 사용한다.

예제

<div class="w3-bar">
  <a href="#" class="w3-button">1</a>
  <a href="#" class="w3-button">2</a>
  <a href="#" class="w3-button">3</a>
  <a href="#" class="w3-button">4</a>
  <a href="#" class="w3-button">5</a>
</div>

 

버튼 사이의 공간을 제거하려면 w3-bar-item 클래스를 추가한다.

예제

<div class="w3-bar">
  <a href="#" class="w3-bar-item w3-button">1</a>
  <a href="#" class="w3-bar-item w3-button">2</a>
  <a href="#" class="w3-bar-item w3-button">3</a>
  <a href="#" class="w3-bar-item w3-button">4</a>
  <a href="#" class="w3-bar-item w3-button">5</a>
</div>

페이지 매김 화살표

아이콘 라이브러리의 HTML 엔터티나 아이콘을 사용하여 페이지 매김 화살표를 추가한다.

예제

<div class="w3-bar">
  <a href="#" class="w3-button">«</a>
  <a href="#" class="w3-button">1</a>
  <a href="#" class="w3-button">2</a>
  <a href="#" class="w3-button">3</a>
  <a href="#" class="w3-button">4</a>
  <a href="#" class="w3-button">5</a>
  <a href="#" class="w3-button">»</a>
</div>

활성/현재 링크

w3- color 클래스 중 하나를 사용하여 사용자가 현재 있는 페이지를 나타낸다.

예제

<div class="w3-bar">
  <a href="#" class="w3-button">«</a>
  <a href="#" class="w3-button w3-green">1</a>
  <a href="#" class="w3-button">2</a>
  <a href="#" class="w3-button">3</a>
  <a href="#" class="w3-button">4</a>
  <a href="#" class="w3-button">»</a>
</div>

호버 색상

기본적으로 페이지 매김 링크 위로 마우스를 이동하면 배경색이 회색으로 표시된다.
호버 색상을 변경하려면 w3-hover- color 클래스 중 하나를 사용한다.

예제

<div class="w3-bar">
  <a href="#" class="w3-button w3-hover-purple">«</a>
  <a href="#" class="w3-button w3-hover-green">1</a>
  <a href="#" class="w3-button w3-hover-red">2</a>
  <a href="#" class="w3-button w3-hover-blue">3</a>
  <a href="#" class="w3-button w3-hover-black">4</a>
  <a href="#" class="w3-button w3-hover-orange">»</a>
</div>

페이지 매김 크기 조정

w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge 또는 w3-xxxlarge를 사용하여 페이지 매기기 크기를 조정한다.

 

예제

<div class="w3-bar w3-xlarge">

중앙 페이지 매김

페이지 매김을 중앙에 배치하려면 “w3-bar” 요소를 “w3-center” 요소 안에 넣는다.

예제

<div class="w3-center">
<div class="w3-bar">
  <a href="#" class="w3-bar-item w3-button">«</a>
  <a href="#" class="w3-button">1</a>
  <a href="#" class="w3-button">2</a>
  <a href="#" class="w3-button">3</a>
  <a href="#" class="w3-button">4</a>
  <a href="#" class="w3-button">»</a>
</div>
</div>

테두리가 있는 페이지 매김

테두리가 있는 페이지 매김을 생성하려면 w3-border 클래스를 추가한다.

예제

<div class="w3-bar w3-border">

둥근 테두리

둥근 테두리를 위해 w3-border 옆에 w3-round 클래스를 추가한다.

예제

<div class="w3-bar w3-border w3-round">

다음/이전 예

w3-bar 클래스를 사용하여 다음/이전 버튼을 만들 수도 있다.

 

예제

<div class="w3-bar w3-border w3-round">
  <a href="#" class="w3-button">❮ Previous</a>
  <a href="#" class="w3-button w3-right">Next ❯</a>
</div>

인라인 메뉴 예

예제

<div class="w3-show-inline-block">
<div class="w3-bar w3-light-grey">
  <a href="#" class="w3-bar-item w3-button w3-dark-grey">Home</a>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>