project components guide

기본 가이드

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

협의 할 점

가이드를 작성 합니다.

접근성 가이드

가이드를 작성 합니다.

Form - 균등 분할 레이아웃

컴포넌트 클래스 : .component-form
컴포넌트 공통 자식 클래스 : .form-label .form-sub-txt .form-row .form-col .form-info
.form-row 추가 클래스 종류 : .two-col .three-col .four-col .five-col
.form-col 은 .form-col-1 부터 순서대로 작성 필요

<div class="component-form">
  <div class="form-label">
    <span class="label-txt">
      <i class="ico-required-mark" role="img" aria-label="필수">*</i>
      폼그룹 레이블
    </span>
    <span class="label-util">폼그룹 텍스트,버튼등등 위치</span>
    <div class="form-sub-txt">폼그룹 서브 텍스트</div>
  </div>

  <!-- col 2 -->
  <div class="form-row two-col">
    <div class="form-col-1">
      <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>
            인풋 레이블
          </span>
          <span class="label-util">인풋 텍스트,버튼등등 위치</span>
        </label>
        <div class="input-field">
          <input type="text" id="temp_input_0001" placeholder="input text">
        </div>
        <div class="input-info">인풋 유틸리티 Info 영역</div>
      </div>
    </div>
    <div class="form-col-2">
      <div class="component-input">
        <label for="temp_input_0002" class="input-label">
          <span class="label-txt">
            <i class="ico-required-mark" role="img" aria-label="필수">*</i>
            인풋 레이블
          </span>
          <span class="label-util">인풋 텍스트,버튼등등 위치</span>
        </label>
        <div class="input-field">
          <input type="text" id="temp_input_0002" placeholder="input text">
        </div>
        <div class="input-info">인풋 유틸리티 Info 영역</div>
      </div>
    </div>
  </div>
  <!-- // col 2 -->

  <!-- col 3 -->
  <div class="form-row three-col">
    <div class="form-col-1">
      <div class="form-col-1">
        <div class="component-input">
          <label for="temp_input_0011" class="input-label">
            <span class="label-txt">
              <i class="ico-required-mark" role="img" aria-label="필수">*</i>
              인풋 레이블
            </span>
            <span class="label-util">인풋 텍스트,버튼등등 위치</span>
          </label>
          <div class="input-field">
            <input type="text" id="temp_input_0011" placeholder="input text">
          </div>
          <div class="input-info">인풋 유틸리티 Info 영역</div>
        </div>
      </div>
    </div>
    <div class="form-col-2">
      <div class="form-col-1">
        <div class="component-input">
          <label for="temp_input_0012" class="input-label">
            <span class="label-txt">
              <i class="ico-required-mark" role="img" aria-label="필수">*</i>
              인풋 레이블
            </span>
            <span class="label-util">인풋 텍스트,버튼등등 위치</span>
          </label>
          <div class="input-field">
            <input type="text" id="temp_input_0012" placeholder="input text">
          </div>
          <div class="input-info">인풋 유틸리티 Info 영역</div>
        </div>
      </div>
    </div>
    <div class="form-col-3">
      <div class="form-col-1">
        <div class="component-input">
          <label for="temp_input_0013" class="input-label">
            <span class="label-txt">
              <i class="ico-required-mark" role="img" aria-label="필수">*</i>
              인풋 레이블
            </span>
            <span class="label-util">인풋 텍스트,버튼등등 위치</span>
          </label>
          <div class="input-field">
            <input type="text" id="temp_input_0013" placeholder="input text">
          </div>
          <div class="input-info">인풋 유틸리티 Info 영역</div>
        </div>
      </div>
    </div>
  </div>
  <!-- // col 3 -->

  <!-- col 4 -->
  <div class="form-row four-col">
    <div class="form-col-1">
      <div class="component-input">
        <label for="temp_form_0021" 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_form_0021" placeholder="input text">
        </div>
        <div class="input-info">유틸리티 Info 영역</div>
      </div>
    </div>
    <div class="form-col-2">
      <div class="component-input">
        <div class="input-field">
          <input type="text" placeholder="input text">
        </div>
      </div>
    </div>
    <div class="form-col-3">
      <div class="component-input">
        <div class="input-field">
          <input type="text" placeholder="input text">
        </div>
      </div>
    </div>
    <div class="form-col-4">
      <div class="component-input">
        <div class="input-field">
          <input type="text" placeholder="input text">
        </div>
      </div>
    </div>
  </div>
  <!-- // col 4 -->

  <!-- col 5 -->
  <div class="form-row five-col">
    <div class="form-col-1">
      <div class="component-input">
        <label for="temp_form_0031" 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_form_0031" placeholder="input text">
        </div>
        <div class="input-info">유틸리티 Info 영역</div>
      </div>
    </div>
    <div class="form-col-2">
      <div class="component-input">
        <div class="input-field">
          <input type="text" placeholder="input text">
        </div>
      </div>
    </div>
    <div class="form-col-3">
      <div class="component-input">
        <div class="input-field">
          <input type="text" placeholder="input text">
        </div>
      </div>
    </div>
    <div class="form-col-4">
      <div class="component-input">
        <div class="input-field">
          <input type="text" placeholder="input text">
        </div>
      </div>
    </div>
    <div class="form-col-5">
      <div class="component-input">
        <div class="input-field">
          <input type="text" placeholder="input text">
        </div>
      </div>
    </div>
  </div>
  <!-- // col 5 -->

  <div class="form-info">폼그룹 유틸리티 Info 영역</div>
