[bootstrap] 부트스트랩 – 버튼(Buttons)

부트스트랩에서는 클래스만 추가함으로 버튼을 쉽게 구현할 수 있습니다.
버튼에 아이콘을 사용하면 더 예쁘게 바꿀수도 있습니다.

하지만, 여기에서는 기본 버튼과 링크만 간략하게 설명하겠습니다.

.btn-default : 기본 버튼
.btn-primary : 시각적으로 두드러진 색상이며 주요 작업 실행시 사용
.btn-success : 성공적인 또는 긍정적인 작업에 사용
.btn-info : 정보 제공 목적의 작업에 사용
.btn-warning : 이 버튼으로 인한 작업이 주의를 필요로 할 때 사용
.btn-danger : 위험하고 잠재적으로 부정적인 작업에 사용
.btn-link : 버튼이 아닌 링크 형태지만 버튼의 기능을 유지함

 

버튼은 다음과 같이 btn 클래스와 함께 사용해야 합니다.

<button type=”button” class=”btn btn-default“>Default</button>

 

웹 접근성 측면에서 버튼 색상에 따른 의미는 없으므로 버튼 글자를 의미있는 내용으로 한다거나 span 태그에 .sr-only선택자를 추가해 의미있는 텍스트를 입력해 주는 방법도 좋습니다.