CSS Pagination Without Image.
오늘은 민족 대 명절 기념으로 예전에 만들어 두었던 페이지네이션 예제를 소개해 드립니다. 아래 정도의 레퍼런스만 있다면 더 이상 페이지네이션 디자인을 하지 않아도 될것 같네요. 단 하나의 이미지도 사용하지 않고 만들었기 때문에 그냥 HTML/CSS 소스를 퍼가서 붙여넣기만 하시면 되요. 참 편리 하겠죠? ^^
이렇게 페이지네이션을 만들 때 현재 페이지를 향한 링크는 걸지 않는 것이 사용성이 더 좋습니다. 자기 페이지를 향한 링크가 필요하지 않기 때문이구요. 시각장애인들에게는 현재 위치가 어딘지 알려주는 이정표와도 같은 역할을 하기 때문입니다. 저는 현재 페이지를 <a> 대신 <strong> 요소로 마크업 했습니다. 현재 페이지의 번호를 <a> 요소로 마크업 하고 스타일시트를 이용해서 색상이나 글꼴 굵기를 바꾸는 사례는 접근성이 좋지 않은 사례 입니다.
잘 봤습니다.
현재 페이지를 a 대신 strong 으로 마크업하는게 흥미롭네요.
메뉴에는 a 태그를 제외하기가 힘드니 strong 만 추가하는 것도 괜찮을려나요?
익숙한 페이지 네비게이션이네요. 활용하는데 참 좋겠는걸요.
매번 게시글 잘보도 있습니다.
이미지없이도 심플하고 좋네요
엘카님, Kukjang님, skullbocks님 감사합니다. ^^
마지막 네비게이션 참 깔끔하네요
저장해두었다 요긴하게 쓰겠습니다
새해 복 받으세요 ^^
택님도 새해 복 많이 받으세요! 감사합니다. ^^
좋은 예제네요^^~감사합니다 새해복많이받으세요~
좋은자료 감사합니다.~~
^^ 예제 감사드려요.. 재활용 못하고 매번 새로 코딩하는 건 또 다른 귀차니즘(?)이었나봅니다.
기능과 디자인을 떠나서
남들에게 공유하는 마음이 보기 좋네요~^^
이미지 사용하지 않고 나오는게 좋으네요.. 잘 활용할께요 감사합니다.
가끔 들려서 많은 공부를 하고 갑니다.
감사합니다.
위의 예제는 잘 활용하도록 하겠습니다.
ul요소로 마크업하는건 접근성에 문제가 되나요;?
전 페이징 할때 ul로 마크업하는 버릇이 잇어서-_-;;
@조경수
ul 태그가 문제 되는건 아니지만 ol 태그가 더 의미있는 마크업 같네요.
전 작은 ◀를 쓰셨나 보다고 생각했는데 border로 처리하셨나 봅니다. border-color의 -moz-use-text-color 속성값은 뭔가요? 처음 보는 건데 검색에도 안 나와서요.+_+
cain님 안녕하세요?
border로 화살표 처리를 한게 맞구요. -moz-use-text-color 라는 속성은 제가 작성한 것이 아니라 firebug 에서 User Agent Style을 활성화 시킨 경우에만 보이는 브라우저가 제공하는 스타일 입니다.
보더 컬러에 -moz-use-text-color 라는 속성을 브라우저가 기본 값으로 제공하는 이유는 CSS 표준 스펙에 따라서 보더 색이 지정되지 않은 경우 글꼴에 적용된 color 값을 보더 색상으로 상속 받기 때문입니다.
예를 들어 color:red 라고 지정한 다음 border:1px solid 라는 속성만 지정하면 보더는 색상이 지정되지 않았기 때문에 어떤 색으로 보더 표현을 해야 할지 망설이게 됩니다. 이 때 글꼴에 색상이 지정되어 있으면 보더 색상은 글꼴 색상을 따라가게 됩니다. 그리고 이런 특성은 파이어폭스 브라우저만 제공하는 것이 아니라 CSS 표준 명세에 따라서 모든 브라우저들이 따르고 있습니다.
너무 유용하겠어요~ 굿굿굿
@민양
더 예쁘게 만들어 쓰시면 좋겠네요. ^^
이군의 생각…
페이지넘버링 부분을 마크업하기 너무 귀찮아서 찬명님께서 작성하신 소스 망설임 없이 그대로 가져와 썼다….
첫번째 예제에서 a,strong 에 margin을 -2px 준 이유가 뭔가요?
그냥 margin은 0으로 하고 padding 을 6px (원래것은 8px) 주는거랑 무슨 차이인지…
추측컨데 브라우저간 호환성때문일것 같기는 한데요.. 모르겠네요.
코드에 주석까지 있다면 금상첨화겠는데..하하.욕심이겠죠?
@심라
첫 번째 예제에서 음수마진은 빼셔도 됩니다. 최초에 넣었던 이유는 링크 좌우에 보더를 추가하는 경우 좌우가 조금씩 겹치도록 만들 의도가 있었기 때문입니다. ^^
잘 쓰고 있습니다.
그런데
z-index관련 질문 드려요~
상단에 drop-down div레이어가 이 페이지네이션 아래로 묻히네요.
z-index를 바꿔줘도 안되구요.
position:relation;에 문제가 있는건지요??
답변 부탁드립니다.
@유져
코드를 직접 보지 않고는 알 수가 없습니다.