</div>

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

Form - 비율 분할 레이아웃

.form-row 추가 클래스 종류 : .ratio-2-1 .ratio-3-3-1 .ratio-4-3-2-1

<div class="component-form">
  <div class="form-label">
    <span class="label-txt">
      <i class="ico-required-mark" role="img" aria-label="필수">*</i>
      폼그룹 레이블
    </span>
    <span class="label-util">폼그룹 텍스트,버튼등등 위치</span>
    <div class="form-sub-txt">폼그룹 서브 텍스트</div>
  </div>

  <!-- col 2 : 비율 2:1 -->
  <div class="form-row ratio-2-1">
    <div class="form-col-1">
      <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>
        </label>
        <div class="input-field">
          <input type="text" id="temp_input_0001" placeholder="input text">
        </div>
      </div>
    </div>
    <div class="form-col-2">
      <div class="component-input">
        <div class="input-field">
          <input type="text" placeholder="input text">
        </div>
      </div>
    </div>
  </div>
  <!-- // col 2 : 비율 2:1 -->

  <!-- col 3 : 비율 3:3:1 -->
  <div class="form-row ratio-3-3-1">
    <div class="form-col-1">
      <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>
        </label>
        <div class="input-field">
          <input type="text" id="temp_input_0001" placeholder="input text">
        </div>
      </div>
    </div>
    <div class="form-col-2">
      <div class="component-input">
        <div class="input-field">
          <input type="text" placeholder="input text">
        </div>
      </div>
    </div>
    <div class="form-col-3">
      <div class="component-input">
        <div class="input-field">
          <input type="text" placeholder="input text">
        </div>
      </div>
    </div>
  </div>
  <!-- // col 3 : 비율 3:3:1 -->

  <!-- col 4 : 비율 4:3:2:1 -->
  <div class="form-row ratio-4-3-2-1">
    <div class="form-col-1">
      <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>
        </label>
        <div class="input-field">
          <input type="text" id="temp_input_0001" placeholder="input text">
        </div>
      </div>
    </div>
    <div class="form-col-2">
      <div class="component-input">
        <div class="input-field">
          <input type="text" placeholder="input text">
        </div>
      </div>
    </div>
    <div class="form-col-3">
      <div class="component-input">
        <div class="input-field">
          <input type="text" placeholder="input text">
        </div>
      </div>
    </div>
    <div class="form-col-4">
      <div class="component-input">
        <div class="input-field">
          <input type="text" placeholder="input text">
        </div>
      </div>
    </div>
  </div>
  <!-- // col 4 : 비율 4:3:2:1 -->

  <div class="form-info">폼그룹 유틸리티 Info 영역</div>
