[HTML] 게시판 페이지 버튼(page-box) 만들기 - 연습

[HTML]
게시판 페이지 버튼(page-box) 만들기 - 연습

---

✔️ 게시판 버튼

		<div class="page-box">
			<div class="paginate">
				<span>1</span>
				<a href="#">2</a>
				<a href="#">2</a>
			</div>
		</div>

✨ 필요한 것

- 페이지 박스 class

- paginate

- a 태그

 

 

1. 페이지 박스 클래스

위아래 패딩 값 20px씩 주고, 전체 text 는 중간에 배치한다.

.page-box { clear: both; padding: 20px 0; text-align: center;}

 

 

2. paginate (페이지 박스 디자인)

.paginate {
	text-align: center; white-space: nowrap; font-size: 14px;}
	
.paginate a {
	border: 1px solid #ccc;
	color: #000;
	font-weight: 600;
	text-decoration: none;
	padding: 3px 7px;
	margin-left: 3px;
	vertical-align: middle;
}

.paginate a:hover, .paginate a:active {
	color: #6771ff;
}


.paginate span {
	border: 1px solid #e28d8d;
	color: #000;
	font-weight: 600;
	text-decoration: none;
	padding: 3px 7px;
	margin-left: 3px;
	vertical-align: middle;
}

💡 1번 박스는 <span> 태그로 되어 있어서 .paginate a 와 .paginate span 으로 나눠서 CSS 설정하기