💾 input

🗒 사용자가 직접 텍스트를 입력할 수 있는 <input>, <textarea>

input 태그는 시작, 끝 태그가 없다. 하나의 태그가 하나의 요소

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

type="text"
text를 입력하는 속성
대부분의 input type은 text다. 어느 텍스트나 입력 가능
이름, id, 주소, 닉네임 등을 입력 받을 때 사용

type="password"
text와 비슷한 속성인데, 뭔가를 입력하면 까만 원으로 나옴
남이 보지 않도록 처리한 것
화면에서는 안 보여도 JavaScript 쪽에서 무슨 값을 입력했는지 가져올 수 있다.

type="number"
숫자만 입력할 수 있음
만약 type="number" 으로 핸드폰 번호를 받으려면 "-"는 입력할 수 없다.

placeholder
도움말을 넣어주는 부분
실제 input에 입력되어있는 텍스트가 아님

input에 미리 값을 써놓고 싶을때는 value라는 속성 사용한다.

textarea

input보다 더 긴 텍스트 입력받고 싶을때 사용
보통 짧은 방명록이나 댓글 입력할때 씀

소개는 그냥 글씨

🚦디자인 변경

🗒 input, textarea, button은 모두 inline element라서 한 줄에 이어서 나옴.
그래서 div 태그로 감싸서 분리해서 많이 쓴다.

<input> 과 <textarea> 의 가로 길이가 모두 제각각 인것을 통일시켜보자

여러 방법이 있다.

방법 1. <input>, <textarea> 에 같은 width 값을 부여한다.
방법 2. 부모에 width 를 주고 <input> , <textarea> 의 width 는 100%로 설정한다.

2의 방법이 더 수정하기 편하다. 

.survey-container {
 width: 200px;
}
input, textarea {
 width: 100%;
}

.survey-container 가 가운데로 올 수 있도록 margin 도 추가해주세요.

.survey-container {
  margin: 100px auto;

input 요소끼리 띄우고, 글자 키우고, 테두리 반경 둥글게

input, textarea {
  font-size: 13px;
  margin-bottom: 5px;
  border-radius: 5px;
}

placeholder 속성 css 바꾸기

input::placeholder {
  color: #bbb;
}

input type 중에 text만 스타일 입히고 싶으면,

input[type="text"]::placeholder {
  color: red;
}

button 스타일

글자크기, 글자색, 버튼배경색, 테두리 반경, padding 바꾸고,
버튼에 마우스 올리면 커서 모양으로 바뀌는 호버 설정

👉 hover : 마우스를 올렸다는 뜻

button{

 color:white;
 font-size:15px;
 background-color:#4CAF50;
 padding: 5px 10px;
 border-radius : 5px;
 
}
button:hover{

 cursor:pointer;
 opacity:0.8;
}

cursor : 커서모양. col-resize 등 여러가지 많다.
opacity는 해당 요소를 불투명하게 만듬.
0.8은 백분율값. 원래 스타일에서 80% 만큼 흐리게 한다는 말. 0% 만들면 안보인다.