페이징 디자인
본문
기본 그누보드5에서 다른건 아무것도 수정하지 않으셔도 됩니다.
사용하시려는 해당 게시판 style.css 맨 하단에 넣어주시기만하면 적용됩니다.
/* 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;
}
https://sir.kr/g5_tip/6724?sfl=wr_subject%7C%7Cwr_content&stx=%ED%8E%98%EC%9D%B4%EC%A7%95
댓글목록
등록된 댓글이 없습니다.