[html] 스타일 시트로 폼 꾸미기

by ·

케스케이딩 스타일시트를 사용하여 투박한 텍스트박스의 모양을 아기자기하게 바꿀 수 있다.

단, 넷스케이프 네비게이터에서는 이 스타일이 동작하지 않는다는 것을 염두에 두기 바란다.

폼을 사용하게 될 경우  텍스트박스를 수시로 사용하게 된다.

텍스트박스의 바탕색과 테두리 색깔을 바꿀 수도 있다.

아래는 샘플이다. 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>

서진우

슈퍼컴퓨팅 전문 기업 클루닉스/ 상무(기술이사)/ 정보시스템감리사/ 시스존 블로그 운영자

You may also like...

1 Response

  1. 2reduced
    2022년 6월 19일

    1impostor

페이스북/트위트/구글 계정으로 댓글 가능합니다.