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

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

미리보기

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

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

HTML

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

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

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;
}

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

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

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

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

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

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

display:inline-block을 이용한 pagination 방법 (2009-07-09)

float을 사용했을 경우 page 수에 따라 가운데 정렬하는 부분에 어려움이 생깁니다.
항상 10개가 기본으로 나온다는 보장이 없기때문에 가운데 정렬을 기본으로 해야하는데, 이를 위해서 display속성의 값들 중에서 “inline-block“값을 사용해서 만들어보도록 하겠습니다.

inline-block

This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element.

display:inline-block은 W3C의 CSS 2 명세에서는 없었고, CSS 2.1 권고후보에서 추가된 값으로 해당 요소를 block 박스로 만들지만, inline 요소와 같은 흐름을 가지게 하는 값입니다. 즉, inline 요소가 가질 수 없는 top(bottom) margin 과 top(bottom) padding, width를 가질 수 있게 됩니다.

HTML은 동일하고 CSS만 추가해보겠습니다.

ul {
	text-align:center;
}
ul li {
	display:inline;
	vertical-align:middle;
}
ul li a {
	display:-moz-inline-stack;	/*FF2*/
	display:inline-block;
	vertical-align:top;
	padding:4px;
	margin-right:3px;
	width:15px !important;
	color:#000;
	font:bold 12px tahoma;
	border:1px solid #eee;
	text-align:center;
	text-decoration:none;
	width /**/:26px;	/*IE 5.5*/

}
ul li a.now {
	color:#fff;
	background-color:#f40;
	border:1px solid #f40;
}
ul li a:hover, ul li a:focus {
	color:#fff;
	border:1px solid #f40;
	background-color:#f40;
}

display:inline-block의 경우 Firefox 2에서 적용이 안되는 문제가 있어 display:-moz-inline-stack;를 별도로 제공해야합니다. 하지만, 회사마다 지원 브라우저의 범위가 있으므로, 저희처럼 Firefox 2에 대한 지원은 하지 않기로 한 곳은 없어도 무방합니다.
작업내용은 미리보기에서 확인하실 수 있습니다.

처음 블로그를 만들고 멋진 글을 남겨야한다는 압박에 보다시피 글을 쓰는 횟수가 저조하다.
점점 스스로 좁아지고 블로그가 의미가 없어진다는 느낌을 받는 순간.
보여주기 위한 블로그가 아닌 스스로 공부할 수 있는 블로그를 만들어보자는 생각을 했다.
그래서 쉽지만, 괜찮았던 결과물들을 정리해보는 방향으로 설정했다.
혹시 유치한 예제들을 만나면 그냥 읽지 않아도 된다. ㅋㅋ

Rollover(롤오버)메뉴를 만들때 기존에는 javascript의 도움을 받아왔다.
난 개발자가 아니기 때문에 기존에 사용하는 사이트에서 긁어오거나 에디터에서 자동으로 생성되는 소스를 그대로 사용했던 기억이 있다.
그런데, CSS로 Rollover메뉴를 쉽게 만들 수 있는 방법을 아는 순간 경악했다.
이런 간단한 방법이 있단 말인가! 왜 몰랐지.
역시 공부를 해야해…. 라며 자책했다.
소스? 어마어마하게 줄어든다. 게다가 전혀 모르는 소스가 아닌 아는 소스라는 사실!

Html

<ul id="tab">
	<li id="gi"><a href="#">채용정보</a></li>
	<li id="ht"><a href="#">헤드헌팅</a></li>
</ul>

CSS

#tab {
	list-style:none;
}
#tab li {
	float:left;
}
#gi a {
	display:block;
	width:60px;
	height:25px;
	text-indent:-5000px;
	background:url(/cssdic/ex/rollover/01.gif) no-repeat left top;
}
#ht a {
	display:block;
	width:60px;
	height:25px;
	text-indent:-5000px;
	background:url(/cssdic/ex/rollover/02.gif) no-repeat left top;
}
#gi a:hover {
	background-position:0 -25px;
}
#ht a:hover {
	background-position:0 -25px;
}

위 방법은 html에서 메뉴를 이미지가 아닌 텍스트로 구성하고, 이미지 대체 기법으로 작업한 것이다.
그냥 바로 메뉴 이미지를 넣고 해도 무방하다. (text-indent 삭제)

원리는 CSS의 :hover가상클래스를 이용한 방식이다.
마우스 on상태와 over상태의 두 상황이미지를 하나로 만들고,
마우스 on시에 :hover가상클래스를 이용해 위치값을 변경해서 이미지가 바뀌게 하는 것이다.

이 방식말고도 여러 방식들이 가능하고, IE에서는 버그(?)도 있다.
버그 관련해서는 따로 포스팅 할 기회가 있을 것 같다.

어쨌든 디자이너들은 이 방식으로 개발자한테 당당해지자!!!
별것도 아닌걸 가지고 콧대세우는 개발자말이다……..

내일 회사에서 워크샵을 간다.
지난달에 1주일동안 들었던 css 관련 교육(실제로는 15시간)에 대한 전파교육을 하는 셈이다.

하지만, 욕심과 관심때문인가.
교육이 끝이 나고, 정말 미친듯이 공부와 실습을 한 것 같다.
이 얼마나 오랜만에 느끼는 ‘열정’인가.

미리 사놓은 1권의 책과 교육후에 구매한 2권의 책을 몇번이나 정독했을까.
온통 밑줄과 내 생각으로 끄적인 흔적들이 남아있다.

웹접근성에 대한 고민은 사실 그전까지 크게 하지 않았다.
하지만, 교육이후 웹접근성이라는 것이 얼마나 중요한지 깨닫게 되었다.
소외된 소수의 집단 (다른 마땅한 단어가 생각나지 않아 선택)
그들역시 웹에 의한 정보를 공유할 권리가 있음에도 지금까지 간과하고 살았다는 것이 부끄러울 따름이다.

회사를 위해서가 아니라 나를 위해서가 아니라 우리 모두들 위한 웹을 위해 노력할 생각이다.
오랜만에 아주 오랜만에 가슴이 뜨거워짐을 느낀다..