버튼
하면 보통은 인풋버튼(input button)을 생각합니다.
하지만 인풋버튼은 모양내기가 힘들다는 단점이-_-;;;
그래서 인풋이미지(input image)나 img를 사용하여 마진을 조종해서 사용하기도 합니다.
이 방법들이 나쁜방법은 아니지만 상황에 따라서 안맞는 경우가 좀있습니다.
그래서 좀더 범용적으로 사용이 가능한 div로 롤오버 버튼을 구현해 보겠습니다.
1. 레이아웃 구조
div로 롤오버 버튼을 구현하는 경우 적용되는 css나 용도에 따라 레이아웃이 달라 집니다.
이 글에서 사용할 버튼의 동작은 다음과 같습니다.
1)롤오버(이미지)
2)링크
이런 동작을 위해서는 아래와 같은 구조가 필요합니다.
버튼영역은 관리를 편하게 하려는 목적도 있기 때문에 필요에 따라서는 없어도 됩니다.
2. html 코드
구조가 완성되면 html자체는 간단하죠.
<div class="Item" > <a href="http://blog.danggun.net/" > <div onmouseover="this.className='Button_Over';" onmouseout="this.className='Button_Out';" > <span class="Item_Font">div 버튼 </span> </div> </a> </div>
div의 Item 스타일은 버튼의 위치나 크기, 내용물의 정렬 상태등을 결정합니다.
div의 Button_Over은 마우스가 오버 되었을때 Button_Out는 마우스가 밖으로 나갔을때의 동작입니다.
만약 반대로 동작하는 버튼을 만들고 싶다면 기본 스타일을 Button_Over나 Button_Out로 지정하셔야 합니다.
span의 Item_Font는 버튼안에 표시될 글자의 스타일입니다.
여기서 주의깊게 보아야 할점은 롤오버 영역에 있는
"this.className='Button_Over';"
이것입니다.
여기서 this는 자신을 의미 합니다.
onmouseover이벤트가 오면 자신의 스타일을 교체하겠다는 의미 입니다.
이런 식으로 html으로만 동적으로 스타일이나 속성을 교체 할수 있습니다.
3. 스타일 시트 작성
이제 html에서 할 작업은 다끝났고 모든건 css로 넘어갔습니다.
<style type="text/css">
/* 상단 메뉴 아이템*/
.Item
{
width:300px;
height:70px;
/* height와 값이 같아야 중앙정렬 된다. */
line-height:70px;
text-align:center;
}
/* 상단 메뉴 폰트*/
.Item_Font
{
color:Black;
font-size:20px;
font-weight:bold;
}
/* 상단 메뉴 버튼 - 마우스 아웃 */
.Button_Out
{
width:100%;
background:url("/btn_Out.png");
background-repeat:no-repeat;
background-position:center center;
}
/* 상단 메뉴 버튼 - 마우스 오버 */
.Button_Over
{
width:100%;
background:url("/btn_Over.png");
background-repeat:no-repeat;
background-position:center center;
}
</style>
백그라운드 이미지는 이 셈플에 같이 들어 있지 않으니 직접 만들어서 사용하시길 바랍니다.
Button_Out에 있는 이미지는 투명이미지 입니다.
Button_Over에는 형광색 불빛 이미지입니다.
마무리
이렇게 버튼 하나 만들어놓고 복사붙여놓기로 관리하면서 스타일시트만 바꿔주면 편하게 원하는 컨트롤이 가능한 버튼을 만들수 있습니다.
하지만 위에서도 말했다 싶이 상황에 따라서 이방법이 안맞을수도 있다는점 꼭 기억하세요 ㅎㅎㅎㅎ
이렇게 구현한 버튼의 가장 큰문제는 롤오버 이미지가 컨탠츠 밑에 깔린다는 점입니다.
일반적인 경우는 이런 동작이 틀린게 아니지만 특수한경우에는 이방법이 오이려 안좋죠.
예를 들면 롤오버시 반투명 이미지를 씌운다던가 하는 방법일때 말이죠.
