#
서비스 기획
2022-12-21

헷갈리는 '텍스트 필드' 구조 정리

텍스트 필드를 통해 사용자는 UI에 텍스트를 입력할 수 있습니다.

위의 이미지가 바로 텍스트 필드인데요, 기본 텍스트 필드의 구조를 알아보겠습니다.

1) 레이블 (라벨)

진한 글씨로 '이메일'이라고 적혀 있는 텍스트를 레이블이라고 합니다.

주어진 필드에서 입력해야 하는 텍스트의 종류를 나타냅니다.

2) 플레이스 홀더

위의 이미지의 '이메일 계정'과 같이, 해당 필드에 입력해야 하는 텍스트에 대한 설명 또는 예제입니다.

입력값이 한 자 이상 채워지면 플레이스 홀더는 인풋 텍스트로 대체되어 보이지 않게 됩니다.

3) 패딩값

플레이스 홀더의 상하에 비어 있는 공간을 패딩값이라고 합니다.

4) 컨테이너

1~3까지의 요소들을 모두 포함하는 가장 큰 사각형 박스입니다.

유익했다면! 이어서 읽어보기:)
Figma의 활용도 얼마나 올랐을까?

Figma의 활용도는 얼마나 올랐을까요?

Screen Flow Chart를 작성하면 도움이 되는 것

Screen Flow Chart를 작성하면 어떤 부분에서 도움이 될까요?

올 연말 트렌드는 ABCD? 연말정산 콘텐츠 알아보기

올 연말 트렌드는 ABCD? 연말정산 콘텐츠 알아보기

지금 바로 밸류랩스와
성공적인 협력을 시작해보세요.
Subscribe to our newsletter.
Thank you! Your submission has been received!
Oops!! Something went wrong while submitting the form.