[pagination] CSS - 페이징 - (이전페이지/다음페이지/지정페이지) 이동 링크 버튼

(이전페이지/다음페이지/지정페이지)로 이동

 

<style>

.pagination {

  display: inline-block;

}

.pagination a {

  color: black;

  float: left;

  padding: 8px 16px;

  text-decoration: none;

  transition: background-color .3s;

  border: 1px solid silver;

}

.pagination a.on {

  background-color: tomato;

  color: white;

  border: 1px solid tomato;

}

.pagination a:hover:not(.on) {background-color: silver;}

</style>

<p>이전페이지/다음페이지 버튼</p>

<div class="pagination">

  <a href="#">❮</a>

  <a href="#">❯</a>

</div>

<p>지정 페이지로 이동</p>

<div class="pagination">

  <a href="#" class="on">Home</a>

  <a href="#">링크 1</a>

  <a href="#">링크 2</a>

  <a href="#">링크 3</a>

</div>

 

결과보기