# InputMask

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2Fw6kdDt3dlKGToDoxl3hs%2FFrame%2051.png?alt=media&#x26;token=ae795bd6-156f-418a-9b71-7a09f53f7ab1" alt="" width="125"><figcaption></figcaption></figure>

## 컨트롤 설명

Time, Money(원화), Date 형태로 숫자를 입력받을 수 있는 컨트롤입니다.&#x20;

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FIMv6VcnVi1bo0PBGc58G%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-04-23%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%202.48.28.png?alt=media&#x26;token=f69dd7c6-b285-484f-98df-d20b112c3572" alt=""><figcaption></figcaption></figure>

데이터 입력시 지정한 형태로 나타납니다.

## 스타일 유형

다양한 스타일 유형들을 제공하고 있습니다.

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FiCMkGKTwbKKm3Xy1XRvm%2Fimage.png?alt=media&#x26;token=8e6a5e0a-49ed-47c6-81c9-a36db74615af" alt=""><figcaption></figcaption></figure>

## 디자인(Design) 모드

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2Fq3VcMSsWm6XZT2RxAp9N%2Fimage.png?alt=media&#x26;token=4af09955-7aa5-4c0d-a3b6-3497f8721ca3" alt=""><figcaption></figcaption></figure>

### 인풋 컨트롤 속성 변경

{% hint style="info" %}
인풋 컨트롤은 우측에서 각각의 속성을 변경하여 수정할 수 있습니다.
{% endhint %}

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FfRrfwh8tlByMUu7to2Rg%2F%E1%84%8B%E1%85%B5%E1%86%AB%E1%84%91%E1%85%AE%E1%86%BA%E1%84%87%E1%85%A7%E1%86%AB%E1%84%80%E1%85%A7%E1%86%BC_%E1%84%90%E1%85%A6%E1%86%A8%E1%84%89%E1%85%B3%E1%84%90%E1%85%B3.png?alt=media&#x26;token=984d37c6-7f6d-4dc7-962e-921ac1bff05c" alt=""><figcaption></figcaption></figure>

### 디자인 속성

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden></th></tr></thead><tbody><tr><td><a href="../../design-mode/caption">캡션</a></td><td></td><td></td></tr><tr><td><a href="../../design-mode/control-name">컨트롤명</a></td><td></td><td></td></tr><tr><td><a href="../../design-mode/placeholder">힌트</a></td><td></td><td></td></tr><tr><td><a href="../../design-mode/default-style">스타일유형</a></td><td></td><td></td></tr><tr><td><a href="../../design-mode/width-height">너비높이</a></td><td></td><td></td></tr><tr><td><a href="../../design-mode/text">텍스트</a></td><td></td><td></td></tr><tr><td><a href="../../design-mode/background">배경</a></td><td></td><td></td></tr><tr><td><a href="../../design-mode/border">보더</a></td><td></td><td></td></tr><tr><td><a href="../../design-mode/margin">마진</a></td><td></td><td></td></tr><tr><td><a href="../../design-mode/padding">패딩</a></td><td></td><td></td></tr><tr><td><a href="../../design-mode/absolute-position">절대값 위치 설정</a></td><td></td><td></td></tr><tr><td><a href="../../design-mode/opacity">투명도 설정</a></td><td></td><td></td></tr><tr><td><a href="../../design-mode/undefined">인풋 컨트롤 변경</a></td><td></td><td></td></tr></tbody></table>

## 개발(Dev) 모드

### 컨트롤 유형

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2F3xTKCwR8wiLVPodDagN7%2Fimage.png?alt=media&#x26;token=e303271a-a1b7-4894-aff0-62ecf6819a9e" alt=""><figcaption></figcaption></figure>

Input 컨트롤에 입력한 값을 표시하는 방식을 지정할 수 있습니다.

* **Time**: 입력한 값을 00:00 시간 형식으로 보여줍니다.
* **Money**: 입력한 값을 000,000 형식으로 보여줍니다.
* **Date:** 입력한 값을 0000-00-00 년월일 형식으로 보여줍니다.

### 기본값

연결된 컬렉션에 값이 없을 경우 InputMask컨트롤에 기본값이 보여집니다.

### Data

**컬렉션키(멀티)**

InputMask는 컬렉션키를 여러개 등록할 수 있습니다. 데이터 연결을 해야 컬렉션키를 등록할 수 있습니다.

Data에 대한 자세한 설명은 [data](https://docs.flextudio.com/flextudio/scenario/dev-mode/component/data "mention")를 참고하세요.

### Event

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FZytvhF5NCTegvY0hFt91%2Fimage.png?alt=media&#x26;token=ec32cea5-97a6-44cf-810b-645e5b84aee8" alt=""><figcaption></figcaption></figure>

이벤트 종류에 대한 자세한 설명은 [#undefined-4](https://docs.flextudio.com/flextudio/dev-mode/component/event#undefined-4 "mention")를 참고하세요.

### 공통 개발 속성

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden></th></tr></thead><tbody><tr><td><a href="../../dev-mode/component/status">컨트롤 상태</a></td><td></td><td></td></tr><tr><td><a href="../../../reference/voca/authkey">권한키</a></td><td></td><td></td></tr><tr><td><a href="../../dev-mode/component/loadscript">로드스크립트</a></td><td></td><td></td></tr></tbody></table>
