[CSS] onMouseOver,onMouseOut은 그만!!

출처 : http://asrada2001.tistory.com/122

요즘 CSS와 친해지려 용쓰고 있는 저는 필요한게 생길때마다 여러가지로 조사를 하고 있습니다. 그러던중 좋은 글이 있어서 소개해드릴까합니다.
아래내용은 해당 블로거이신 물결 님의 블로그 운영방침하에 제가 보기위해 편의상 가져온 글입니다.

CSS를 알면 손가락이 편해진다

여기는 THEAD
여기는 TBODY-1
여기는 TBODY-2
여기는 TBODY-3
여기는 TBODY-4
여기는 TBODY-5
여기는 TFOOT-1
여기는 TFOOT-2

위와 같은 모양의 테이블은 각종 리포트나 통계 페이지, 회원 목록, 가계부, 쇼핑몰의 상품 목록 등 어렵지 않게
볼 수 있다.
그리고 우리는 테이블의 각 row에 마우스를 올렸을때 배경색이 변하거나 폰트가 바뀐다거나 하는등의 이펙트를
경험 할 수 있다.

이런 효과들은 각 ROW(TR)에 onMouseOver 와 onMouseOut 이벤트 핸들러를 통해서 마우스가 올려졌을 때와 벗어났을 때 취해야 할 행동들을 기술함으로써 구현하는 방식이 널리 통용되고 있다.

나 또한 지금껏 저와 같은 이벤트 핸들링을 통해서 구현을 해 왔으나, CSS에 관심이 증폭 되는 요즈음 심플하면서도 표준에 걸맞기 까지 한 CSS를 통한 구현방법을 찾게 되었으니 이자리에서 소개한다.



A:hover

오늘의 주인공이다.
이 CSS의 의미를 설명하자면 "<A>태그로 둘러싸인 블럭에 마우스가 올려졌을때" 라고 해석 할 수 있겠다.

<a href="#">여기를 클릭하세요</a>

이 코드를 브라우져에서 보면 "여기를 클릭하세요" 라는 밑줄이 그어진 텍스트가 보이고
이때 마우스를 텍트르 위로 가져가면 텍스트의 색이 변한다.
클릭하면 href="" 에 지정된 URL로 페이지를 이동시킨다는 설명은 굳이 하지 말것을....-_-;;

이제 저 코드위에 살짝 CSS를 입혀보자

<style>
a:hover{
  color: #FF0000;
  font-weight: 600;
}
</style>
<a href="#">여기를 클릭하세요</a>

브라우져로 이 코드를 열어보고 아까처럼 마우스를 가져가 보자....
어떤가...

분명 글자색은 red로 바뀌고 폰트가 두껍게 바뀔것이다.
a:hover{} 에서 그리 하라고 지정을 했기 때문이다.

이제 뭔가 보이는가??

이제부터가 중요하다.

우리는 겨우 <a>태그에 마우스가 올려졌을때 뭔가를 하고 싶은게 아니다. 바로 테이블의 ROW에서 뭔가를 보여주고 싶은거다!!

다시 한번 보자 a:hover

모냥 참....
하지만 뚫어져라 봐라. 보인다...보인다...
분명 ":"의 좌우로 a와 hover가 등지고 있는 모습이 보인다.
안보이는가??  그렇다면 당신의 이글아이에 축배를....

":"를 기준으로 왼쪽의 a는 태그이름이고 hover는 뭐라고 해야 좋을까나....상황? 그래 상황이라고 해두자...
이 두가지의 element가 ":"를 사이에 두고 무슨짓을 꾸미는 것이다.

음...a는 태그이름...그러면 다른 태그도 가능하겠지??
당근!!
"a"대신 "div"를 넣어보자.

div:hover

스타일을 바꿨으니 HTML코드도 살짝 바꿔보자

<style>
div:hover{
  color: #FF0000;
}
</style>
<div>여기에 마우스를 올려보아요~</div>

브라우져로 페이지를 열고 마우스를 올려보라는 곳으로 가져가보자.
역시나 글자색이 빨갛게 변할것이다.

