💿 input 태그

사용자가 직접 텍스트를 입력할 수 있는 input 태그!

💾 type 속성 feat.placeholder

<input type="text" placeholder="ID"> 
<input type="password" placeholder="비밀번호"> 
<input type="number" placeholder="학번">

type 속성의 값으로는 text,password,number 등이 있음.

placeholder 속성은 입력창에 도움말을 넣어주는 부분.

💿 textarea 태그

<textarea>소개:</textarea>

input 태그보다 더 긴 내용을 입력 받고 싶을 때 쓰는 textarea 태그.

💾 input과 사용상 차이점

input은 닫는 태그가 없지만 textarea는 닫는 태그가 있다!

input 태그도 textarea 태그처럼 값을 미리 세팅하고 싶다면 value 속성을 사용함.

💿 input 태그와 textarea 태그는 inline 요소!

따라서 블럭 요소처럼 구현하고 싶을 때는 부모 div 태그로 감싸 표현함.

<div class="inputWrap">
  <input type="text">  
</div>

💿 스타일 - 길이 통일하기

입력 태그들의 길이가 제각각일 때 어떻게 통일시킬까?

방법1.

input 태그와 textarea 태그에 같은 width 값 주기.

방법2.

부모 태그에 width를 주고 각각의 태그의 width를 '100%'로 설정하기.

유지관리 측면에서 2번 방법이 더 효율적이기 때문에 2번 방법을 사용하자.

1. 일단 div로 감싸기로 하고, 이에 관한 클래스를 따로 만들자.

div.surveyContainer{
  width: 200px;
}

input, textarea{
	width: 100%;
}

💿 스타일 - 마우스 오버 시 상호작용하기

버튼에 마우스를 가져다댔을 때 마우스 커서의 모양을 바꾸고 싶다면?

button:hover{
	cursor: point;
}

좀더 버튼을 누를 수 있다는 느낌을 주고 싶다면?

button:hover{
	cursor: point;
    opacity: 0.8;
}