Bootstrap Buttons

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의 버튼 클래스를 활용하여 웹 페이지의 인터페이스를 더욱 다채롭고 사용자 친화적으로 만들 수 있습니다.

Leave a Reply

Your email address will not be published. Required fields are marked *