project components guide

기본 가이드

설계 단계의 특별한 UX 요청이나 개발 환경에 따른 제약으로 개발 요청 사항이 없다면 테스트 완료된 코드를 복사 붙여 넣기를 기본으로 합니다.

협의 할 점

접근성 가이드

checkbox - :focus-visible{outline: -webkit-focus-ring-color auto 1px;}
switch - :focus-within .switch-item {outline: -webkit-focus-ring-color auto 1px;}
switch - aria-label="스위치 제목" 기재

Checkbox

컴포넌트 클래스 : .component-checkbox
컴포넌트 자식 클래스 : .checkbox-inner
input 컴포넌트 가상클래스 : :checked :disabled :checked + disabled


 <!-- checkbox : 기본 -->
<div class="component-checkbox">
  <label class="checkbox-inner">
    <input type="checkbox" id="temp_checkbox_0001" name="temp_checkbox_0001">
  </label>
</div>
<div class="component-checkbox">
  <label class="checkbox-inner">
    <input type="checkbox" id="temp_checkbox_0002" name="temp_checkbox_0001" checked>
  </label>
</div>
<div class="component-checkbox">
  <label class="checkbox-inner">
    <input type="checkbox" id="temp_checkbox_0003" name="temp_checkbox_0001" disabled>
  </label>
</div>
<div class="component-checkbox">
  <label class="checkbox-inner">
    <input type="checkbox" id="temp_checkbox_0004" name="temp_checkbox_0001" checked disabled>
  </label>
</div>

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

Checkbox + 텍스트

컴포넌트 자식 클래스 : .checkbox-item
input 컴포넌트 가상클래스 : :checked :disabled :checked + disabled


 <!-- checkbox : input + 텍스트 -->
<br>
<div class="component-checkbox">
  <label class="checkbox-inner">
    <input type="checkbox" id="temp_checkbox_0101" name="temp_checkbox_0100">
    <span class="checkbox-item">
      <span class="checkbox-txt">Checkbox default</span>
    </span>
  </label>
</div>
<br>
<br>
<div class="component-checkbox">
  <label class="checkbox-inner">
    <input type="checkbox" id="temp_checkbox_0102" name="temp_checkbox_0100" checked>
    <span class="checkbox-item">
      <span class="checkbox-txt">Checkbox checked</span>
    </span>
  </label>
</div>
<br>
<br>
<div class="component-checkbox">
  <label class="checkbox-inner">
    <input type="checkbox" id="temp_checkbox_0103" name="temp_checkbox_0100" disabled>
    <span class="checkbox-item">
      <span class="checkbox-txt">Checkbox disabled</span>
    </span>
  </label>
</div>
<br>
<br>
<div class="component-checkbox">
  <label class="checkbox-inner">
    <input type="checkbox" id="temp_checkbox_0104" name="temp_checkbox_0100" checked disabled>
    <span class="checkbox-item">
      <span class="checkbox-txt">Checkbox checked + disabled</span>
    </span>
  </label>
</div>

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

Checkbox Switch

컴포넌트 클래스 : .component-checkbox-switch
컴포넌트 자식 클래스 : .switch-inner .switch-label .switch-item .switch-handle .switch-txts
input 컴포넌트 가상클래스 : :checked :disabled :checked + disabled


 <!-- Switch : 기본 -->
<div class="component-checkbox-switch">
  <label class="switch-inner">
    <input type="checkbox" id="temp_switch_0001" name="temp_switch_0001" aria-label="스위치 제목">
    <span class="switch-item">
      <span class="switch-handle"></span>
    </span>
  </label>
</div>
<br>
<br>
<div class="component-checkbox-switch">
  <label class="switch-inner">
    <input type="checkbox" id="temp_switch_0002" name="temp_switch_0001" aria-label="스위치 제목">
    <span class="switch-item">
      <span class="switch-handle"></span>
      <div class="switch-txts" aria-hidden="true">
        <span class="txt">ON</span>
        <span class="txt">OFF</span>
      </div>
    </span>
  </label>
</div>
<br>
<br>
<div class="component-checkbox-switch">
  <label class="switch-inner">
    <span class="switch-label">스위치 제목</span>
    <input type="checkbox" id="temp_switch_0003" name="temp_switch_0001">
    <span class="switch-item">
      <span class="switch-handle"></span>
    </span>
  </label>
</div>
<br>
<br>

<!-- Switch : 속성 -->
<div class="component-checkbox-switch">
  <label class="switch-inner">
    <span class="switch-label">checked</span>
    <input type="checkbox" id="temp_switch_0101" name="temp_switch_0100" checked>
    <span class="switch-item">
      <span class="switch-handle"></span>
    </span>
  </label>
</div>
<br>
<br>
<div class="component-checkbox-switch">
  <label class="switch-inner">
    <span class="switch-label">disabled</span>
    <input type="checkbox" id="temp_switch_0102" name="temp_switch_0100" disabled>
    <span class="switch-item">
      <span class="switch-handle"></span>
    </span>
  </label>
</div>
<br>
<br>
<div class="component-checkbox-switch">
  <label class="switch-inner">
    <span class="switch-label">checked + disabled</span>
    <input type="checkbox" id="temp_switch_0103" name="temp_switch_0100" checked disabled>
    <span class="switch-item">
      <span class="switch-handle"></span>
    </span>
  </label>
</div>

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