Bootstrap 버튼에 대해 자세히 설명해드리겠습니다. Bootstrap은 사용하기 쉬운 스타일 및 동작을 제공하는 인기 있는 CSS 프레임워크입니다. 버튼은 사용자 인터페이스에서 가장 기본적이면서도 중요한 요소 중 하나입니다.
기본 버튼 클래스
Bootstrap에서 버튼을 만들기 위해서는 기본적으로 btn 클래스를 사용합니다. 여기에 추가로 버튼의 스타일을 지정하기 위해 다양한 클래스들을 결합할 수 있습니다.
<button type="button" class="btn">기본 버튼</button>
버튼 스타일
다양한 스타일의 버튼을 만들기 위해 다음과 같은 클래스를 사용할 수 있습니다:
.btn-primary: 기본(primary) 스타일.btn-secondary: 보조(secondary) 스타일.btn-success: 성공(success) 스타일.btn-danger: 위험(danger) 스타일.btn-warning: 경고(warning) 스타일.btn-info: 정보(info) 스타일.btn-light: 밝은(light) 스타일.btn-dark: 어두운(dark) 스타일.btn-link: 링크 스타일
예를 들어, btn-primary 클래스를 사용하면 다음과 같은 버튼이 생성됩니다:
<button type="button" class="btn btn-primary">Primary 버튼</button>
버튼 크기
버튼의 크기를 조절하기 위해 다음과 같은 클래스를 사용할 수 있습니다:
.btn-lg: 큰 버튼.btn-sm: 작은 버튼
<button type="button" class="btn btn-primary btn-lg">큰 버튼</button> <button type="button" class="btn btn-secondary btn-sm">작은 버튼</button>
비활성화 버튼
버튼을 비활성화 상태로 만들기 위해서는 disabled 속성을 사용할 수 있습니다. 이 속성은 HTML의 기본 속성으로, 비활성화된 버튼은 클릭할 수 없습니다.
<button type="button" class="btn btn-primary" disabled>비활성화된 버튼</button>
버튼 그룹
여러 개의 버튼을 그룹으로 묶기 위해서는 .btn-group 클래스를 사용할 수 있습니다. 이를 통해 여러 버튼을 한 줄로 정렬할 수 있습니다.
<div class="btn-group" role="group" aria-label="버튼 그룹 예시"> <button type="button" class="btn btn-primary">왼쪽</button> <button type="button" class="btn btn-secondary">중간</button> <button type="button" class="btn btn-success">오른쪽</button> </div>
블록 레벨 버튼
블록 레벨 버튼은 전체 부모 요소의 너비를 차지하는 버튼입니다. .btn-block 클래스를 사용하여 만들 수 있습니다.
<button type="button" class="btn btn-primary btn-block">블록 레벨 버튼</button>
아웃라인 버튼
아웃라인 버튼은 내부에 채워진 색이 없고 테두리만 있는 버튼입니다. .btn-outline-* 클래스를 사용하여 만들 수 있습니다.
<button type="button" class="btn btn-outline-primary">아웃라인 버튼</button>
이러한 방법들을 사용하면 다양한 스타일과 기능을 가진 버튼을 손쉽게 만들 수 있습니다. Bootstrap의 버튼 클래스를 활용하여 웹 페이지의 인터페이스를 더욱 다채롭고 사용자 친화적으로 만들 수 있습니다.