아티클

버튼의 활성화 여부에 따른 커서 모양 적용하기

2010-08-24 18:14:01

사용하기는 꽤나 번거롭지만 여기저기 많이 쓰이고 있는 아이가 바로 이미지 버튼입니다.
먼저, 오래 전에 폭폭이님이 이미지 버튼을 문제 없이 사용하는 방법에 대해 작성하신 글을 참고해주세요.^^

제가 오늘 이야기 하고 싶은 부분은 바로 버튼의 활성화 여부에 따른 커서 모양에 대한 부분입니다.
너무 간단해서 이미 잘 아시는 내용일까봐 살짝 걱정이 되기도 하네요. ^^;

경우에 따라서는 이미지 버튼을 사용할 때, 활성화 버튼, 비활성 화 버튼이 있기 마련입니다.
아래 이미지 처럼요-
(왼쪽이 활성화 버튼, 오른쪽이 비활성화 버튼입니다.)

이 때,  
활성화 버튼은 클릭이 가능하다는 것을 알려주기 위해 커서 모양을 손모양으로 할 필요가 있고-
비활성화 버튼은 클릭이 불가능하기 때문에 커서 모양을 기본으로 해 주는 것이 바람직하겠죠.

(물론 이미지가 아닌 기본 버튼은 충분히 클리커블하기 때문에 커서 모양을 따로 변경해 줄 필요는 없습니다.)

먼저 이미지 버튼의 커서 모양을 손 모양으로 변경합니다.

button{cursor:pointer}

위 스타일을 적용하면 이미지 버튼은 마우스 오버시에 손 모양이 나타나게 됩니다.

그리고 비활성화 버튼에는 button에 disabled="disabled" 속성을 추가합니다.

<button type="button" title="저장" disabled="disabled">

물론 이미지 버튼이기 때문에 disabled="disabled" 속성을 추가하더라도 표면적으로 달라지는 부분은 없습니다.
비활성화에 따른 버튼의 모양을 변경하려면 별도의 클래스를 생성하여 이미지를 변경해주어야 합니다. 

disabled="disabled" 속성은 CSS나 이미지가 로드되지 않았을때에도 이 버튼이 비활성화 되었다는 것을 바르게 나타내주기 위해서 꼭 필요한 속성이죠.
그리고 지금 얘기하려고 하는 커서 모양을 적용할 때도 꼭 필요한 아이입니다!

이제 disabled="disabled" 속성이 적용된 비활성화 버튼에 마우스를 오버해보세요. 마우스 커서가 어떻게 보이나요?
제가 간단히 각 브라우저별 커서 모양을 정리해보았습니다.^^

IE6~8의 경우는 CSS로 커서 스타일을 변경했지만 비활성화된 상태에서 커서의 모양이 자동으로 변경되는 것을 알 수 있습니다.
(이게 바람직한건지는 잘 모르겠어요.^^;)

그렇다면 다른 브라우저에서도 커서 모양을 변경하려면 어떻게 하는 것이 좋을까요?!
아마  눈치 채신 분들도 있겠찌만-  속성 선택자(Attribute Selector)를 사용하는 것입니다.
이 선택자는 매우 유용하지만 IE6,7에서는 지원되고 있지 않아 실제로 사용하는 경우는 극히 드뭅니다.

그런데 지금의 경우는 IE6,7에서 자동으로 커서 모양을 바꿔주고 있으니 신경쓸 필요가 없겠쬬!
따라서 아래와 같이 속성 선택자를 마음껏 활용해줍니다.

button[disabled='disabled']{cursor:default}

위 내용이 모두 적용된 테스트 페이지가 아래 있습니다.
참고하세요.^^

댓글 0
댓글을 작성하려면 해주세요.