[CSS] 마우스 동작을 감지하는 선택자 설명

블로그를 운영할 때 스킨 스타일시트를 수정함으로써 간단하게 디자인을 변경하는 것은 CSS 선택자 기본 개념만 알고 있으면 그것으로도 충분합니다. 그러나 좀 더 효율적으로 스타일시트를 수정하고 싶다면 CSS 선택자 고급 개념을 알아야 합니다. 이 글에서는 마우스 동작을 감지할 때 사용되는 선택자를 설명하겠습니다. 말이 고급 개념이지 한 번 익숙해지면 기본중의 기본 개념이라고 생각할 정도로 이 방법은 간단하게 구현됩니다.

CSS에서 마우스 동작을 감지하는 방법

방문자가 특정 객체에 마우스 커서를 올려놓았는지 감지함으로써 상황에 따라 상이한 스타일을 적용하는 방법이 대표적으로 널리 사용됩니다. 특히 링크를 생성하는 A 태그에 자주 사용됩니다. 이 블로그에서도 사용하고 있습니다. 링크에 마우스 커서를 올려놓지 않으면 푸른색이지만 마우스 커서를 올려놓으면 링크가 검정색으로 변경됩니다.

CSS에서는 :hover 선택자를 사용함으로써 마우스 커서가 객체에 올려져 있을 경우에만 적용되는 새로운 스타일을 지정할 수 있습니다. :hover 선택자가 없는 속성은 마우스 커서가 다른 곳에 있을 때 즉, 기본 스타일을 지정할 때 사용됩니다. 따라서 아래와 같은 스타일 지정이 가능합니다.

#container .article a { text-decoration: none; color: #0189dd; }
#container .article a:hover { color: #c00; }

#container .article a 는 기본 스타일 속성이고, #container .article a:hover는 마우스 커서가 올려졌을 경우의 스타일 속성입니다. 예제 스타일시트에서 :hover 스타일 속성에 text-decoration: none 속성이 없는 이유는 기본적으로 모든 스타일시트 속성에는 상속 기능이 있기 때문입니다. 기본 a 스타일에 이미 해당 스타일이 정의되어 있기 때문에 :hover 스타일에 text-decoration: none 속성은 자동으로 상속됩니다. 따라서 :hover 속성에서는 변경하고자 하는 스타일만 지정하면 됩니다. 모든 스타일을 :hover 속성에서 정의할 필요는 없습니다.

DIV 박스에 :hover 선택자를 적용하는 방법

:hover 선택자는 HTML 모든 태그에 사용될 수 있습니다. DIV 태그는 HTML의 대표적인 블록 태그로서 박스를 만들거나 레이아웃을 디자인할 때 사용합니다. 특히 DIV를 사용하여 버튼을 만들면 button이나 input 태그를 사용하여 만들었을 때보다 좀 더 멋있는 버튼을 만들 수 있습니다. 이때 :hover 선택자가 DIV 버튼을 만들 때 사용됩니다. DIV 태그에 :hover 선택자를 사용하는 방법은 다음과 같습니다.

#container .article .btnTrackback { background-color: #003a5d; font-weight: bold; color: #fff; }
#container .article .btnTrackback:hover { opacity: 0.8; }

위 예제 스타일시트는 트랙백 버튼에 마우스 커서를 올리는 경우 투명도를 지정하여 해당 버튼에 마우스 커서가 올라갔다는 느낌을 사용자가 직접 알 수 있게 해줍니다. 다음과 같은 HTML 소스코드를 활용하여 예제 스타일시트를 테스트할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>테스트 CSS</title>
    <style>
        #container .article .btnTrackback { background-color: #003a5d; font-weight: bold; color: #fff; }
        #container .article .btnTrackback:hover { opacity: 0.8; }
    </style>
</head>
<body>
    <div id="container">
        <div class="article">
            <div class="btnTrackback">트랙백 보기</div>
        </div>
    </div>
</body>
</html>

예제 소스코드는 기본 기능만 할 수 있도록 간단하게 구성되었기 때문에 완성된 버튼이 만들어지지는 않을 것입니다. DIV 버튼을 완성하려면 객체 테두리에 곡선을 추가해주는 border-radius 속성, 객체 크기를 조절해주는 width, height 속성 등 DIV 태그 디자인을 결정해주는 다른 속성들이 필요합니다. 하지만 예제 소스코드에서는 배경색과 글자 색, 굵기 속성만을 정의했기 때문에 완성된 버튼이 만들어질 수 없는 것입니다.

스타일시트를 이용하여 특정 객체에 대한 마우스 커서 동작을 어떻게 감지하는지 그 개념은 확인할 수 있었을 것입니다.

마무리

CSS :hover 선택자를 모른다면 자바스크립트를 이용하는 것도 가능합니다. 그러나 자바스크립트는 스타일시트보다 복잡한 구조를 가지고 있기 때문에 마우스 동작을 감지하는 스크립트를 만드는 것 또한 번거롭습니다. CSS 기본 지식만 잘 알고 있으면 마우스 커서를 감지하는 스크립트는 간단해질 수 있습니다. CSS에서는 :hover 선택자만으로 만들 수 있기 때문입니다.

이 글에서 설명하는 방법을 사용하면 자바스크립트 없이도 마우스를 올렸을 때 해당 객체의 스타일을 바꿀 수 있습니다. CSS는 자바스크립트보다 간단하게 설계되었기 때문에 컴퓨터 연산에 큰 영향을 미치지 않아 페이지속도 향상에도 좋습니다.

타이틀이미지: Jared Tarbell, generator.x show, Flickr. CC BY 2.0.