Web/CSS
[days02] 페이징 처리
다연
2020. 12. 4. 13:28
반응형
페이징 처리는 어디에서나 필수적이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
*{box-sizing: border-box;}
.pagination a{
color: black;
text-decoration: none;
width: 8.3%; /* 12개니까 대충 계산하기 */
float: left; /* a는 인라인이라 안먹으니까 추가 */
text-align: center;
/* 하고보니 빨간색 벗어남 => 오버플로 오토주기, pagination 가서 */
}
.pagination a:hover:not(.active){ /* .active 클래스를 가진 a태그는 제외시키자 (암기) */
background: #ddd;
}
.pagination a.active{
background: dodgerblue;
color:white;
}
.pagination {
/* border: 1px solid red; */ /* 기본적으로 보더는 부모꺼가 잡힌다 */
width: 50%; /* 누구의 반이란거야? 부모 (여기선 body) */
margin: 0 auto; /* border 가운데 정렬(항상 규칙마냥 씀) */
overflow: auto;
}
</style>
</head>
<body>
<h3>페이징 처리</h3>
<!-- .pagination>a[href="#"]*11>{$} -->
<div class="pagination">
<a href="#">1</a>
<a href="#">2</a>
<a href="#" class="active">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">></a>
<a href="#">»</a>
</div>
</body>
</html>
- margin: 0 auto;
border 가운데 정렬(항상 규칙마냥 씀)
- float: left;
인라인 안먹을때 추가 ex) a태그
반응형