textarea 와 input:text 를 비교해보는 시간을 가져볼까 합니다.
<input type="text">
<textarea></textarea>input:text 는 한줄, textarea는 여러줄입니다. textarea 는 input과 비슷한 속성들을 그대로 사용할 수 있습니다. autofocus, placeholder, id를 줘서 label 과 연결한다던지 하는 모든 것들이요. 그렇다면 이외에는 어떤 차이점이 있을까요?
<input type="text" value="시작하는 값" />
<textarea>시작하는 값</textarea>시작하는 값을 input 에서는 value 속성으로 받고 textarea 에서는 태그 안에 넣어준다는 차이점이 있습니다. 그리고 textarea는 기본값으로 resize 가 가능합니다. 오른쪽 아래의 끝자락을 잡고 이리저리 늘려주면 죽죽 늘어나는데요. 애써서 작업한 스타일링을 깨부수고 늘려버릴 수도 있습니다. 이때 크기를 고정해주는 방법이 2가지가 있습니다.
첫번째는 cols, rows 속성 사용하기 입니다.
<textarea cols="한줄에 들어가는 글자의 수" rows="아래로 총 몇줄까지 쓸것인지" />두번째는 style 에 width, height 그리고 resize: none; 의 값을 입력하는 것입니다.
<textarea
style="resize: none; width: 200px; height: 100px"
placeholder="아무거나 일단 적어"
autofocus required
>
</textarea
>비밀번호를 입력해야할 때 타입을 password 로 지정한뒤 어떠한 값을 입력해도 복붙을 해도 보호가 됩니다.
<input type="password" />연락처 입력을 위해 input 태그를 써야하는데 모바일 환경을 생각한다면 type 으로 tel을 고려해보세요. 컴퓨터, 노트북으로 하신다면 큰 차이가 뭐지? 하실 수 있습니다.
<input type="tel" />데스트탑과 모바일의 가장 큰 차이점을 화면크기도 있지만 키보드가 따로 존재하는 데스크탑과는 다르게 핸드폰은 안그래도 작은 화면창을 반쪽으로 쪼개서 키보드를 올려줍니다. 이 때 연락처입력을 하는데 숫자 키패드가 쫙 나오는 것과 일반 쿼티 키보드가 나오는 것은 UX 경험의 큰 차이를 나타냅니다.
input:number 도 마찬가지로 숫자가 나오긴 하지만 원치않는 올림 내림 버튼이 있어서 불편합니다. 즉 우리가 원하는 것은 text 이면서 숫자를 입력하는 창이기 때문에 input:tel 을 사용해 ux를 신경써주는 것입니다.
원하는 곳에 적절한 html 태그를 사용하는 그날까지 화이팅입니다!
