여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. w3.css - 페이지 매김
w3.css – 페이지 매김
2개월전 작성
3개월전 수정

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>
참고
Mingg`s Diary
밍구
공부 목적 블로그