본문 바로가기 메인메뉴 바로가기
이 누리집은 대한민국 공식 전자정부 누리집입니다.

텍스트 영역

텍스트 영역은 사용자가 키보드로 글자, 숫자, 기호 등이 조합된 여러 줄의 텍스트를 입력하는 경우에 사용하는 요소이다.

컴포넌트명

텍스트 영역 (Textarea)

텍스트 영역 (Textarea) 스타일 예시

  1. 1.레이블

    사용자가 어떤 텍스트를 입력해야 하는지를 안내하는 문구

  2. 2.입력 필드

    텍스트가 입력되는 영역으로 배경과 입력 영역을 구분하여 사용자가 텍스트 영역임을 인지할 수 있게 함

  3. 3.플레이스홀더(선택)

    어떤 값을 입력해야 하는지에 대한 힌트 또는 예시를 제공함

  4. 4.입력된 글자 수

    입력 가능한 글자 수와 입력된 글자 수를 안내하는 텍스트

유형

Text_area

State사용자의 상호작용 시 컬러가 변경된다.

Default

입력시 필요한 정보를 입력해 주세요

1/100

Focused

입력시 필요한 정보를 입력해 주세요

1/100

Completed

입력시 필요한 정보를 입력해 주세요

1/100

Error

입력시 필요한 정보를 입력해 주세요

100/100

Disabled

입력시 필요한 정보를 입력해 주세요

1/100

View

입력시 필요한 정보를 입력해 주세요

1/100

Text보조 설명글 또는 얼럿을 필요시에 제공한다.

Hint

입력시 필요한 정보를 입력해 주세요

1/100

Alert

1/100

Counter입력 가능한 글자 수와 입력된 글자수를 안내하는 텍스트로써 사용하는 것을 권장한다.

Counter_on

입력시 필요한 정보를 입력해 주세요

1/100

Counter_off

입력시 필요한 정보를 입력해 주세요

코드 보기

가이드

  • 입력 필드는 텍스트의 길이를 고려하여 적절한 크기로 제공한다. 기본적으로 텍스트 입력 필드의 크기를 그리드, 화면 크기에 따라 유동적이나 전체 섹션 영역을 차지하도록 구현한다. 그러나 이름, 우편번호, 전화번호 등 입력값의 길이를 예측할 수 있는 경우 최대 길이에 맞추어 입력 필드의 너비를 고정하고, 사용자가 더 작은 크기의 화면에서도 잘림 없이 입력값을 확인할 수 있는지를 점검해야 한다.
  • 모든 텍스트 입력 필드에는 레이블을 제공한다. 텍스트 입력 필드에 레이블이 제공되지 않으면 사용자는 어떤 정보를 입력해야 하는지 알 수 없다. 레이블을 생략하고자 하는 경우에는 레이블 없이도 사용자가 값을 선택하는 데 문제가 없다는 근거가 명확해야 한다.
  • 플레이스홀더가 레이블이나 도움말의 대체 수단으로 사용되어서는 안 된다. 플레이스홀더는 사용자가 값을 입력하기 시작하는 순간 사라진다. 플레이스홀더가 레이블이나 도움말의 대체 수단으로 활용되는 경우, 사용자는 값을 입력하는 도중 어떤 값을 입력하는 중이었는지, 어떤 형식으로 입력해야 하는지 다시 확인할 수 없다. 또한 거의 모든 웹 브라우저가 플레이스홀더 텍스트의 기본 색상을 최소 명도 대비 기준보다 낮게 제공하므로 읽기 어렵다. 이와 같이 플레이스홀더는 다양한 사용자 그룹에서 여러 사용성 문제를 야기하므로 단순히 사용자의 행동을 유도하기 위한 수단으로 사용해야 한다.