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

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

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

관련 글
2017/08/18 [CSS] 기본 선택자 정리 (CSS Selector) by Walter Erzsamatory
2017/11/16 [CSS] 특정한 위치에 있는 DOM 요소를 지정하는 방법 by Walter Erzsamatory

 

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.

0 0 votes
Article Rating
댓글 알림받기
알림유형
guest
0 Comments
Inline Feedbacks
View all comments