아차차차...
여기서 한가지 짚고 넘어갈것이 있으니, IE 6.0 이하의 버전에서는 위 CSS를 인식하지 못한다는 것이다.
IE가 이상한것이니 CSS를 탓하지는 말자.

애니튼....
이제 "A" 태그뿐만 아니라 "DIV" 태그도 위의 CSS가 먹힌다는것을 알았다.
이제 남은건 우리의 목적 TR에 CSS를 적용시키는것!

단순히 TR에 마우스를 올렸을때 뭔가 변화를 주고자 한다면

<style>
tr:hover{
}
</style>

이걸로 끝이다.

하지만 곰곰히 생각을 해보자...
회원목록의 테이블의 맨 위 ROW에는 "이름,나이,직업" 등과 같은 각 필드의 설명이 자리잡고 있고
실제 데이터로의 의미는 없는 경우가 대부분이다.
그런 설명 부분의 ROW에 마우스를 올렸을때 뭔가 이펙트가 일어난다면 좀.....

자 스크롤을 위로 쭉 올려보자.
맨 처음의 테이블을 보면 thead,tbody,tfoot 이렇게 총 3개-머리,가슴,배??- 의 부분으로 나뉘어있는것을 볼 수 있다.
이것은 테이블을 만드는 방법에 대한 W3C의 표준 권고사항이니 테이블을 만들때는 이와 같은 구조로 만들기로 하자.

이렇게 테이블을 구성했다면 thead에는 "이름,나이,직업" 같은 필드의 설명을 넣고
tbody부분에는 각 회원들의 정보, 즉 실제 데이터들을 보여주고, tfoot에는 뭔가 "계(total)" 같은 것을 보여주면 좋지 않겠는가?
막상 tfoot는 꼭 필요 하지 않을 수도 있다...해서 W3C의 표준 권고안에도 tfoot은 옵션이다.. :)

정리를 해보면....
tbody에 있는 ROW에 마우스가 올려졌을때 뭔가를 해주면 된다는것으로 요약이 된다.

흠...
tbody에 있는 tr이라...
아까와는 딴판이다...tbody도 아니고 tr 도 아니고 tbody 에 있는 tr이라니...

이럴때 쓰라고 ">"가 있다.



">"의 발견

CSS에서 ">"는 포함 관계를 뜻한다.
a > b{
}
는 "a에 포함되어있는 객체들중 b" 라고 해석 하면 된다.

빙고!!
감이 오지 않는가?

tbody에 포함되어 있는 객체들중 tr

tbody > tr:hover

휴...
이제 끝났다.

이제 우리는 테이블 row에 마우스가 올려진 후의 일들을 걱정 할 필요가 없어졌다.
그 무지막지하게 길고도 길었던 onMouseOver=""와 onMouseOut=""은 bye~~bye~~하자.



못다한 이야기

포함 관계 이외에도 "class"라는 그룹형 속성이 있다.
class는 다음과 같이 태그에 class="클래스이름" 으로 지정한다.

<div class="mydiv">A</div>
<div class="mydiv">B</div>
<div class="mydiv">C</div>

이렇게 하면 A,B,C모두 동일한 스타일을 갖게 된다.
바로 그룹핑이 가능하다는 것이다.


mydiv라는 클래스에 마우스가 올려졌을때 뭔가를 하고 싶다면

div.mydiv:hover{}

이제 설명이 필요 없을줄로 안다.

그리고 마지막.
그룹핑도 필요 없고 오직 하나뿐인 너....
페이지내에 유일한 누군가에게 그만의 특별한 스타일을 주고 싶다면
"id"를 써라.

<div id="mydiv">A</div>
<div class="mydiv">B</div>
<div class="mydiv">C</div>

B,C는 동일한 스타일을 갖지만
A는 유일한 스타일을 갖게 된다.
단, 페이지내에서 ID는 유일해야 한다. 중복 되는 ID는 절대 불가!!

id로 스타일을 주고자 할때는
"#"을 쓴다.

#mydiv:hover{
}