태그의 다양한 스타일(style) 설정

http://nis7.egloos.com/1988543

한개씩 간단하게 속성을 바꿔가면서 작성한 예제를 보자.

1. <input type="text" name="" size="40" value="기본형식">
2. <input type="text" name="" size="40" value="Readonly (입력불가)" readonly>
3. <input type="text" name="" size="40" value="Disabled (작동불가)" disabled>
4. <input type="text" name="" size="40" value="입력폰트 설정" style="font-size:12pt; color:#ff0000; font-weight:bold;">
5. <input type="text" name="" size="40" value="테두리 0px 로 설정" style="border: 0px;">
6. <input type="text" name="" size="40" value="테두리 1px 로 설정" style="border: 1px solid #ff0000;">
7. <input type="text" name="" size="40" value="테두리 4개 각각 설정" style="border-right: #ff0000 1px solid; border-left: #00ff00 1px solid; border-top: #ffff00 1px solid; border-bottom: #0000ff 1px solid;">
8. <input type="text" name="" size="40" value="배경색 회색으로 설정" style="background-color: #e2e2e2;">
9. <input type="text" name="" size="40" value="입력값 오른쪽 정렬" style="text-align: right;">
10. <input type="text" name="" size="40" value="크기 강제 조정" style="height:30px;">
11. <input type="text" name="" size="40" value="패딩주기(상:5,우:0,하:0,좌:10)" style="padding:5px 0px 0px 10px;">

위 결과는

이런 결과물을 보여주게 됩니다.

여러 속성이 들어갈 경우 html 코드가 길어지게 되므로 Style 을 이용하는게 좋다.

<style type="text/css">
    .my_box {
        
          height: 20px;
          padding: 2px 2px 2px 2px; /* 상, 우, 좌, 하 */
          text-align: left; /* left, center, right */
          border: #888888 1px solid;
          background-color: #FFFFFF;
          /* 테두리 각각의 색상 및 두께를 지정할때 사용합니다
          border-right: #888888 1px solid;
          border-left: #888888 1px solid;
          border-top: #888888 1px solid;
          border-bottom: #888888 1px solid;
          */

          /* 글꼴을 따로 지정할 수 있다.
          font-family: 궁서, Gulim, 'Times New Roman';
          */
          color: #0000ff;
          font-size: 10pt; 
          font-weight: normal; /* normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 */
          font-style: normal; /* normal, italic, oblique */;
    }
</style>

위와 같이 스타일을 지정하고, 아래와 같이 사용하게 되면 많은 속성을 쉽게 사용할 수 있다.

<input type="text" name="" value="스타일로 지정 ABCDE" class="my_box">