project components guide

기본 가이드

설계 단계의 특별한 UX 요청이나 개발 환경에 따른 제약으로 개발 요청 사항이 없다면 테스트 완료된 코드를 복사 붙여 넣기를 기본으로 합니다.
링크스타일은 아이콘이 자동으로 붙습니다.
<a href="#"></a> 태그 사용 할 때는 이렇게 작성하면 됩니다.

협의 할 점

브라우저 및 디바이스 테스트 필요
패스워드 숨기고 보이기 스크립트 기능 추가 필요
텍스트 초기화 스크립트 기능 추가 필요
파일 첨부 스크립트 기능 추가 필요

접근성 가이드

가이드를 작성 합니다.

Input

컴포넌트 클래스 : .component-input
컴포넌트 공통 자식 클래스 : .input-label .input-info .input-sub-txt
input 타입 : type="text" type="password" type="email" type="tel" type="number" type="search"

<div class="component-input">
  <label for="temp_input_0001" class="input-label">
    <span class="label-txt">
      <i class="ico-required-mark" role="img" aria-label="필수">*</i>
      Label
    </span>
    <span class="label-util">텍스트,버튼등등 위치</span>
    <div class="input-sub-txt">서브 텍스트</div>
  </label>
  <div class="input-field">
    <input type="text" id="temp_input_0001" placeholder="input text">
  </div>
  <div class="input-info">유틸리티 Info 영역</div>
</div>

/* css 주석 사용시 이 주석사용 부탁드립니다. */

Input + button

버튼 공통 클래스 .input-field-btn
버튼 유형 클래스 : .search .calendar .clear .password-state

<div class="component-input">
  <label for="temp_input_btn_0001" class="input-label">
    <span class="label-txt">Label</span>
    <span class="label-util">텍스트,버튼등등 위치</span>
  </label>
  <div class="input-field">
    <input type="text" id="temp_input_btn_0001" placeholder="버튼">
    <button type="button" class="input-field-btn search">
      <span class="hide-txt">검색</span>
      <i class="ico-search ico-normal" aria-hidden="true"></i>
    </button>
    <button type="button" class="input-field-btn calendar">
      <span class="hide-txt">캘린더</span>
      <i class="ico-calendar ico-normal" aria-hidden="true"></i>
    </button>
    <button type="button" class="input-field-btn clear">
      <span class="hide-txt">내용 지우기</span>
      <i class="ico-clear ico-normal" aria-hidden="true"></i>
    </button>
    <button type="button" class="input-field-btn password-state">
      <span class="hide-txt hide">비밀번호 숨기기</span>
      <span class="hide-txt show">비밀번호 표시</span>
      <i class="ico-password-state ico-normal" aria-hidden="true"></i>
    </button>
  </div>
  <div class="input-info">유틸리티 Info 영역</div>
</div>

/* css 주석 사용시 이 주석사용 부탁드립니다. */

Input + Icon

아이콘 공통 클래스 .input-field-ico
아이콘 유형 클래스 : .login-id .login-pw .spinner

<div class="component-input">
  <label for="temp_input_ico_id_0001" class="input-label">
    <span class="label-txt">Label</span>
    <span class="label-util">텍스트,버튼등등 위치</span>
  </label>
  <div class="input-field">
    <i class="input-field-ico login-id" aria-hidden="true"></i>
    <i class="input-field-ico login-pw" aria-hidden="true"></i>
    <input type="text" id="temp_input_ico_id_0001" placeholder="아이콘">
    <i class="input-field-ico spinner" aria-hidden="true"></i>
  </div>
  <div class="input-info">유틸리티 Info 영역</div>
</div>

/* css 주석 사용시 이 주석사용 부탁드립니다. */

Input + Text

텍스트 공통 클래스 .input-field-txt
텍스트 유형 클래스 : 프로젝트 스타일 가이드에 맞게 생성

<div class="component-input">
  <label for="temp_input_txt_0001" class="input-label">
    <span class="label-txt">Label</span>
    <span class="label-util">텍스트,버튼등등 위치</span>
  </label>
  <div class="input-field">
    <span class="input-field-txt">$</span>
    <input type="text" id="temp_input_txt_0001" placeholder="0.00">
    <span class="input-field-txt">USD</span>
  </div>
  <div class="input-info">유틸리티 Info 영역</div>
