JAY DESIGN

MENU

Inputbox

Inputs Inputbox
인풋박스 사이즈

인풋박스의 기본 높이값은 클래스가 없으며, 기본 사이즈보다 작은 인풋박스는 input--sm클래스를, 큰 인풋박스는 input--md를 사용하며 input--full 은 가로값 100% 스타일을 갖는다. 셀렉틑 박스에도 같은 클래스를 사용한다.

<input type="text" class="input--sm" placeholder="내용 입력">
<input type="text" placeholder="내용 입력">
<input type="text" class="input--md" placeholder="내용 입력">
<input type="text" class="input--full" placeholder="내용 입력">
인풋박스 + 버튼

인풋박스와 아이콘 버튼의 조합이며, 기본 width값은 100%이며, 컨테이너의 인라인스타일로 mwx-width값을 적용하여, 해당 사이즈보다 작은 디바이스에서는 100%로 적용된다.

<div class="input-btn" style="max-width:400px;">
    <input type="text">
    <button type="button" class="btn btn--primary btn--icon icon-search"></button>
</div>
인풋 스타일

기간

~

전화번호

- -

셀렉트 + 인풋

이메일

//기간
<div class="input-set input-set--period" style="max-width:400px;">
    <input type="date">
    <span>~</span>
    <input type="date">
</div>    

//전화번호
<div class="input-set input-set--cell" style="max-width:400px;">
    <select>
        <option value="010">010</option>
    </select>
    <span>-</span>
    <input type="text">
    <span>-</span>
    <input type="text">
</div>

//셀렉트 + 인풋
<div class="input-set input-set--select" style="max-width:400px;">
    <select>
        <option value=""></option>
    </select>
    <input type="text">
</div>
                
//이메일
<div class="input-set input-set--email" style="max-width:620px;">
    <input type="text">
    <span>@</span>
    <input type="text">
    <select>
        <option value=""></option>
    </select>
</div>
서치박스

서치박스

서치박스 - 라운드

서치박스 - 모바일

서치박스 - 우측정렬

셀레트 + 서치박스 - 우측정렬

//서치박스
<div class="search-box" style="max-width:300px;">
    <input type="text">
    <button type="button" class="btn btn--icon icon-search"></button>
</div>

//서치박스 - 라운드
<div class="search-box search-box--round" style="max-width:300px;"&ht;
    <input type="text"&ht;
    <button type="button" class="btn btn--icon icon-search"&ht;</button&ht;
</div&ht;

//서치박스 - 모바일
<div class="search-box search-box--mobile" style="max-width:300px;">
    <input type="text">
    <button type="button" class="icon-x"></button>
</div>

//서치박스 - 우측정렬
<div class="search-right">
    <div class="search-box">
        <input type="text">
        <button type="button" class="btn btn--icon icon-search"></button>
    </div>
</div>

//셀레트 + 서치박스 - 우측정렬
<div class="search-right">
    <div class="input-set input-set--select">
        <select>
            <option value=""></option>
        </select>
        <div class="search-box">
            <input type="text">
            <button type="button" class="btn btn--icon icon-search"></button>
        </div>
    </div>
</div>
인풋그룹

인풋그룹 - 싱글

- -

인풋그룹 - 더블

- - 
//인풋그룹 - 싱글  
<div class="input-box__wrap">    
    <div class="input-box">
        <label>이름</label>
        <input type="text">
    </div>
    <div class="input-box">
        <label>전화번호</label>
        <div class="input-set input-set--cell">
            <select>
                <option value="010">010</option>
            </select>
            <span>-</span>
            <input type="text">
            <span>-</span>
            <input type="text">
        </div>
    </div>
    <div class="input-box">
        <label>정보</label>
        <input type="text">
    </div>
</div>

//인풋그룹 - 더블   
<div class="input-box__wrap input-box__wrap--double">
    <div class="input-box">
        <label>이름</label>
        <input type="text">
    </div>
    <div class="input-box">
        <label>전화번호</label>
        <div class="input-set input-set--cell">
            <select>
                <option value="010">010</option>
            </select>
            <span>-</span>
            <input type="text">
            <span>-</span>
            <input type="text">
        </div>
    </div>
    <div class="input-box">
        <label>정보</label>
        <input type="text">
    </div>
</div>
인풋그룹

인풋그룹 - 싱글

인풋그룹 - 더블

인풋그룹 - 싱글 + 더블

//인풋그룹 - 싱글   
<div class="input-box__wrap">
    <div class="input-wrap">
        <label>이름</label>
        <input type="text">
    </div>
    <div class="input-wrap">
        <label>비밀번호</label>
        <input type="text">
    </div>
    <div class="input-wrap">
        <label>연락처</label>
        <input type="text">
    </div>
    <div class="input-wrap">
        <label>이메일</label>
        <input type="text">
    </div>
</div>

//인풋그룹 - 더블   
<div class="input-box__wrap input-box__wrap--double">
    <div class="input-wrap">
        <label>이름</label>
        <input type="text">
    </div>
    <div class="input-wrap">
        <label>비밀번호</label>
        <input type="text">
    </div>
    <div class="input-wrap">
        <label>연락처</label>
        <input type="text">
    </div>
    <div class="input-wrap">
        <label>이메일</label>
        <input type="text">
    </div>
</div>
                               
//인풋그룹 - 싱글 + 더블
<div class="input-box__wrap">
    <div class="input-wrap input-wrap--half">
        <label>이름</label>
        <input type="text">
    </div>
    <div class="input-wrap input-wrap--half input-wrap--half-right">
        <label>비밀번호</label>
        <input type="text">
    </div>
    <div class="input-wrap input-wrap--full">
        <label>연락처</label>
        <input type="text">
    </div>
    <div class="input-wrap input-wrap--full">
        <label>이메일</label>
        <input type="text">
    </div>
</div>
인풋 예시

Inputs Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

- - 
<div class="inputs">
    <div class="inputs__top">
        <p class="inputs__title">Inputs Title</p>
        <p class="inputs__desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>        
    </div>
    <div class="input-box__wrap input-box__wrap--double">
        <div class="input-box">
            <label>이름</label>
            <input type="text">
        </div>
        <div class="input-box">
            <label>전화번호</label>
            <div class="input-set input-set--cell">
                <select>
                    <option value="010">010</option>
                </select>
                <span>-</span>
                <input type="text">
                <span>-</span>
                <input type="text">
            </div>
        </div>
        <div class="input-box">
            <label>정보</label>
            <input type="text">
        </div>
        <div class="input-box">
            <label>정보</label>
            <input type="text">
        </div>
    </div>
    <input type="checkbox" id="checkbox_ex1"><label for="checkbox_ex1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</label>
    <div class="btns  spacing--sm">
        <button type="button" class="btn btn--primary icon-check">확인</button>
        <button type="button" class="btn btn--primary btn--outline icon-x">취소</button>
    </div>
</div>
Copyright JAY DESIGN. Rights Reserved.