요즘에는 웹페이지를 제작할 때
같은 태그를 쓰더래도 어떻게 하면 더 멋지게
표현 할 수 있을까? 를 많이들 생각하시던데.....버턴태그
역시 스타일 시트를 조금만 응용한다면 그냥
밋밋한 회색버턴과는 차원이 다른 버턴을 만들 수
있습니다. 그 방법을 여기서 가르쳐드리도록 하져^^
(강좌의 기초자료는 짜근에서
발췌한 것입니다.)
※ 스타일시트를 이용해 멋진 버턴 만들기
어때요? 같은 태그를 사용했어도 차원이
다르져?^^ 이렇듯 스타일 시트를 이용하면 멋지게
변환시킬 수 있습니다. 이제 어떻게 할 수 있는 지
알아보죠^^
<input
type="button" value="멋진 버턴" style="color:white; font-size: 9pt; background-color:#99ccff; border:1 solid #6699ff;size= 30;height:20px"></style>
<textarea style="color:white; font-size: 9pt; background-color:#99ccff; border:1 solid #6699ff;size=
30;height:60px" rows="3"
cols="20">멋진 텍스트칸</textarea> |
스타일 시트를 아시는 분들이라면 알텐데...
위에 방법은 태그에 직접 스타일시트를 적용시켜
만들어 준것입니다. 다른 방법으로 head 부분에서
스타일 시트를 정의해주는 방법이 있져...^^
<style type="text/css">
input{color:white; font-size:
9pt; background-color:#99ccff; border:1 solid
#6699ff;size= 30;height:20px}
textarea{color:white; font-size: 9pt;
background-color:#99ccff; border:1 solid #6699ff}
</style> |
위에 두가지 방법 중에서 여러분들이
사용하기 편한 것으로 사용을 하시면 됩니다.
앗차! 사용된 스타일시트의 각각의 속성을
설명해드려야죠?^^ 먼저 color 와 font-size 의
경우는 글자색과 글자크기를 나타내는 거죠....그리고
background-color 는 버턴이나 텍스트에리어의
배경색, border:1 solid #6699ff 는 테두리 굵기와
테두리 색을 나타내어 줍니다. 그리고 size
와 height 는 텍스트칸에 들어갈 수 있는 글자수와
높이지정입니다.
※ 롤오버 버턴
멋진 버턴보다 더 멋진 버턴이져^^
테이블에서도 사용할 수 있는 기능인데요(
관찰력이 좋으신 분들은 태그매니아 홈페이지
첫화면에 사용됬다는 것을 알겁니다. )
자바스크립트의 이벤트핸들러를 이용한것입니다.
| <input type="button"
value="더 멋진 버턴" style="color:white;
font-size: 9pt; background-color:#99ccff; border:1 solid
#6699ff;size= 30;height:20px" onmouseover="this.style.backgroundColor=
'#336633'" onmouseout="this.style.backgroundColor='#99ccff'"> |
input 태그에 대해선 대충 끝낸거 같은데요....input
태그와 같은 양식태그들은 다른 양식 태그들과
함께 사용되어야 만히 본래의 제 기능을 발휘 할
수 있습니다. 여러분들이 웹서핑 도중에
방명록이나 게시판 같은걸 많이 보실 겁니다.
그런게 모두 다 양식태그를 이용해서 만들
것들이라고 할 수 있습니다. 그럼 버턴태그
강좌는 여기서 마치도록 하겠습니다.
|
