본문으로 건너뛰기

텍스트·아이콘 부가 입력

분류: 폼 요소

.input-group-flat을 사용해 입력창과 부가 요소(고정 텍스트, 링크, 단축키 표시, 아이콘 버튼)의 경계를 없애고 하나처럼 보이도록 만드는 예제입니다. 일반 .input-group과 달리 테두리가 이어져 있어 URL 접두/접미사, 비밀번호 표시 링크, 검색창의 단축키 안내(kbd) 등을 자연스럽게 붙일 때 적합합니다.

소스​

<div class="mb-3">
    <label class="form-label">앞에 텍스트가 붙는 입력</label>
    <div class="input-group input-group-flat">
        <span class="input-group-text">
            https://tabler.io/users/
        </span>
        <input type="text" class="form-control ps-0" value="yourfancyusername" autocomplete="off">
    </div>
</div>

<div class="mb-3">
    <label class="form-label">뒤에 텍스트가 붙는 입력</label>
    <div class="input-group input-group-flat">
        <input type="text" class="form-control text-end pe-0" value="yourfancydomain" autocomplete="off">
        <span class="input-group-text">
            .tabler.io
        </span>
    </div>
</div>

<div class="mb-3">
    <label class="form-label">뒤에 링크가 붙는 입력</label>
    <div class="input-group input-group-flat">
        <input type="password" class="form-control" value="ultrastrongpassword" autocomplete="off">
        <span class="input-group-text">
            <a href="#" class="input-group-link">비밀번호 보기</a>
        </span>
    </div>
</div>

<div class="mb-3">
    <label class="form-label">뒤에 키보드 입력이 붙는 입력</label>
    <div class="input-group input-group-flat">
        <input type="text" class="form-control" autocomplete="off">
        <span class="input-group-text">
            <kbd>ctrl + K</kbd>
        </span>
    </div>
</div>

<div class="mb-3">
    <label class="form-label">뒤에 아이콘 링크가 붙는 입력</label>
    <div class="input-group input-group-flat">
        <input type="text" class="form-control" autocomplete="off">
        <span class="input-group-text">
            <a href="#" class="link-secondary" data-bs-toggle="tooltip" aria-label="검색 지우기" data-bs-original-title="검색 지우기">
                <i class="f:20 ti ti-x"></i>
            </a>
            <a href="#" class="link-secondary ms-2" data-bs-toggle="tooltip" aria-label="검색 설정" data-bs-original-title="검색 설정">
                <i class="f:20 ti ti-adjustments"></i>
            </a>
            <a href="#" class="link-secondary ms-2 disabled" data-bs-toggle="tooltip" aria-label="알림 추가" data-bs-original-title="알림 추가">
                <i class="f:20 ti ti-bell"></i>
            </a>
        </span>
    </div>
</div>

사용된 주요 클래스​

클래스역할
disabled링크형 아이콘 버튼을 비활성 상태(클릭 불가, 흐린 색상)로 표시
f:20master-css 표기로 아이콘 글자 크기 20px
form-control입력 그룹 안 텍스트/비밀번호 입력의 기본 스타일
form-label입력 그룹 위에 붙는 라벨 텍스트 스타일
input-group입력·텍스트·컨트롤을 하나로 이어 붙이는 컨테이너
input-group-flat입력 그룹 내부 경계선을 제거해 하나로 이어진 것처럼 보이게 함
input-group-linkinput-group-text 안에 들어가는 링크의 강조 스타일
input-group-text입력 앞뒤에 붙는 고정 텍스트/링크/아이콘 영역
link-secondary보조 색상(회색 계열)의 링크 스타일
mb-3요소 사이 아래쪽 여백(margin-bottom)
ms-2왼쪽 여백(margin-start), 아이콘 링크 사이 간격
pe-0, ps-0입력 안쪽 오른쪽/왼쪽 패딩 제거(부가 텍스트와 자연스럽게 이어지도록 함)
text-end입력 값을 오른쪽 정렬(접미사 앞에 붙는 값에 사용)
ti, ti-adjustments, ti-bell, ti-xTabler Icons 기본 클래스와 설정·알림·닫기 아이콘

참고 자료​

실전 예제 페이지​

HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/폼-요소-텍스트-아이콘-부가-입력.html 경로에서 렌더링 결과를 확인할 수 있습니다.

미리보기새 창에서 열기 ↗