페이징 구성하기
html)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0"> <title>Insert title here</title> <style> .paging { text-align: center; } .paging a { /* display: inline-block 인라인 요소의 특징과 블록 요소의 특징을 모두 갖는다 크기를 가질 수 있으며 텍스트 정렬도 적용받는다 */ display: inline-block; font-weight: bold; text-decoration: none; padding: 5px 8px; border: 1px solid #ccc; color: #000; background-color: #F5F5DC; } /* 현재 페이징에 select 클래스를 적용한다*/ .paging a.select { color: #fff; background-color: #FFA7A7; } </style> </head> <body> <div class="paging"> <a class="select" href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> </div> </body> </html> | cs |
결과
'IT > - 프로그래밍' 카테고리의 다른 글
| HTML5/CSS3 background-repeat 배경이미지 반복여부 설정 (1) | 2017.06.06 |
|---|---|
| HTML5/CSS table 태그 쓰지 않고 테이블 표현하기 (0) | 2017.06.05 |
| HTML5/CSS3 word-break, white-space : 줄바꿈 속성 (0) | 2017.06.03 |
| HTML5/CSS3 이미지, 텍스트 수직으로 가운데 정렬하기 (0) | 2017.06.02 |
| HTML5/CSS3 text-index : 글자 들여쓰기 (0) | 2017.06.01 |