</div>

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

Form 상태

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

<div class="component-form form-disabled">
  <div class="form-label">
    <span class="label-txt">
      <i class="ico-required-mark" role="img" aria-label="필수">*</i>
      개인 정보1
    </span>
    <span class="label-util">
      <button type="button">
        <i class="ico-refresh ico-normal" aria-hidden="true"></i>
      </button>
    </span>
    <div class="form-sub-txt">우편물을 받을 수 있는 영구 주소를 사용하세요.</div>
  </div>

  <div class="form-row two-col">
    <div class="form-col-1">
      <div class="component-input">
        <label for="temp_form_disabled_0001" class="input-label">
          <span class="label-txt">
            <i class="ico-required-mark" role="img" aria-label="필수">*</i>
            이름
          </span>
        </label>
        <div class="input-field">
          <input type="text" id="temp_form_disabled_0001" placeholder="이름">
        </div>
      </div>
    </div>
    <div class="form-col-2">
      <div class="component-input">
        <label for="temp_form_disabled_0002" class="input-label">
          <span class="label-txt">
            <i class="ico-required-mark" role="img" aria-label="필수">*</i>
            성
          </span>
        </label>
        <div class="input-field">
          <input type="text" id="temp_form_disabled_0002" placeholder="성">
        </div>
      </div>
    </div>
  </div>

  <div class="form-info">폼그룹 disabled 상태</div>
</div>

<div class="component-form form-readonly">
  <div class="form-label">
    <span class="label-txt">
      <i class="ico-required-mark" role="img" aria-label="필수">*</i>
      개인 정보2
    </span>
    <span class="label-util">
      <button type="button">
        <i class="ico-refresh ico-normal" aria-hidden="true"></i>
      </button>
    </span>
    <div class="form-sub-txt">우편물을 받을 수 있는 영구 주소를 사용하세요.</div>
  </div>

  <div class="form-row two-col">
    <div class="form-col-1">
      <div class="component-input">
        <label for="temp_form_readonly_0001" class="input-label">
          <span class="label-txt">
            <i class="ico-required-mark" role="img" aria-label="필수">*</i>
            이름
          </span>
        </label>
        <div class="input-field">
          <input type="text" id="temp_form_readonly_0001" placeholder="이름">
        </div>
      </div>
    </div>
    <div class="form-col-2">
      <div class="component-input">
        <label for="temp_form_readonly_0002" class="input-label">
          <span class="label-txt">
            <i class="ico-required-mark" role="img" aria-label="필수">*</i>
            성
          </span>
        </label>
        <div class="input-field">
          <input type="text" id="temp_form_readonly_0002" placeholder="성">
        </div>
      </div>
    </div>
  </div>

  <div class="form-info">폼그룹 readonly 상태</div>
</div>

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

Form 유효성 검사

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

<div class="component-form form-valid">
  <div class="form-label">
    <span class="label-txt">
      <i class="ico-required-mark" role="img" aria-label="필수">*</i>
      개인 정보1
    </span>
    <span class="label-util">
      <button type="button">
        <i class="ico-refresh ico-normal" aria-hidden="true"></i>
      </button>
    </span>
    <div class="form-sub-txt">우편물을 받을 수 있는 영구 주소를 사용하세요.</div>
  </div>

  <div class="form-row two-col">
    <div class="form-col-1">
      <div class="component-input">
        <label for="temp_form_valid_0001" class="input-label">
          <span class="label-txt">
            <i class="ico-required-mark" role="img" aria-label="필수">*</i>
            이름
          </span>
        </label>
        <div class="input-field">
          <input type="text" id="temp_form_valid_0001" placeholder="이름">
        </div>
      </div>
    </div>
    <div class="form-col-2">
      <div class="component-input">
        <label for="temp_form_valid_0002" class="input-label">
          <span class="label-txt">
            <i class="ico-required-mark" role="img" aria-label="필수">*</i>
            성
          </span>
        </label>
        <div class="input-field">
          <input type="text" id="temp_form_valid_0002" placeholder="성">
        </div>
      </div>
    </div>
  </div>

  <div class="form-info">성공 입니다.</div>
