projectcomponents guide

기본 가이드

설계 단계의 특별한 UX 요청이나 개발 환경에 따른 제약으로 개발 요청 사항이 없다면 테스트 완료된 코드를 복사 붙여 넣기를 기본으로 합니다.
기능에 맞게 개발과 협의하여 button태그와 a태그 중 골라서 사용합니다.

협의 할 점

가이드를 작성 합니다.

접근성 가이드

<i> 태그 aria-hidden="true" 기재

Button

Button 공통 클래스 : .btn
Button Custom 클래스 : .btn-primary
Button 공통 자식 클래스 : .btn-txt

<!-- Btn : default -->
<button type="button" class="btn">
  <span class="btn-txt">Default(button)</span>
</button>
<a href="#" class="btn">
  <span class="btn-txt">Default(a)</span>
</a>

<!-- Btn : Primary -->
<button type="button" class="btn btn-primary">
  <span class="btn-txt">Primary(button)</span>
</button>
<button type="button" class="btn btn-primary">
  <span class="btn-txt">Primary(a)</span>
</button>

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

Button + Icon

Button 공통 클래스 : .btn
Button 공통 자식 클래스 : .btn-txt .ico-

<!-- Icon + Text -->
<button type="button" class="btn">
  <i class="ico-search ico-normal" aria-hidden="true"></i>
  <span class="btn-txt">검색(button)</span>
</button>
<a href="#" class="btn">
  <i class="ico-search ico-normal" aria-hidden="true"></i>
  <span class="btn-txt">검색(a)</span>
</a>
<!-- Text + Icon -->
<button type="button" class="btn">
  <span class="btn-txt">더보기(button)</span>
  <i class="ico-search ico-normal" aria-hidden="true"></i>
</button>
<a href="#" class="btn">
  <span class="btn-txt">더보기(a)</span>
  <i class="ico-search ico-normal" aria-hidden="true"></i>
</a>

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

Button large

Button 공통 클래스 : .btn .btn-large
Button 공통 자식 클래스 : .btn-txt

<!-- Button Full -->
<button type="button" class="btn btn-large">
  <span class="btn-txt">Default Full(button)</span>
</button>
<br>
<br>
<a href="#" class="btn btn-large">
  <span class="btn-txt">Default Full(a)</span>
</a>
<br>
<br>

<!-- Button Full : Primary -->
<button type="button" class="btn btn-primary btn-large">
  <span class="btn-txt">Primary Full(button)</span>
</button>
<br>
<br>
<a href="#" class="btn btn-primary btn-large">
  <span class="btn-txt">Primary Full(a)</span>
</a>

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

Button sqeare

Button 공통 클래스 : .btn .btn-square
Button 공통 자식 클래스 : .btn-txt

<!-- Button Full -->
<button type="button" class="btn btn-square">
  <span class="btn-txt">Default Full(button)</span>
</button>
<br>
<br>
<a href="#" class="btn btn-square">
  <span class="btn-txt">Default Full(a)</span>
</a>
<br>
<br>

<!-- Button Full : Primary -->
<button type="button" class="btn btn-primary btn-square">
  <span class="btn-txt">Primary Full(button)</span>
</button>
<br>
<br>
<a href="#" class="btn btn-primary btn-square">
  <span class="btn-txt">Primary Full(a)</span>
</a>

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

Button Full

Button 공통 클래스 : .btn .btn-full
Button 공통 자식 클래스 : .btn-txt

<!-- Button Full -->
<button type="button" class="btn btn-full">
  <span class="btn-txt">Default Full(button)</span>
</button>
<br>
<br>
<a href="#" class="btn btn-full">
  <span class="btn-txt">Default Full(a)</span>
</a>
<br>
<br>

<!-- Button Full : Primary -->
<button type="button" class="btn btn-primary btn-full">
  <span class="btn-txt">Primary Full(button)</span>
</button>
<br>
<br>
<a href="#" class="btn btn-primary btn-full">
  <span class="btn-txt">Primary Full(a)</span>
</a>

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

Button 정렬, 레이아웃

Button 공통 클래스 : .component-btns .align-right .align-left
Button 공통 자식 클래스 : .btn-txt


<!-- Button Center -->
<div class="component-btns">
  <button type="button" class="btn">
    <span class="btn-txt">Default(button)</span>
  </button>
</div>
<br>
<div class="component-btns">
  <button type="button" class="btn">
    <span class="btn-txt">Default(button)</span>
  </button>
  <button type="button" class="btn btn-primary">
    <span class="btn-txt">Primary(button)</span>
  </button>
</div>
<br>

<!-- Button Right -->
<div class="component-btns align-right">
  <button type="button" class="btn">
    <span class="btn-txt">Default(button)</span>
  </button>
  <button type="button" class="btn btn-primary">
    <span class="btn-txt">Primary(button)</span>
  </button>
</div>
<br>

<!-- Button Left -->
<div class="component-btns align-left">
  <button type="button" class="btn">
    <span class="btn-txt">Default(button)</span>
  </button>
  <button type="button" class="btn btn-primary">
    <span class="btn-txt">Primary(button)</span>
  </button>
</div>

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