NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


CSS Pagination Without Image.

본문 건너 뛰기

오늘은 민족 대 명절 기념으로 예전에 만들어 두었던 페이지네이션 예제를 소개해 드립니다. 아래 정도의 레퍼런스만 있다면 더 이상 페이지네이션 디자인을 하지 않아도 될것 같네요. 단 하나의 이미지도 사용하지 않고 만들었기 때문에 그냥 HTML/CSS 소스를 퍼가서 붙여넣기만 하시면 되요. 참 편리 하겠죠? ^^

이렇게 페이지네이션을 만들 때 현재 페이지를 향한 링크는 걸지 않는 것이 사용성이 더 좋습니다. 자기 페이지를 향한 링크가 필요하지 않기 때문이구요. 시각장애인들에게는 현재 위치가 어딘지 알려주는 이정표와도 같은 역할을 하기 때문입니다. 저는 현재 페이지를 <a> 대신 <strong> 요소로 마크업 했습니다. 현재 페이지의 번호를 <a> 요소로 마크업 하고 스타일시트를 이용해서 색상이나 글꼴 굵기를 바꾸는 사례는 접근성이 좋지 않은 사례 입니다.

이 밖에 더 많은 예제들이 OUIF | XEUI 페이지에 링크되어 있습니다.

분류: CSS,웹 디자인,웹 접근성,웹 표준 | 2010년 2월 13일, 0:29 | 정찬명 | 댓글: 26개 |
트랙백URI - http://naradesign.net/wp/2010/02/13/1188/trackback/

26개의 댓글이 있습니다.

  1. 엘카 댓글:

    잘 봤습니다.
    현재 페이지를 a 대신 strong 으로 마크업하는게 흥미롭네요.
    메뉴에는 a 태그를 제외하기가 힘드니 strong 만 추가하는 것도 괜찮을려나요?

  2. Kukjang 댓글:

    익숙한 페이지 네비게이션이네요. 활용하는데 참 좋겠는걸요.
    매번 게시글 잘보도 있습니다.

  3. skullbocks 댓글:

    이미지없이도 심플하고 좋네요

  4. 정찬명 댓글:

    엘카님, Kukjang님, skullbocks님 감사합니다. ^^

  5. 댓글:

    마지막 네비게이션 참 깔끔하네요
    저장해두었다 요긴하게 쓰겠습니다
    새해 복 받으세요 ^^

  6. 정찬명 댓글:

    택님도 새해 복 많이 받으세요! 감사합니다. ^^

  7. 미진 댓글:

    좋은 예제네요^^~감사합니다 새해복많이받으세요~

  8. 익명 댓글:

    좋은자료 감사합니다.~~

  9. 익명 댓글:

    ^^ 예제 감사드려요.. 재활용 못하고 매번 새로 코딩하는 건 또 다른 귀차니즘(?)이었나봅니다.

  10. 나상욱 댓글:

    기능과 디자인을 떠나서
    남들에게 공유하는 마음이 보기 좋네요~^^

  11. 익명 댓글:

    이미지 사용하지 않고 나오는게 좋으네요.. 잘 활용할께요 감사합니다.

  12. 익명 댓글:

    가끔 들려서 많은 공부를 하고 갑니다.
    감사합니다.
    위의 예제는 잘 활용하도록 하겠습니다.

  13. 조경수 댓글:

    ul요소로 마크업하는건 접근성에 문제가 되나요;?
    전 페이징 할때 ul로 마크업하는 버릇이 잇어서-_-;;

  14. 엘카 댓글:

    @조경수
    ul 태그가 문제 되는건 아니지만 ol 태그가 더 의미있는 마크업 같네요.

  15. cain 댓글:

    전 작은 ◀를 쓰셨나 보다고 생각했는데 border로 처리하셨나 봅니다. border-color의 -moz-use-text-color 속성값은 뭔가요? 처음 보는 건데 검색에도 안 나와서요.+_+

  16. 정찬명 댓글:

    cain님 안녕하세요?

    border로 화살표 처리를 한게 맞구요. -moz-use-text-color 라는 속성은 제가 작성한 것이 아니라 firebug 에서 User Agent Style을 활성화 시킨 경우에만 보이는 브라우저가 제공하는 스타일 입니다.

    보더 컬러에 -moz-use-text-color 라는 속성을 브라우저가 기본 값으로 제공하는 이유는 CSS 표준 스펙에 따라서 보더 색이 지정되지 않은 경우 글꼴에 적용된 color 값을 보더 색상으로 상속 받기 때문입니다.

    예를 들어 color:red 라고 지정한 다음 border:1px solid 라는 속성만 지정하면 보더는 색상이 지정되지 않았기 때문에 어떤 색으로 보더 표현을 해야 할지 망설이게 됩니다. 이 때 글꼴에 색상이 지정되어 있으면 보더 색상은 글꼴 색상을 따라가게 됩니다. 그리고 이런 특성은 파이어폭스 브라우저만 제공하는 것이 아니라 CSS 표준 명세에 따라서 모든 브라우저들이 따르고 있습니다.

  17. 민양 댓글:

    너무 유용하겠어요~ 굿굿굿

  18. 정찬명 댓글:

    @민양
    더 예쁘게 만들어 쓰시면 좋겠네요. ^^

  19. e2goon's me2DAY 댓글:

    이군의 생각…

    페이지넘버링 부분을 마크업하기 너무 귀찮아서 찬명님께서 작성하신 소스 망설임 없이 그대로 가져와 썼다….

  20. 심라 댓글:

    첫번째 예제에서 a,strong 에 margin을 -2px 준 이유가 뭔가요?
    그냥 margin은 0으로 하고 padding 을 6px (원래것은 8px) 주는거랑 무슨 차이인지…
    추측컨데 브라우저간 호환성때문일것 같기는 한데요.. 모르겠네요.

    코드에 주석까지 있다면 금상첨화겠는데..하하.욕심이겠죠?

  21. 정찬명 댓글:

    @심라
    첫 번째 예제에서 음수마진은 빼셔도 됩니다. 최초에 넣었던 이유는 링크 좌우에 보더를 추가하는 경우 좌우가 조금씩 겹치도록 만들 의도가 있었기 때문입니다. ^^

  22. @유져 댓글:

    잘 쓰고 있습니다.

    그런데
    z-index관련 질문 드려요~

    상단에 drop-down div레이어가 이 페이지네이션 아래로 묻히네요.

    z-index를 바꿔줘도 안되구요.

    position:relation;에 문제가 있는건지요??

    답변 부탁드립니다.

  23. 정찬명 댓글:

    @유져
    코드를 직접 보지 않고는 알 수가 없습니다.

  24. […] 페이징코딩하기 XHTML <div class="pagination"> <a href="#" class="direction"><span>«</span> PREV END</a> <a href="#" class="direction"><span>‹</span> PREV</a> <a href="#">11</a> <strong>12</strong> <a href="#">13</a> <a href="#">14</a> <a href="#">15</a> <a href="#">16</a> <a href="#">17</a> <a href="#">18</a> <a href="#">19</a> <a href="#">20</a> <a href="#" class="direction">NEXT <span>›</span></a> <a href="#" class="direction">NEXT END <span>»</span></a> </div> […]

  25. 익명 댓글:

    css소스는 어디있나요?

  26. 정찬명 댓글:

    @익명
    예제를 새 창으로 보기 한 다음 마우스 오른 버튼 눌러서 .css 문자열을 찾으시면 그 파일이 CSS 소스예요.

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님