CSS에서 마우스의 동작을 감지하는 방법
CSS에서 마우스의 동작을 감지한다는 것은 사용자가 지정된 HTML 요소에 마우스 커서를 올려놓았는지 아니면, 올려놓지 않았는지를 판별해내어 상황에 따라 각자 다른 스타일을 지정하는 것을 말합니다. 대표적으로 HTML의 하이퍼링크 태그인 a 태그에 자주 사용됩니다. 이 블로그에서도 사용하고 있는데, 마우스 커서를 올려놓지 않으면 푸른색의 링크이지만, 마우스 커서를 올려놓으면 링크가 빨간색으로 바뀝니다. 바로 이 기능이 CSS의 선택자만으로 구현한 기능입니다. 하지만 CSS를 처음 접한 블로거나 CSS에 익숙하지 못한 사람은 CSS에서 마우스의 동작을 감지하는 선택자는 a 태그에만 사용할 수 있다고 생각합니다. 하지만 이것은 잘못된 생각이며, CSS에서는 모든 HTML 요소에 대하여 마우스 동작을 감지해낼 수 있습니다.
CSS에서는 :hover 접미사를 이용하여 마우스 커서가 HTML 객체에 올라와 있는 경우에 사용될 스타일을 지정할 수 있습니다. :hover 접미사가 없는 것은 마우스 커서가 다른 곳에 있을 때 즉, 평소의 스타일을 지정할 때 사용됩니다. 일반적인 CSS 속성들을 보면 :hover 가 붙어있지 않으므로 이것들은 평소의 스타일을 지정한 것이라고 보면 됩니다. 예를 들어, 아래와 같은 스타일 지정이 가능합니다.
1 2 | #container .article a { text-decoration: none; color: #0189dd; }#container .article a:hover { color: #c00; } |
#container .article a 는 평소의 하이퍼링크 스타일 속성이고, #container .article a:hover는 마우스 커서가 올려졌을 때의 하이퍼링크 속성입니다. 위의 CSS 예제는 이 블로그에서 사용된 것과 같습니다. 평소에는 링크가 푸른색 속성을 가지고 있지만, 마우스 커서가 링크에 올라가는 경우에만 그 색상이 빨간색으로 변경됩니다. 여기에서 마우스가 올려졌을 때의 스타일에 text-decoration: none 속성이 없는 이유는 모든 CSS 속성에는 상속의 기능이 있기 때문입니다. :hover 가 붙지 않은 a 스타일에 이미 해당 스타일이 있기 때문에 :hover 스타일에 text-decoration: none 속성은 자동으로 상속됩니다. 쉽게 말해서, :hover 속성에서는 변경하고자 하는 스타일만 지정하면 됩니다. 모든 스타일을 :hover 에서 지정할 필요는 없습니다.
DIV 박스에 :hover 를 적용시키는 방법
위에서 :hover 접미사는 a 태그 뿐만 아니라 HTML의 모든 태그에 사용될 수 있다고 했습니다. DIV 태그는 HTML의 대표적인 블록 태그로서 박스를 만들거나 레이아웃을 디자인할 때 자주 사용됩니다. 특히 DIV를 이용하여 버튼을 만들면 button이나 input 태그를 이용하여 만들었을 때보다 좀 더 멋있는 버튼을 만들 수 있습니다. 바로 여기에서 :hover 접미사는 DIV 버튼을 만들 때 자주 사용됩니다. 이 블로그에서는 하단의 트랙백, 댓글 보기 버튼을 만들 때 DIV 태그를 사용하였습니다. DIV 태그에 :hover 접미사를 붙이는 방법은 다음과 같습니다.
1 2 | #container .article .btnTrackback { background-color: #003a5d; font-weight: bold; color: #fff; }#container .article .btnTrackback:hover { opacity: 0.8; } |
위의 CSS 예제는 트랙백 버튼에 마우스 커서를 올려놓는 경우 투명도를 설정하여 마우스 커서가 올라갔다는 느낌을 사용자가 바로 알 수 있게 해줍니다. 다음과 같은 HTML 소스가 있는 경우 위의 CSS 소스를 직접 테스트해볼 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!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> |
위의 CSS 와 HTML 소스는 매우 간단하게 구성되어 있기 때문에 제대로된 버튼이 만들어지지는 않을 것입니다. 제대로된 버튼을 만들기 위해서는 테두리에 곡선을 주는 border-radius 속성, 버튼의 크기를 조절해주는 width 와 height 속성 등 버튼의 디자인을 결정해주는 수많은 다른 속성들이 필요합니다. 하지만 위 소스에서는 배경색과 글자 색, 굵기만을 스타일로 지정했기 때문에 제대로된 버튼이 만들어지지 않는 것입니다. 하지만 CSS를 이용하여 DIV에 대한 마우스 커서의 동작을 어떻게 감지하는가에 대한 의문에 대해서는 그 궁금증이 쉽게 풀렸으리라 생각합니다.
마무리
CSS를 이용하여 마우스 커서를 감지하는 방법을 모른다면 자바스크립트를 통해서 이 작업을 해야합니다. 하지만 자바스크립트는 CSS보다 훨씬 복잡한 구조를 가지고 있기 때문에 마우스 동작을 감지하는 스크립트를 만드는 것은 매우 어렵습니다. 하지만 CSS에 관한 기본적인 지식만 알고 있다면, 마우스 커서를 감지하는 스크립트는 매우 간단해집니다. 자바스크립트에서는 이벤트를 이용하여 복잡하게 만들어야 하는 스크립트를 CSS에서는 :hover 접미사 한 개만으로 매우 쉽게 만들 수 있기 때문입니다.
이 글에서 소개한 방법을 사용하면 자바스크립트 없이도 마우스를 올렸을 때 해당 객체의 스타일을 바꿀 수 있으며, 심지어 블로그의 메뉴까지 화려하게 만들 수 있습니다. CSS는 자바스크립트보다 간단하기 때문에 컴퓨터 연산에 큰 영향을 미치지 않아 속도 향상에도 매우 좋습니다.