엔피씨님 예제입니다. ^^;;
<style>
ul#page {clear:both;zoom:0 !important;zoom:1}
ul#page:after {display:block;visibility:hidden;clear:both;height:0;content:""}
li {position:relative;float:left;margin-left:-1px;border:1px solid #somecolor}
li a {position:relative;padding:0 10px;height:30px;line-height:2.5em}
li a span {display:none}
li#cur_page a span {display:block;position:absolute;top:1px;left:1px;background:url('someimg.gif')}
</style>
<ul id='page'>
<li id='cur_page'><a href='#'><span></span>1</a></li>
<li><a href='#'><span></span>2</a></li>
</ul>
처럼 마크업하고 스타일링하면 아래처럼 디자인할 수 있습니다.
걍 눈대중으로 쓴거라 맞게 썼는지 모르겠네요. ㅎㅎㅎ;;
암튼 이런 방식도 있습니다. 제가 댓글에서 언급한 대체이미지 때문만은 아니네요. 페이징에 이미지 쓰시는 분은 없으니... ㅎㅎ;;
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
댓글 9개
제 방식이 이렇네요... ^^;;
제가 쓴 방식은 span 태그에 텍스트를 넣고 이미지가 늦게 뜨거나 해서 투명해질 경우(박스 사이즈가 강제 지정일경우) 백그라운드처럼 뒤에 숨어있던 텍스트가 대신노출되는 방식입니다 : )
마크업에 정답은 없지만, 잘못 쓰는 부분은 분명 존재할테니 지적해주시면 언제든지 감사한 마음으로 받겠습니다.
그러고보니 저 부분이 페이징영역에 대한 사용성이라는 걸 깜빡했네요 ㅎㅎ
페이징에서는 간혹 풀 디자인되어있는 곳이 있습니다. 숫자는 그냥인데 next버튼이나 prev 버튼등, 이런부분이 디자인 되어있는경우라면(가령 텍스트로 표현해서는 '처음, 마지막, 다음, 이전'인데 단순한 화살표그림으로 표현했을경우) 에 이미지가 뜨지 않으면 텍스트가 이미지로 영역잡아둔 박스영역에 바로 뜹니다.
하지만 페이징 쪽에서 그럴일은 희박한게 맞는거 같습니다 ㅎㅎㅎㅎㅎ
빈 엘리먼트영역 활용^^;;;;
image replacement 자체도 말이 좀 있는 거 같지만, 국내에서만 많이 쓰는 방법은 아닌 거 같습니다.
감사합니다.
더 공부가 되었습니다!
ps.사실 국내에서도 라고 쓰려던게 오타난거라고는 못말하겠습니다 ㅠ