입력 마스크
분류: 서식
날짜·시간·우편번호·전화번호·IP 주소처럼 정해진 자릿수와 구분자 형식으로 입력을 받아야 하는 필드 모음입니다. 각 입력란은 form-control에 data-mask 속성으로 마스크 패턴(0은 숫자 한 자리)을 지정하고, data-mask-visible="true"로 입력 전에도 마스크 형태(00/00/0000 등)를 미리 보여줍니다. 실제 마스킹 동작은 CSS가 아니라 별도의 입력 마스크 JS 플러그인이 data-mask 속성을 읽어 처리합니다.
소스
<div class="card overflow-auto">
<div class="card-status-top bg-dark-overlay"></div>
<div class="card-header">
<h3 class="card-title">입력 마스크</h3>
</div>
<div class="card-body">
<div class="mb-3">
<label class="form-label">날짜</label>
<input type="text" name="input-mask" class="form-control" data-mask="00/00/0000" data-mask-visible="true" placeholder="00/00/0000" autocomplete="off">
</div>
<div class="mb-3">
<label class="form-label">시간</label>
<input type="text" name="input-mask" class="form-control" data-mask="00:00:00" data-mask-visible="true" placeholder="00:00:00" autocomplete="off">
</div>
<div class="mb-3">
<label class="form-label">날짜 & 시간</label>
<input type="text" name="input-mask" class="form-control" data-mask="00/00/0000 00:00:00" data-mask-visible="true" placeholder="00/00/0000 00:00:00" autocomplete="off">
</div>
<div class="mb-3">
<label class="form-label">우편번호</label>
<input type="text" name="input-mask" class="form-control" data-mask="00000-000" data-mask-visible="true" placeholder="00000-000" autocomplete="off">
</div>
<div class="mb-3">
<label class="form-label">금액</label>
<input type="text" name="input-mask" class="form-control" data-mask="000.000.000.000.000,00" data-mask-visible="true" placeholder="000.000.000.000.000,00" data-mask-reverse="true" autocomplete="off">
</div>
<div class="mb-3">
<label class="form-label">전화번호</label>
<input type="text" name="input-mask" class="form-control" data-mask="0000-0000" data-mask-visible="true" placeholder="0000-0000" autocomplete="off">
</div>
<div class="mb-3">
<label class="form-label">지역번호 포함 전화번호</label>
<input type="text" name="input-mask" class="form-control" data-mask="(00) 0000-0000" data-mask-visible="true" placeholder="(00) 0000-0000" autocomplete="off">
</div>
<div class="mb-3">
<label class="form-label">IP 주소</label>
<input type="text" name="input-mask" class="form-control" data-mask="099.099.099.099" data-mask-visible="true" placeholder="000.000.000.000" autocomplete="off">
</div>
</div>
</div>
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
form-label | 입력 컨트롤 위에 붙는 라벨 스타일 |
form-control | 텍스트 입력 필드의 기본 스타일 |
mb-3 | 각 폼 그룹 사이의 아래쪽 여백(margin-bottom) |
기타 주요 속성(클래스 아님): data-mask(마스크 패턴), data-mask-visible(입력 전 마스크 미리보기 표시 여부), data-mask-reverse(오른쪽에서 왼쪽으로 채우는 금액 입력용 옵션)
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/서식-입력-마스크.html 경로에서 렌더링 결과를 확인할 수 있습니다.