</div>

/* css 주석 사용시 이 주석사용 부탁드립니다. */

Input 상태

상태 클래스 .input-disabled .input-readonly

<div class="component-input input-disabled">
  <label for="temp_input_valid_0001" class="input-label">
    <span class="label-txt">Label</span>
    <span class="label-util">텍스트,버튼등등 위치</span>
  </label>
  <div class="input-field">
    <input type="text" id="temp_input_valid_0001" placeholder="비활성" disabled>
  </div>
  <div class="input-info">비활성 입니다.</div>
</div>

<br><br>

<div class="component-input input-readonly">
  <label for="temp_input_invalid_0001" class="input-label">
    <span class="label-txt">Label</span>
    <span class="label-util">텍스트,버튼등등 위치</span>
  </label>
  <div class="input-field">
    <input type="text" id="temp_input_invalid_0001" placeholder="읽기전용" readonly>
  </div>
  <div class="input-info">읽기전용 입니다.</div>
</div>

/* css 주석 사용시 이 주석사용 부탁드립니다. */

Input 유효성 검사

유효성 검사 클래스 : .input-valid .input-invalid .input-required

<div class="component-input input-valid">
  <label for="temp_input_valid_0001" class="input-label">
    <span class="label-txt">Label</span>
    <span class="label-util">텍스트,버튼등등 위치</span>
  </label>
  <div class="input-field">
    <input type="text" id="temp_input_valid_0001" placeholder="성공">
  </div>
  <div class="input-info">성공 입니다.</div>
</div>

<br><br>

<div class="component-input input-invalid">
  <label for="temp_input_invalid_0001" class="input-label">
    <span class="label-txt">Label</span>
    <span class="label-util">텍스트,버튼등등 위치</span>
  </label>
  <div class="input-field">
    <input type="text" id="temp_input_invalid_0001" placeholder="오류">
  </div>
  <div class="input-info">오류 입니다.</div>
</div>

<br><br>

<div class="component-input input-required">
  <label for="temp_input_required_0001" class="input-label">
    <span class="label-txt">
      <i class="ico-required-mark" role="img" aria-label="필수">*</i>
      Label
    </span>
    <span class="label-util">텍스트,버튼등등 위치</span>
  </label>
  <div class="input-field">
    <input type="text" id="temp_input_required_0001" placeholder="필수입력">
  </div>
  <div class="input-info">필수입력 입니다.</div>
</div>

/* css 주석 사용시 이 주석사용 부탁드립니다. */

Input file

컴포넌트 클래스 : .component-input
컴포넌트 공통 자식 클래스 : .input-label .input-info
input 타입 : type="file"
컴포넌트 type="file" 전용 클래스 : .input-file-field .input-file-txt .input-file-btn

<div class="component-input">
  <div class="input-label">
    <span class="label-txt">Label</span>
    <span class="label-util">텍스트,버튼등등 위치</span>
  </div>
  <label class="input-file-field">
    <input type="file" aria-label="파일 첨부">
    <span class="input-file-txt">선택된 파일 없음</span>
    <span class="input-file-btn">찾아보기</span>
  </label>
  <div class="input-info">가이드 텍스트 영역</div>
</div>

/* css 주석 사용시 이 주석사용 부탁드립니다. */

Textarea

컴포넌트 클래스 : .component-input
컴포넌트 공통 자식 클래스 : .input-label .input-info
컴포넌트 textarea 전용 클래스 : .input-textarea-field

<div class="component-input">
  <label for="temp_textarea_0001" class="input-label">
    <span class="label-txt">Label</span>
    <span class="label-util">텍스트,버튼등등 위치</span>
  </label>
  <div class="input-textarea-field">
    <textarea id="temp_textarea_0001" class="textarea" placeholder="텍스트를 입력해주세요."></textarea>
  </div>
  <div class="input-info">유틸리티 Info 영역</div>
</div>

/* css 주석 사용시 이 주석사용 부탁드립니다. */