부트스트랩 - 버튼 데모

안녕하세요, 미래의 코딩 슈퍼스타! 오늘 우리는 부트스트랩 버튼의 fascinierende 세계로 접어들어 볼 거예요. 네가 좋아하는 음료를 손에 들고, 편안하게 자리 잡고, 이 흥미로운 모험을 함께 떠나보세요!

Bootstrap - Buttons Demo

부트스트랩 버튼이란?

자, 구체적인 내용으로 넘어가기 전에 부트스트랩 버튼이到底是什么인지 이야기해 보겠습니다. 집을 짓는다고 상상해 보세요. 벽과 지붕은 HTML 구조, 페인트는 CSS, 그렇다면 부트스트랩은 마법의 도구 상자처럼 모든 것을 더 쉽고 예쁘게 만들어주는 거예요. 부트스트랩 버튼은 미리 스타일이 지정되어 있어 웹 페이지에 쉽게 추가할 수 있는 버튼들입니다.

부트스트랩 시작하기

먼저, 부트스트랩 놀이 공간을 설정해야 해요. 걱정 마세요! 모놀리즌 게임을 설정하는 것보다 쉬워요!

단계 1: HTML 구조 설정하기

기본적인 HTML 구조를 시작해 보겠습니다:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Buttons Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<!-- 버튼들이 여기 들어갈 거예요 -->
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

이건 그림을 그리기 전에 캔버스를 설정하는 것과 같아요. 부트스트랩 CSS와 JS 파일을 포함시켜 부트스트랩의 모든 기능에 접근할 수 있게 해줍니다.

기본 부트스트랩 버튼

이제 우리 페이지에 버튼을 추가해 보겠습니다!

<button type="button" class="btn btn-primary">기본</button>
<button type="button" class="btn btn-secondary">보조</button>
<button type="button" class="btn btn-success">성공</button>
<button type="button" class="btn btn-danger">위험</button>
<button type="button" class="btn btn-warning">경고</button>
<button type="button" class="btn btn-info">정보</button>
<button type="button" class="btn btn-light">밝음</button>
<button type="button" class="btn btn-dark">어둠</button>

각 클래스가 하는 일은 다음과 같아요:

btn: 모든 부트스트랩 버튼의 기본 클래스.
btn-primary, btn-secondary, 등: 이 클래스들은 버튼의 색상과 스타일을 정의합니다.

버튼 크기

fast-food 음식점에서 다양한 크기의 프렌치 fries를 먹을 수 있는 것처럼, 부트스트랩 버튼도 다양한 크기로 제공됩니다!

<button type="button" class="btn btn-primary btn-lg">대형 버튼</button>
<button type="button" class="btn btn-primary">기본 버튼</button>
<button type="button" class="btn btn-primary btn-sm">소형 버튼</button>

btn-lg: 버튼을 더 크게 만듭니다.
btn-sm: 버튼을 더 작게 만듭니다.

외곽선 버튼

때로는 조금 더 가벼운 버튼이 필요할 때가 있어요. 그때 외곽선 버튼이 유용해요!

<button type="button" class="btn btn-outline-primary">기본</button>
<button type="button" class="btn btn-outline-secondary">보조</button>
<button type="button" class="btn btn-outline-success">성공</button>

btn-outline-* 클래스는 색상이 있는 테두리와 투명한 배경을 가진 버튼을 제공합니다.

블록 버튼

부모 요소의 전체 너비를 차지하는 버튼이 필요하다면 블록 버튼이 도와줍니다!

<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">블록 버튼</button>
<button class="btn btn-primary" type="button">블록 버튼</button>
</div>

부모 div에 d-grid 클래스와 gap-2 클래스를 추가하면 버튼 사이에 간격을줍니다.

버튼 상태

버튼은 다양한 상태를 가질 수 있어요, 우리도 다양한 기분을 가지는 것처럼!

<button type="button" class="btn btn-primary">일반 버튼</button>
<button type="button" class="btn btn-primary active">활성화된 버튼</button>
<button type="button" class="btn btn-primary" disabled>비활성화된 버튼</button>

active 클래스는 버튼이 눌린 것처럼 보이게 합니다.
disabled 속성은 버튼을 클릭할 수 없게 합니다.

토글 버튼

토글 버튼은 불 끄는 전등처럼 - 켜고 끄는 기능을 가지고 있습니다!

<button type="button" class="btn btn-primary" data-bs-toggle="button">토글 버튼</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">활성화된 토글 버튼</button>

data-bs-toggle="button" 속성은 토글 기능을 활성화합니다.

버튼 그룹

때로는 버튼들이 함께 모여 싶어할 때가 있어요. 그때 버튼 그룹이 유용해요!

<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">왼쪽</button>
<button type="button" class="btn btn-primary">중간</button>
<button type="button" class="btn btn-primary">오른쪽</button>
</div>

btn-group 클래스는 버튼들을 함께 그룹화합니다.

드롭다운 버튼

드롭다운 버튼은 놀라운 선물 상자처럼 - 클릭하면 더 많은 옵션이 나타납니다!

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
드롭다운 버튼
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">동작</a></li>
<li><a class="dropdown-item" href="#">다른 동작</a></li>
<li><a class="dropdown-item" href="#">여기서 다른 것</a></li>
</ul>
</div>

dropdown-toggle 클래스와 data-bs-toggle="dropdown" 속성은 드롭다운 기능을 활성화합니다.

결론

축하합니다! 부트스트랩 버튼의 바람이 끝나셨어요. 기억하시자, 연습이 완벽을 만듭니다. 그러니 다양한 조합을 실험해 보지 마세요. 누구 knows? 당신은 웹 디자인의 다음 큰 것을 만들 수도 있어요!

이제 우리가 다룰 button 클래스의 빠른 참조 표입니다:

클래스	설명
btn	기본 버튼 클래스
btn-primary	기본 색상 버튼
btn-secondary	보조 색상 버튼
btn-success	성공 색상 버튼
btn-danger	위험 색상 버튼
btn-warning	경고 색상 버튼
btn-info	정보 색상 버튼
btn-light	밝은 색상 버튼
btn-dark	어두운 색상 버튼
btn-lg	대형 버튼
btn-sm	소형 버튼
btn-outline-*	외곽선 버튼
active	활성 상태 버튼
disabled	비활성화된 버튼
data-bs-toggle="button"	토글 버튼
btn-group	버튼 그룹
dropdown-toggle	드롭다운 버튼

기쁜 코딩 되세요, 부트스트랩이 함께하시길 바랍니다!

Credits: Image by storyset