묻고답하기
스타일시트 파일에 onmouseover 를 포함(?)하는 방법?
2006.06.29 12:14
현재 홈페이지에 스타일시트 파일을 링크하여 사용하고 있습니다.
이번에 리뉴얼하면서 다음까페처럼 여러 스타일시트 파일을 만들어 적용하는 방식을 사용하려합니다.
그런데 제 메뉴에는 onmouseover와 onmouseout을 사용하여 테이블 셀(td)의 색상을 마우스 오버, 아웃할 경우 변경되도록 하고 있습니다.
예를 들면 아래와 같습니다.
<td onMouseOver="this.style.backgroundColor='#D4D9DD'" onMouseOut="this.style.backgroundColor='#ffffff'" width=122 height=20 align=center>
<a href=paper.html>Papers</a>
</td>
사실 스타일시트를 사용하는 이유가 파일 하나의 변경으로 모든 문서의 수정이 용이한 장점 때문이지 않습니까.
그런데 기껏 스타일시트를 여러가지로 이쁘게 만들어봤자
저 경우엔 각 스타일시트에 맞게 td 태그의 onmousever와 onmouseout의 색상을 모두 일일이 변경해줘야합니다.
그래서 onmouseover와 같은 속성을 스타일시트 파일안에 적용시킬 수 있는 방법을 찾아봤는데 아무래도 찾을 수가 없네요. 아마도 그런 방법은 없지 않을까도 싶고.
저런 속성들을 스타일시트 파일에 포함하는 방법이나
스타일시트 파일 링크처럼 하나의 파일 수정으로 모두 변경 가능한 방법이 없을까요?
아직 초보라 방법을 잘 몰라 질문드리니,
이해해주시고 님들의 많은 꾸지람과 호쾌한 답변 부탁드립니다.
이번에 리뉴얼하면서 다음까페처럼 여러 스타일시트 파일을 만들어 적용하는 방식을 사용하려합니다.
그런데 제 메뉴에는 onmouseover와 onmouseout을 사용하여 테이블 셀(td)의 색상을 마우스 오버, 아웃할 경우 변경되도록 하고 있습니다.
예를 들면 아래와 같습니다.
<td onMouseOver="this.style.backgroundColor='#D4D9DD'" onMouseOut="this.style.backgroundColor='#ffffff'" width=122 height=20 align=center>
<a href=paper.html>Papers</a>
</td>
사실 스타일시트를 사용하는 이유가 파일 하나의 변경으로 모든 문서의 수정이 용이한 장점 때문이지 않습니까.
그런데 기껏 스타일시트를 여러가지로 이쁘게 만들어봤자
저 경우엔 각 스타일시트에 맞게 td 태그의 onmousever와 onmouseout의 색상을 모두 일일이 변경해줘야합니다.
그래서 onmouseover와 같은 속성을 스타일시트 파일안에 적용시킬 수 있는 방법을 찾아봤는데 아무래도 찾을 수가 없네요. 아마도 그런 방법은 없지 않을까도 싶고.
저런 속성들을 스타일시트 파일에 포함하는 방법이나
스타일시트 파일 링크처럼 하나의 파일 수정으로 모두 변경 가능한 방법이 없을까요?
아직 초보라 방법을 잘 몰라 질문드리니,
이해해주시고 님들의 많은 꾸지람과 호쾌한 답변 부탁드립니다.
<html>
<head>
<style type=text/css>
<!--
.qna_line_a {
background-Color:#FFFFCC;
}
.qna_line_a_on {
background-Color:#FFCC00;
}
.qna_line_a_off {
background-Color:#FFFFCC;
}
.qna_line_b {
background-Color:#CCFF99;
}
.qna_line_b_on {
background-Color:#CCCC00;
}
.qna_line_b_off {
background-Color:#CCFF99;
}
-->
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr class="qna_line_a" onmouseover="this.className='+ '+ 'qna_line_a_on'" onmouseout="this.className='qna_line_a_off'">
<td valign="top">내 용</td>
</tr>
<tr class="qna_line_b" onmouseover="this.className='qna_line_b_on'" onmouseout="this.className='qna_line_b_off'">
<td valign="top">내 용</td>
</tr>
</table>
</body>
</html>