<input /> vs <textarea></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" 으로 핸드폰 번호를 받으려면 "-"는 입력할 수 없음.

value
미리 값을 세팅 해놓고 싶을 때 사용.

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

• <textarea>

  <textarea>소개:</textarea>

  <input> 보다는 더 긴 텍스트를 입력받고 싶을 때 사용.
  보통 짧은 방명록이나 댓글을 입력할 때 <textarea> 태그를 사용.

• div와 input, textarea
  실제 사이트를 개발할 때, <input> 이나 <textarea> 를 부모 <div> 태그로 감싸 영역을 분리 하곤 함

1. <input> 과 <textarea> 의 가로 길이가 모두 제각각인 것을 통일하는 방법
2. <input>, <textarea> 에 같은 width 값을 부여. 부모에 width 를 주고 <input> , <textarea> 의 width 는 100%로 설정.
   보통 변경 하는 부분이 더 적은 2번 방법으로 진행

• placeholder, type 스타일

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

• button 스타일

  button:hover {
      cursor: pointer;
  }
  버튼에 마우스를 올리면, cursor 모양을 바꾸도록 하겠음