How To - 다음 및 이전 버튼

w3.css

다음 및 이전 버튼

CSS를 사용하여 ‘다음’과 ‘이전’ 버튼을 만드는 방법을 알아보자.

다음 및 이전 버튼을 만드는 방법

1단계) HTML 추가

<a href="#" class="previous">« Previous</a>
<a href="#" class="next">Next »</a>

<a href="#" class="previous round">‹</a>
<a href="#" class="next round">›</a>

2단계) CSS 추가

a {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
}

a:hover {
  background-color: #ddd;
  color: black;
}

.previous {
  background-color: #f1f1f1;
  color: black;
}

.next {
  background-color: #04AA6D;
  color: white;
}

.round {
  border-radius: 50%;
}

기본 예시

예제 보기