html

input 태그의 다양한 스타일 설정

노래하는 마케터 2019. 3. 22. 17:29
728x90

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

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;">



728x90

'html' 카테고리의 다른 글

div 3개 일렬로 정렬  (0) 2019.03.08