css hover a:hover
■ css의 가상 클래스는 HTML 문서에는 존재하지 않지만, 임의대로 선택자를 지정해서 사용할 수 있는 형식을 말하는데요. 가장 대표적인게 [:hover] 선택자입니다. 이 선택자는 [a:hover] 형식으로 사용하며,<a>태그를 이용해서 링크가 걸려있는 요소에 마우스를 올려놓았을 때 글자의 색이나 배경 등 스타일을 지정하는 역할을 합니다. <a>태그 외에도 메뉴 목록 <li> 태그 등 다른 녀석들과도 자주 쓰입니다. (li:hover)
이번 글에서는 [a:hover] 속성을 이용해서 예제를 만들어서 간단한 스타일을 적용해보겠습니다.
▲ 본문에 텍스트 한줄을 입력하고 <a> 태그를 이용해서 링크를 걸어놓은 상태입니다.
▲ <a> 태그의 기본 속성대로 텍스트 색깔은 파란색으로 바뀌고 밑줄이 생기게 됩니다. 글자색을 바꾸고, 밑줄을 없애도록 하겠습니다.
▲ 글자색은 검은색으로 바꾸고 링크의 밑줄을 삭제 했습니다. 다음은 [a:hover] 속성값을 이용해서 마우스을 글자 위에 올렸을 때 글자색을 빨간색으로 바꿔보겠습니다.
▲ [a:hove] 선택자의 속성에 {color : red;} 를 지정해서 글자위에 마우스를 올리면 빨간색으로 바뀌도록 해봤습니다.
▲ 지금 글자 위에 마우스가 올려진 상태인데요. '스크린 샷'을 찍으면 마우스 포인터가 없어져서...안 보이는 상태입니다. 정말 간단한 예제이니까 메모장 열어서 직접 해보셔요. 그럼 마지막으로 마우스 올렸을 때 텍스트에 그림자가 생기도록 해보고 마무리할게요.
▲ 예제처럼 [text-shadow]의 속성을 입력했습니다.
▲ 이 외에도 여러 가지 속성을 입력해서 다양한 효과를 만들어보세요. ^^ 수고하셨습니다.
