skip navigation

버튼

  • - 라운드 스타일 표현은 CSS를 기본으로 한다.

  • - 새 창 열림 기준은 target="_blank" 와 title="새 창"으로 둘 다 명시한다.(프로젝트에 따라 달라질 수 있습니다.)

텍스트 버튼

[VIEW]
버튼 버튼
[CODE]
<button type="button" class="btn">버튼</button> <a href="#" class="btn">버튼</a> <span class="btn">버튼</span> <button type="button" class="btn disabled" disabled="disabled">비활성 버튼</button>
[변경]
<button type="button" class="btn">버튼</button> <a href="#" class="btn" role="button">버튼</a> <span class="btn" role="button">버튼</span> <button type="button" class="btn disabled" disabled="disabled">비활성 버튼</button> <a href="#" class="btn" role="button" aria-disabled="true">비활성화 버튼</a> <span class="btn" role="button" aria-disabled="true">비활성화 버튼</span>

아이콘 버튼

  • - 숨김텍스트는 버튼 용도에 따라 맞춰서 쓴다.

[VIEW]
[CODE]
<button type="button" class="btn_ico facebook"><span class="hide">페이스북</span></button> <a href="#" target="_blank" class="btn_ico facebook" title="페이스북 공유하기 - 새 창"><span class="hide">페이스북</span></a>

아이콘+텍스트 버튼

  • - 숨김텍스트는 버튼 용도에 따라 맞춰서 쓴다.

[VIEW]
버튼 버튼
[CODE]
<button type="button" class="btn" title="새 창"><span class="ico"></span> 버튼</button> <a href="#" target="_blank" class="btn" title="새 창"><span class="ico"></span> 버튼</a> <button type="button" class="btn ico" title="새 창"><span>버튼</span></button> <a href="#" target="_blank" class="btn ico" title="새 창"><span>버튼</span></a>

버튼 영역 정렬

[VIEW]
[CODE]
<div class="btn_wrap"> <div class="left"><button type="button" class="btn">버튼</button></div> <button type="button" class="btn">버튼</button> <div class="right"><button type="button" class="btn">버튼</button></div> </div>