CSS Hover 를 이용한 깔끔한 페이징

웹디자이너로서 웹사이트 제작을 하다보면, 여러가지로 신경쓰이는 부분이 많습니다.
컬러, 폰트, UI, 가독성 등등.
대부분 눈에 많이 띄는 부분 위주로 디자인의 초점이 맞춰지고, 이것만 잘돼도 문제없이 디자인을 완료할 수 있습니다.
그러다보니 눈에 잘 띄지 않거나 큰 비중이 없는 부분은 대충 디자인을 잡게 되는 경우가 종종 있습니다.
그 부분때문에 특별히 큰 문제가 생기지 않기때문에 더욱 그랬던 것 같습니다.

저에게 있어 기존에 크게 신경쓰지 않았던 곳 중에 하나가 바로 ‘페이징’입니다.
(물론 저의 경우입니다. 대부분의 디자이너분들은 아닐거라 생각합니다. ^^)

미리보기

위와 같은 페이징 어떠세요?
네이버에서 쓰고 있는거랑 비슷하죠? 플리커도 이런 스타일을 쓰고 있죠..
크게 디자인 요소를 넣지 않았지만, 깔끔하고, 발랄한 느낌을 가진 페이징이라는 느낌이 듭니다.

그럼 한번 이 페이징을 만들어볼까요?
페이징 작업시 html 은 아래와 같이 간단합니다.

HTML

<ul>
	<li><a href="#" mce_href="#">1</a></li>
	<li><a href="#" mce_href="#">2</a></li>
	<li><a href="#" mce_href="#">3</a></li>
	<li><a href="#" mce_href="#">4</a></li>
	<li><a href="#" mce_href="#">5</a></li>
	<li><a href="#" mce_href="#">6</a></li>
	<li><a href="#" mce_href="#">7</a></li>
	<li><a href="#" mce_href="#">8</a></li>
	<li><a href="#" mce_href="#">9</a></li>
	<li><a href="#" mce_href="#">10</a></li>
</ul>

이제 html 은 손을 댈 곳이 없고, CSS 로 평범한 숫자들의 목록을 이쁘게 만들어 볼까요?
CSS는 아래와 같습니다.

CSS

<style type="text/css">
ul {
	list-style:none;
	float:left;
	display:inline;
}
ul li {
	float:left;
}
ul li a {
	float:left;
	padding:4px;
	margin-right:3px;
	width:15px;
	color:#000;
	font:bold 12px tahoma;
	border:1px solid #eee;
	text-align:center;
	text-decoration:none;
}
ul li a:hover, ul li a:focus {
	color:#fff;
	border:1px solid #f40;
	background-color:#f40;
}
</style>

간단하죠.
물론 더 간단하게 예쁘게 만드실 수 있는 분들이 많을거에요. ^^

어쨌든 위내용을 정리해보면,

1. 목록을 우선 float 시켜서 가로로 배열하고,
2. 각 li 들의 anchor 값을 이용해서 width 값을 고정시키고,
3. anchor 에 비활성화 상태의 스타일을 정의하고,
4. anchor의 hover 선택자에서 활성화 상태의 스타일을 정의하면 끝!

이런 간단한 과정으로 밋밋한 페이징을 깔끔한 페이징으로 만드실 수 있습니다.

실제 웹사이트에서 사용할때는 ‘이전’, ‘다음’, ‘현재페이지’ 등도 표현해야하는데, 이번 예제를 이해하시면 금방 적용하실 수 있어서 그 부분은 빼도록 하겠습니다.
그리고, IE 5.5 에서도 동일하게 보이게 하기 위해 들어가는 CSS 도 빼도록 하겠습니다.
그 부분은 미리보기에 담겨있습니다.
(Mac 등에서는 확인을 못했습니다. T.T)

더 좋은 방법이나 문제점이 있으면, 답글 부탁드립니다~