[CSS3] a태그와 CSS를 이용하여 롤오버 버튼 만들기

CSS를 이용한 롤오버 버튼 만들기

1. [CSS3] CSS를 이용하여 div로 롤오버 버튼 만들기

2. [CSS3] a태그와 CSS를 이용하여 롤오버 버튼 만들기

 

div를 이용한 롤오버버튼은 롤오버 영역위에 원하는 컨트롤이나 레이아웃 배치가 가능하기 때문에 범용성은 좋지만 단순이 링크만 필요할때 쓰기에는 너무 무겁습니다.

 

단순이 링크용으로만 사용할 것이라면 a태그를 이용하는 편이 났죠.

 

 

1. CSS 작성

a태그자체가 원래부터 마우스 동작에 반응을 합니다.

그러니 우리는 이 동작에 우리가 원하는 스타일을 적용하면 되는 것이죠.

 

a태그의 기본스타일과 hover스타일을 우리가 원하는 스타일로 바꿔 봅시다.

<style type="text/css">
	.size1
	{
		display:block;
		width:30px;
		height:21px;
	}
		
	a.Test1
	{
		background:url("/top_korea_bt1.jpg") no-repeat;
	}
	a:hover.Test1
	{
		background:url("/top_korea_bt2.jpg") no-repeat;
	}
</style>

 

 

 

a태그 사이에 이미지나 글자 같은 것들이 없다면 a태그 자체가 표시되지 않기 때문에 크기를 지정하여야 합니다.

 

a.Test1

a:hover.Test1

이 두가지는 Test1를 스타일로 쓰는 경우 적용되는 스타일입니다.

a:hover.Test1가 마우스가 오버됬을때 하는 동작입니다.

 

 

2.HTML 작성

이제 a태그를 작성하고 스타일을 Test1으로 적용하면 됩니다.

 

<a class="Test1 size1" ></a>

 

3.테스트

테스트 할때 조심해야 할것이 있는데 웹서버에 안올리면 정상적으로 돌아가지 않는 경우가 있습니다.

그러니 테스트는 웹서버에서 하시는걸 권장합니다.

 

 

HTMLPage2.zip