CSS페이징 만들어봤습니다.
항상 도움만 받다가 필요에의해 만든거라 팁이랄것도 없지만 필요하신 분들 계실지몰라 올려봅니다..^^

위 디자인으로 제작했구요..아이콘도 CSS로 그렸습니다.
기본 그누보드5에서 다른건 아무것도 수정하지 않으셔도 됩니다.
사용하시려는 해당 게시판 style.css 맨 하단에 넣어주시기만하면 적용됩니다.
[code]
/* Customized Paging */
.pg_wrap { clear:both; }
.pg_page { /* 기본페이지 */
width:30px !important;
height:30px !important;
font-size:13px;
color:#333;
line-height:33px;
padding:0;
background:#fff;
border:0;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
text-align:center;
display:inline-block;
}
.pg_page:hover {
background:#f2f2f2;
}
.pg_current { /* 현재페이지 */
width:30px !important;
height:30px !important;
font-size:13px;
color:#fff;
font-weight:normal;
line-height:33px;
margin:0;
padding:0;
background:#333;
border:0;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
text-align:center;
display:inline-block;
}
.pg_start { /* 처음 */
position:relative;
top:50%;
width:28px !important;
height:28px !important;
background:#fff;
border:1px solid #ccc;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
text-indent:-9999px;
display:inline-block;
}
.pg_start:after {
position:absolute;
top:10px;
left:10px;
content:"";
width:6px;
height:6px;
border-top:1px solid transparent;
border-right:1px solid transparent;
border-bottom:1px solid #777;
border-left:1px solid #777;
transform:rotate(45deg);
}
.pg_start:before {
position:absolute;
top:10px;
left:16px;
content:"";
width:6px;
height:6px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid #777;
border-left: 1px solid #777;
transform:rotate(45deg);
}
.pg_start:hover {
background:#fff;
border:1px solid #333;
}
.pg_prev { /* 이전 */
position:relative;
top:50%;
width:28px !important;
height:28px !important;
background:#fff;
border:1px solid #ccc;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
text-indent:-9999px;
display:inline-block;
}
.pg_prev:after {
position:absolute;
top:10px;
left:13px;
content:"";
width:6px;
height:6px;
border-top:1px solid transparent;
border-right:1px solid transparent;
border-bottom:1px solid #777;
border-left:1px solid #777;
transform:rotate(45deg);
}
.pg_prev:hover {
background:#fff;
border:1px solid #333;
}
.pg_next { /* 다음 */
position:relative;
top:50%;
width:28px !important;
height:28px !important;
background:#fff;
border:1px solid #ccc;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
text-indent:-9999px;
display:inline-block;
}
.pg_next:after {
position:absolute;
top:10px;
right:13px;
content:"";
width:6px;
height:6px;
border-top:1px solid #777;
border-right:1px solid #777;
border-bottom:1px solid transparent;
border-left:1px solid transparent;
transform:rotate(45deg);
}
.pg_next:hover {
background:#fff;
border:1px solid #333;
}
.pg_end { /* 맨끝 */
position:relative;
top:50%;
width:28px !important;
height:28px !important;
background:#fff;
border:1px solid #ccc;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
text-indent:-9999px;
display:inline-block;
}
.pg_end:after {
position:absolute;
top:10px;
right:10px;
content:"";
width:6px;
height:6px;
border-top:1px solid #777;
border-right:1px solid #777;
border-bottom:1px solid transparent;
border-left:1px solid transparent;
transform:rotate(45deg);
}
.pg_end:before {
position:absolute;
top:10px;
right:16px;
content:"";
width:6px;
height:6px;
border-top:1px solid #777;
border-right:1px solid #777;
border-bottom:1px solid transparent;
border-left:1px solid transparent;
transform:rotate(45deg);
}
.pg_end:hover {
background:#fff;
border:1px solid #333;
}
[/code]
댓글 11개
잘 사용하겠습니다.
오늘도 좋은 하루 되십시오~^^)
완전 굿입니다
CSS를 통 몰라서 삽질만 하는 놈이다 보니 냉큼 먹습니다. ^^
감사합니다!
추가 : 03:37:04
저기요. 이왕 주시는 것.
판매용 테마에 담아도 될까요?
답변 없으시면 안 되는 것으로 알고 사용하지는 않겠습니다.
허락해 주시면? < 지금은 잘 모르겠습니다. 미래가 불투명해서요. ㅎ
허락해 주세요. ㅠㅠ 불투명한 미래를 투명하게 바꾸고 싶습니다. ^^
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4429 | ||
| 2664 |
선택과집중
|
4개월 전 | 575 | |
| 2663 |
|
4개월 전 | 627 | |
| 2662 |
|
4개월 전 | 583 | |
| 2661 |
선택과집중
|
4개월 전 | 514 | |
| 2660 | 4개월 전 | 589 | ||
| 2659 |
Modify
|
4개월 전 | 654 | |
| 2658 |
선택과집중
|
4개월 전 | 416 | |
| 2657 | 4개월 전 | 452 | ||
| 2656 |
|
5개월 전 | 965 | |
| 2655 |
선택과집중
|
5개월 전 | 550 | |
| 2654 | 5개월 전 | 405 | ||
| 2653 |
선택과집중
|
5개월 전 | 592 | |
| 2652 | 5개월 전 | 400 | ||
| 2651 | 5개월 전 | 447 | ||
| 2650 |
선택과집중
|
5개월 전 | 328 | |
| 2649 |
선택과집중
|
5개월 전 | 428 | |
| 2648 | 5개월 전 | 442 | ||
| 2647 |
welcome
|
5개월 전 | 546 | |
| 2646 |
디지털홍익인간
|
5개월 전 | 453 | |
| 2645 | 5개월 전 | 469 | ||
| 2644 |
선택과집중
|
5개월 전 | 515 | |
| 2643 | 5개월 전 | 461 | ||
| 2642 | 5개월 전 | 373 | ||
| 2641 | 5개월 전 | 362 | ||
| 2640 | 5개월 전 | 394 | ||
| 2639 | 5개월 전 | 1364 | ||
| 2638 |
|
6개월 전 | 517 | |
| 2637 |
세르반데스
|
6개월 전 | 403 | |
| 2636 |
선택과집중
|
6개월 전 | 572 | |
| 2635 |
선택과집중
|
6개월 전 | 687 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기