</div>

<div class="component-form form-invalid">
  <div class="form-label">
    <span class="label-txt">
      <i class="ico-required-mark" role="img" aria-label="필수">*</i>
      개인 정보2
    </span>
    <span class="label-util">
      <button type="button">
        <i class="ico-refresh ico-normal" aria-hidden="true"></i>
      </button>
    </span>
    <div class="form-sub-txt">우편물을 받을 수 있는 영구 주소를 사용하세요.</div>
  </div>

  <div class="form-row two-col">
    <div class="form-col-1">
      <div class="component-input">
        <label for="temp_form_invalid_0001" class="input-label">
          <span class="label-txt">
            <i class="ico-required-mark" role="img" aria-label="필수">*</i>
            이름
          </span>
        </label>
        <div class="input-field">
          <input type="text" id="temp_form_invalid_0001" placeholder="이름">
        </div>
      </div>
    </div>
    <div class="form-col-2">
      <div class="component-input">
        <label for="temp_form_invalid_0002" class="input-label">
          <span class="label-txt">
            <i class="ico-required-mark" role="img" aria-label="필수">*</i>
            성
          </span>
        </label>
        <div class="input-field">
          <input type="text" id="temp_form_invalid_0002" placeholder="성">
        </div>
      </div>
    </div>
  </div>

  <div class="form-info">에러 입니다.</div>
</div>

<div class="component-form form-required">
  <div class="form-label">
    <span class="label-txt">
      <i class="ico-required-mark" role="img" aria-label="필수">*</i>
      개인 정보3
    </span>
    <span class="label-util">
      <button type="button">
        <i class="ico-refresh ico-normal" aria-hidden="true"></i>
      </button>
    </span>
    <div class="form-sub-txt">우편물을 받을 수 있는 영구 주소를 사용하세요.</div>
  </div>

  <div class="form-row two-col">
    <div class="form-col-1">
      <div class="component-input">
        <label for="temp_form_required_0001" class="input-label">
          <span class="label-txt">
            <i class="ico-required-mark" role="img" aria-label="필수">*</i>
            이름
          </span>
        </label>
        <div class="input-field">
          <input type="text" id="temp_form_required_0001" placeholder="이름">
        </div>
      </div>
    </div>
    <div class="form-col-2">
      <div class="component-input">
        <label for="temp_form_required_0002" class="input-label">
          <span class="label-txt">
            <i class="ico-required-mark" role="img" aria-label="필수">*</i>
            성
          </span>
        </label>
        <div class="input-field">
          <input type="text" id="temp_form_required_0002" placeholder="성">
        </div>
      </div>
    </div>
  </div>

  <div class="form-info">필수 입니다.</div>
</div>

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

Form Sample01

폼 타이틀 한개에 여러개의 form-row 형태

