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

위 방법은 html에서 메뉴를 이미지가 아닌 텍스트로 구성하고, 이미지 대체 기법으로 작업한 것이다. 그냥 바로 메뉴 이미지를 넣고 해도 무방하다. ( text-indent 삭제) 원리는 CSS의 :hover가상클래스를 이용한 방식이다. 마우스 on상태와 over상태의 두 상황이미지를 하나로 만들고, 마우스 on시에 :hover가상클래스를 이용해 위치값을 변경해서 이미지가 바뀌게 하는 것이다. 이 방식말고도 여러 방식들이 가능하고, IE에서는 버그(?)도 있다. 버그 관련해서는 따로 포스팅 할 기회가 있을 것 같다….