0
조회 수 : 7387 신고 : 0
![title: [ani]깜빡이는 표정](http://web.webmini.net/./files/iconshop/74a37aadbde84c591808859b369e85e0.gif "title : [ani]깜빡이는 표정")
빽짱구| 미리보기 : |
|---|
위 그림같이 css3를 이용하여 모바일에서 쓸 수 있는 간단한 paging 처리 방법에 대해서 알아보겠습니다.
확인은 IE계열을 제외한 곳에서는 보이니 모바일에서는 문제가 없습니다.
css 소스는 다음과 같습니다.
<style type="text/css">
.paging {}
.paging a {border:5px solid #ddd;}
.paging a, .paging em {float:left; display:block; margin:0 3px; border-radius:15px;}
.paging a:hover, .paging em {border:5px solid red}
.paging span {display:none}
</style>
html 태그는 다음과 같습니다.
<div class="paging">
<a href="#"><span>1</span></a><em><span>1</span></em><a href="#"><span>3</span></a><a href="#"><span>4</span></a><a href="#"><span>5</span></a>
</div>
일딴 css에서는 중요한것이 border-radius:15px; 부분이 중요합니다. 즉 border를 곡선으로 만들어 주는 것입니다.
border값을 줬으면 a태그에 border 속성을 만들어 줍니다. 저는 border:5px solid #ddd로 만들어 줬습니다.
그리고 선택했을 때, 오버했을 때 값은 border:5px solid red로 해서 구분을 줬습니다.
또하나, 페이지 처리이기때문에 숫자가 들어가는 것이 추후 소스를 보기 편하기 때문에 .paging span {display:none}으로 해서 화면상에서 숫자는 가리는 것도 중요합니다. 텍스트를 안 가리면 텍스트 기본 속성으로 인해 원하는 화면을 구현 할 수 없습니다.
나머지는 소스가 간단하니 이해 하시는데는 충분하리라고 봅니다.
정보출처 : http://nk.webmini.net/index.php?mid=textyle&document_srl=306658
포토샵과 letter-spacing 자간 비교 
글쓴이 빽짱구
단점이 없는 사람은 장점도 거의 없다 - 에이브러햄 링컨
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시
아이콘이 붙게됩니다.
6시내고환
- 추천수 50개이상
- 추천수 30개이상
- 추천수 20개이상
- 추천수 10개이상
- 추천수 3개이상
닫기