form 요소
CSS를 이용하면 사용자의 입력을 받는 input 요소에도 다양한 스타일을 설정 가능
[input 요소] 크기 설정
width 속성
[input 요소] 테두리 설정
border 속성
border-radius 속성
[input 요소] 배경색 적용
background-color 속성
color 속성
[(포커스를 가지고 있는) input 요소] 스타일 적용
:focus 선택자를 이용하여 해당 input 요소가 포커스를 가지고 있을 때의 스타일을 별도로 설정
<style>
input[type="text"] { border: solid 2px #FFE4B5; -webkit-transition: 0.5s; transition: 0.5s; }
input[type="text"]:focus { border: solid 2px #D2691E; }
input[type="password"] { border: solid 1px black; }
input[type="password"]:focus { background-color: #E0FFFF; }
</style>
[input 요소] 아이콘 / 이미지 삽입
background-image 속성 : 아이콘(icon)이나 이미지를 삽입
background-position 속성 : 아이콘이나 이미지가 나타날 위치를 설정
[textarea 요소] 크기 조절
resize 속성
textarea 요소의 크기를 조절
해당 textarea 요소의 오른쪽 아래 부분에 마우스로 잡을 수 있는 핸들 생성
사용자가 그 핸들을 마우스로 클릭하여 조절하면 textarea 요소의 크기를 마음대로 조절
- none : 해당 요소의 크기를 조절할 수 없음. (기본 설정)
- both : 사용자가 해당 요소의 높이와 너비를 모두 조절할 수 있음.
- horizontal : 사용자가 해당 요소의 너비만을 조절할 수 있음.
- vertical : 사용자가 해당 요소의 높이만을 조절할 수 있음.
[select 요소] 스타일 적용
CSS를 이용
https://www.tcpschool.com/css/css_advanced_rules
