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-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>
페이지 매김 화살표
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 색상 클래스 중 하나를 사용 하여 사용자가 현재 있는 페이지를 표시합니다.
예시
<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-center" 요소 안에 "w3-bar" 요소를 넣습니다.
예시
<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>