<div class="component-form">
  <div class="form-label">
    <span class="label-txt">
      <i class="ico-required-mark" role="img" aria-label="필수">*</i>
      개인 정보
    </span>
    <span class="label-util">
      <button type="button">
        <i class="ico-refresh ico-normal" aria-hidden="true"></i>
      </button>
    </span>
    <div class="form-sub-txt">우편물을 받을 수 있는 영구 주소를 사용하세요.</div>
  </div>

  <div class="form-row two-col">
    <div class="form-col-1">
      <div class="component-input">
        <label for="temp_form_sample_0001" class="input-label">
          <span class="label-txt">
            <i class="ico-required-mark" role="img" aria-label="필수">*</i>
            이름
          </span>
        </label>
        <div class="input-field">
          <input type="text" id="temp_form_sample_0001" placeholder="이름">
        </div>
      </div>
    </div>
    <div class="form-col-2">
      <div class="component-input">
        <label for="temp_form_sample_0002" class="input-label">
          <span class="label-txt">
            <i class="ico-required-mark" role="img" aria-label="필수">*</i>
            성
          </span>
        </label>
        <div class="input-field">
          <input type="text" id="temp_form_sample_0002" placeholder="성">
        </div>
      </div>
    </div>
  </div>

  <div class="form-row three-col">
    <div class="form-col-1">
      <div class="component-input">
        <label for="temp_form_sample_0003" class="input-label">
          <span class="label-txt">
            <i class="ico-required-mark" role="img" aria-label="필수">*</i>
            도시
          </span>
        </label>
        <div class="input-field">
          <input type="text" id="temp_form_sample_0003" placeholder="도시">
        </div>
      </div>
    </div>
    <div class="form-col-2">
      <div class="component-input">
        <label for="temp_form_sample_0004" class="input-label">
          <span class="label-txt">
            <i class="ico-required-mark" role="img" aria-label="필수">*</i>
            주/도
          </span>
        </label>
        <div class="input-field">
          <input type="text" id="temp_form_sample_0004" placeholder="주/도">
        </div>
      </div>
    </div>
    <div class="form-col-3">
      <div class="component-input">
        <label for="temp_form_sample_0005" class="input-label">
          <span class="label-txt">
            <i class="ico-required-mark" role="img" aria-label="필수">*</i>
            우편번호
          </span>
        </label>
        <div class="input-field">
          <input type="text" id="temp_form_sample_0005" placeholder="우편번호">
        </div>
      </div>
    </div>
  </div>
</div>

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

Form Sample02

폼 타이틀이 여러개 일때

<div class="component-form">
  <div class="form-label">
    <span class="label-txt">
      <i class="ico-required-mark" role="img" aria-label="필수">*</i>
      성별
    </span>
  </div>

  <div class="form-row two-col">
    <div class="form-col-1">
      <div class="component-radio">
        <label class="radio-inner">
          <input type="radio" name="temp_form_radio_0001">
          <span class="radio-item">
            <span class="radio-txt">남</span>
          </span>
        </label>
      </div>
    </div>
    <div class="form-col-2">
      <div class="component-radio">
        <label class="radio-inner">
          <input type="radio" name="temp_form_radio_0001">
          <span class="radio-item">
            <span class="radio-txt">여</span>
          </span>
        </label>
      </div>
    </div>
  </div>
</div>

<div class="component-form">
  <div class="form-label">
    <span class="label-txt">
      취미
    </span>
  </div>

  <div class="form-row five-col">
    <div class="form-col-1">
      <div class="component-checkbox">
        <label class="checkbox-inner">
          <input type="checkbox" name="temp_form_checkbox_0001">
          <span class="checkbox-item">
            <span class="checkbox-txt">취미1</span>
          </span>
        </label>
      </div>
    </div>
    <div class="form-col-2">
      <div class="component-checkbox">
        <label class="checkbox-inner">
          <input type="checkbox" name="temp_form_checkbox_0001">
          <span class="checkbox-item">
            <span class="checkbox-txt">취미2</span>
          </span>
        </label>
      </div>
    </div>
    <div class="form-col-3">
      <div class="component-checkbox">
        <label class="checkbox-inner">
          <input type="checkbox" name="temp_form_checkbox_0001">
          <span class="checkbox-item">
            <span class="checkbox-txt">취미3</span>
          </span>
        </label>
      </div>
    </div>
    <div class="form-col-4">
      <div class="component-checkbox">
        <label class="checkbox-inner">
          <input type="checkbox" name="temp_form_checkbox_0001">
          <span class="checkbox-item">
            <span class="checkbox-txt">취미4</span>
          </span>
        </label>
      </div>
    </div>
    <div class="form-col-5">
      <div class="component-checkbox">
        <label class="checkbox-inner">
          <input type="checkbox" name="temp_form_checkbox_0001">
          <span class="checkbox-item">
            <span class="checkbox-txt">취미5</span>
          </span>
        </label>
      </div>
    </div>
  </div>
</div>

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

Form Group

기본 가이드

협의 할 점

접근성 가이드

Form - 균등 분할 레이아웃

Form - 비율 분할 레이아웃

Form 상태

Form 유효성 검사

Form Sample01

Form Sample02