엔피씨님 예제입니다. ^^;; 정보
엔피씨님 예제입니다. ^^;;
본문
<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>
처럼 마크업하고 스타일링하면 아래처럼 디자인할 수 있습니다.
걍 눈대중으로 쓴거라 맞게 썼는지 모르겠네요. ㅎㅎㅎ;;
암튼 이런 방식도 있습니다. 제가 댓글에서 언급한 대체이미지 때문만은 아니네요. 페이징에 이미지 쓰시는 분은 없으니... ㅎㅎ;;
추천
0
0
댓글 9개
어...좋은데요?ㅎㅎㅎㅎㅎ
li a 두개가 숫자를 감싸고 있기 때문에 추가적으로 <span>1</span> 해서 세개가 숫자를 감쌀 필요는 없을 거 같습니다. 특별히 스타일링 하자면 두개만으로도 충분히 먹일 수 있을 거 같아서요.
제 방식이 이렇네요... ^^;;
제 방식이 이렇네요... ^^;;
li a 에 display:block 이 빠졌네요. ㅈㅅ
음 제가 기존에 해둔 방식이 있는데 나중에 세컨드 오피스 가서 예제 올려놓겠습니다.
제가 쓴 방식은 span 태그에 텍스트를 넣고 이미지가 늦게 뜨거나 해서 투명해질 경우(박스 사이즈가 강제 지정일경우) 백그라운드처럼 뒤에 숨어있던 텍스트가 대신노출되는 방식입니다 : )
제가 쓴 방식은 span 태그에 텍스트를 넣고 이미지가 늦게 뜨거나 해서 투명해질 경우(박스 사이즈가 강제 지정일경우) 백그라운드처럼 뒤에 숨어있던 텍스트가 대신노출되는 방식입니다 : )
네 그런데 페이징은 사이즈강제 지정이 힘들지 않은가요? ^^;;
마크업에 정답은 없지만, 잘못 쓰는 부분은 분명 존재할테니 지적해주시면 언제든지 감사한 마음으로 받겠습니다.
마크업에 정답은 없지만, 잘못 쓰는 부분은 분명 존재할테니 지적해주시면 언제든지 감사한 마음으로 받겠습니다.
아, 페이징에서 사이즈 강제지정하는 경우는 드물긴합니다. : )
그러고보니 저 부분이 페이징영역에 대한 사용성이라는 걸 깜빡했네요 ㅎㅎ
페이징에서는 간혹 풀 디자인되어있는 곳이 있습니다. 숫자는 그냥인데 next버튼이나 prev 버튼등, 이런부분이 디자인 되어있는경우라면(가령 텍스트로 표현해서는 '처음, 마지막, 다음, 이전'인데 단순한 화살표그림으로 표현했을경우) 에 이미지가 뜨지 않으면 텍스트가 이미지로 영역잡아둔 박스영역에 바로 뜹니다.
하지만 페이징 쪽에서 그럴일은 희박한게 맞는거 같습니다 ㅎㅎㅎㅎㅎ
그러고보니 저 부분이 페이징영역에 대한 사용성이라는 걸 깜빡했네요 ㅎㅎ
페이징에서는 간혹 풀 디자인되어있는 곳이 있습니다. 숫자는 그냥인데 next버튼이나 prev 버튼등, 이런부분이 디자인 되어있는경우라면(가령 텍스트로 표현해서는 '처음, 마지막, 다음, 이전'인데 단순한 화살표그림으로 표현했을경우) 에 이미지가 뜨지 않으면 텍스트가 이미지로 영역잡아둔 박스영역에 바로 뜹니다.
하지만 페이징 쪽에서 그럴일은 희박한게 맞는거 같습니다 ㅎㅎㅎㅎㅎ
아 가만히 생각해보니 국내에선 그런 방식을 많이 쓰고 있다는걸 잊어버리고 있었습니다.
빈 엘리먼트영역 활용^^;;;;
빈 엘리먼트영역 활용^^;;;;
외국에서도 image replacement 에서 많이 쓰는 거 같은데요.. ^^;;
image replacement 자체도 말이 좀 있는 거 같지만, 국내에서만 많이 쓰는 방법은 아닌 거 같습니다.
image replacement 자체도 말이 좀 있는 거 같지만, 국내에서만 많이 쓰는 방법은 아닌 거 같습니다.
아 그렇네요. 국내에선이라기 보단 하나의 방식으로 보는게 맞겠네요!
감사합니다.
더 공부가 되었습니다!
ps.사실 국내에서도 라고 쓰려던게 오타난거라고는 못말하겠습니다 ㅠ
감사합니다.
더 공부가 되었습니다!
ps.사실 국내에서도 라고 쓰려던게 오타난거라고는 못말하겠습니다 ㅠ
