wecode 레플릿 과제를 풀며 정리한 내용입니다.

input 과 textarea 태그로 사용자가 직접 텍스트를 입력할 수 있는 영역을 만들 수 있습니다.

input 태그

input 태그는 type 과 placeholder 라는 속성을 가집니다.

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

type="text" 는 텍스트를 입력하는 속성으로 어느 텍스트나 입력할 수 있습니다. id 나 주소, 닉네임 등을 입력받을 때 사용합니다.
type="password" 은 입력시 까만 점으로 표기됩니다.
type="number" 는 숫자만 입력할 수 있습니다. 핸드번 번호를 받는다면 - 값을 입력할 수 없습니다.
placeholder 는 도움말을 넣어줍니다.

textarea 태그

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

<textarea>소개:</textarea>

input 태그와 다르게 시작태그와 끝태그로 구성되고 태그 안에 텍스트를 입력할 수 있습니다. (placeholder 와 다름)

세로 정렬, 가로 길이 조절

input textarea button 은 모두 inline element 라서 텍스트 처럼 한 줄에 이어서 나옵니다. 이런 입력 박스는 세로 정렬인 경우가 많아서 실제 개발에서는 해당 요소를 div 태그로 감싸서 분리합니다.

<div class="input-wrap">
     <input type="text">  
</div>

가로 길이를 통일하기 위해서 부모요소인 div 태그에 가로 값을 주고 자식 요소인 input 태그는 width: 100% 으로 설정합니다.

기타

textarea 요소의 오른쪽 하단 삼각형을 제거하고 싶다면,

textarea {
  resize: none;
}

input 태그의 placeholder 속성을 변경하고 싶다면

input::placeholder {
  color: #bbb;
}

타입이 text 인 input 만 스타일을 입히고 싶다면,

input[type="text"] {
}

버튼에 마우스 호버시 cursor 모양을 바꾸고 싶다면,
(추가 검색 CSS cursor Property)

button:hover {
    cursor: pointer;
}

버튼 호버시 투명도를 주고 싶다면,

button:hover {
     opacity: 0.8;
}