[html] 스타일 시트로 폼 꾸미기
케스케이딩 스타일시트를 사용하여 투박한 텍스트박스의 모양을 아기자기하게 바꿀 수 있다.
단, 넷스케이프 네비게이터에서는 이 스타일이 동작하지 않는다는 것을 염두에 두기 바란다.
폼을 사용하게 될 경우 텍스트박스를 수시로 사용하게 된다.
텍스트박스의 바탕색과 테두리 색깔을 바꿀 수도 있다.
아래는 샘플이다. 2개중 사용하기 편한 방법을 사용하길 바란다.
1. <head>…</head> 태그 사이에 <style> 태그를 사용하는 방법
태그에 class=”클래스이름” 이라고 속성을 유심히 살펴보라.
스타일을 클래스로 정의할 것이기 때문에 아래와 같은 형식을 따랐다.
.클래스이름 { 요소: 값 [; 요소: 값] …[; 요소: 값] }
클래스이름은 임의로 설정하여 사용할 수 있다.
<html>
… 중략 …
<head>
<style type=”text/css”>
<!–
.at {
Background-color:aliceblue;
Border:1x SOLID #6B7BAF
}
//–>
</style>
</head>
<body>
<center>
<form>
<table bgcolor=”#6B7BAD” border=”0″>
<tr>
<td>
<table bgcolor=”#FFFFFA” border=”0″>
<tr>
<td width=”100″ align=”center”>사용자 ID</td>
<td width=”120″><input type=”text” name=”txtID” size=”12″ class=”at”></td>
</tr>
<tr>
<td align=”center”>비밀번호</td>
<td><input type=”password” name=”txtPasswd” size=”12″ class=”at”></td>
</tr>
<tr>
<td colspan=”2″ align=”center”><input type=submit value=”확인”></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
2.해당 태그에서 style 속성을 사용하는 방법
<html>
…. 중략 ….
<body>
<center>
<form>
<table bgcolor=”#6B7BAD” border=”0″>
<tr>
<td>
<table bgcolor=”#FFFFFA” border=”0″>
<tr>
<td width=”100″ align=”center”>사용자 ID</td>
<td width=”120″><input type=”text” name=”txtID” size=”12″ style=”Background-color:aliceblue; Border:1x SOLID #6B7BAF”></td>
</tr>
<tr>
<td align=”center”>비밀번호</td>
<td><input type=”password” name=”txtPasswd” size=”12″ style=”Background-color:aliceblue;Border:1x SOLID #6B7BAF”></td>
</tr>
<tr>
<td colspan=”2″ align=”center”><input type=”submit” value=”확인”></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
![[java] 스크립트 – 화면조절하기 -1](http://nblog.syszone.co.kr/wp-content/themes/hueman/assets/front/img/thumb-medium-empty.png)
