[UI] 반응형 텍스트박스

[Sleepingoff]

어떤 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에 대한 스타일을 다르게 줄 수 있어야 한다.

---

레퍼런스

https://www.magentaa11y.com/web/