[UI] 반응형 텍스트박스 #16
Description
어떤 UI를 구현하나요?
- 반응형 텍스트박스
주로 어디에, 왜 쓰이나요?
- 엑셀의 셀 하나를 생각해보면 이해하기 쉬운 반응형 텍스트박스
- 주로 댓글을 달 때 많이 볼 수 있다.
비슷한 UI와의 차이점
- input: 주로 크기가 정해져있고 많은 내용보다는 필요한 내용을 빠르게 받기 위해 사용
어떤 UX를 가지고 있나요?
- placeholder: 대체 텍스트
- resize 가능 여부: resize 혹은 disabled
- resize의 방향: horizontal 혹은 vertical 혹은 둘 다
- resize의 최대 크기: max-width 혹은 max-height 혹은 둘 다
장점
- 입력한 글의 내용을 한 번에 보기 편하다.
단점
- 화면의 UI가 변경되므로 레이아웃이 깨질 수도 있다.
추가적으로
- 사용자가 드래그로 직접 크기를 늘릴 수도 있지만, 반응형 텍스트 박스에서는 대부분 사용자의 직접 사용을 막는다.
- textarea로 입력받은 내용이 게시글로 올라갈 때 실제 게시글 결과 페이지와 작성하는 textarea의 크기와 스타일 등을 일치시키는 편이다. 마크다운 제외
어떻게 접근성을 높일 수 있을까요?
- id 속성을 주어 label과 연관을 할 수 있게 한다.
- 필수 입력 사항인지 확인할 수 있게 required 여부를 준다.
- textarea의 미입력 등으로 인한 error, 탭으로 이동한 focus에 대한 스타일을 다르게 줄 수 있어야 한다.
레퍼런스