부트스트랩 - 버튼 그룹: 초보자 가이드

안녕하세요, 웹 개발을 꿈꾸는 분들! 오늘 우리는 부트스트랩 버튼 그룹의 fascinierende 세계로 뛰어들어 볼 거예요. 너의 친절한 이웃 컴퓨터 선생님이자, 저는 이 여정을 안내해드리는 것을 기대하고 있어요. 코드를 한 줄도 적어본 적이 없어도 걱정하지 마세요 - 우리는 기본부터 시작하고 차근차근 올라갈 거예요. 시작해볼까요!

Bootstrap - Button Groups

버튼 그룹이란?

코드로 뛰어들기 전에, 버튼 그룹이 무엇인지 이해해 보겠습니다. TV 리모컨을 만드는 것을 상상해 보세요. 모든 버튼이 흩어져 있지 않고, 유사한 버튼을 함께 모아둡니다. 이것이 웹 디자인에서 버튼 그룹을 사용하는 방식입니다!

부트스트랩의 버튼 그룹은 관련된 버튼을 함께 모아, 더 정리되고 시각적으로 아름다운 인터페이스를 만들 수 있게 해줍니다. 버튼들이 조화로이 함께 사는 따뜻한 작은 집을 주는 것입니다.

기본 예제

이제 우리의 발을 적셔보기 위해 간단한 예제를 시작해 보겠습니다:

<div class="btn-group" role="group" aria-label="기본 예제">
<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>

이 코드는 "왼쪽", "중간", "오른쪽"라는 레이블이 달린 세 개의 버튼 그룹을 만듭니다. 이를 해부해 보겠습니다:

우리는 버튼들을 <div> 태그로 감싸고 btn-group 클래스를 추가합니다.
role="group" 속성은 스크린 리더가 이 버튼들이 관련이 있음을 이해할 수 있도록 도와줍니다.
aria-label은 버튼 그룹에 대한 설명을 제공합니다.
각 <button>은 btn과 btn-primary 클래스를 가지고 있어 부트스트랩 버튼 스타일을 적용받습니다.

이 코드를 실행하면, 세 개의 파란색 버튼이 쑥스러워서 서로 붙어 있을 것입니다!

혼합 스타일

이제 좀 더 흥미를 북돋아보겠습니다. 현실 세계에서는 모든 버튼이 동일하지 않습니다. 어떤 버튼은 다른 버튼보다 더 중요할 수 있으며, 이를 시각적으로 표현할 수 있습니다:

<div class="btn-group" role="group" aria-label="혼합 스타일">
<button type="button" class="btn btn-danger">삭제</button>
<button type="button" class="btn btn-warning">경고</button>
<button type="button" class="btn btn-success">승인</button>
</div>

이 예제에서는 다양한 부트스트랩 색상 클래스를 사용합니다:

btn-danger는 빨간색 "삭제" 버튼
btn-warning는 노란색 "경고" 버튼
btn-success는 녹색 "승인" 버튼

이렇게 하면 기능에 따라 색상이 다른 시각적으로 강렬한 버튼 그룹을 만들 수 있습니다. 웹 페이지의 트래픽 등이 될 수 있습니다!

테두리 스타일

때로는 버튼이 좀 더 미묘하게 보이고 싶을 때가 있습니다. 그때 테두리 스타일이 유용하게 쓰입니다:

<div class="btn-group" role="group" aria-label="테두리 스타일">
<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-info">정보</button>
</div>

btn-outline-*를 btn-* 대신 사용하면, 색상이 있는 테두리와 텍스트지만 투명한 배경을 가진 버튼을 얻습니다. 디자인에 더 가벼운 터치를 원할 때 완벽합니다.

체크박스와 라디오 버튼 그룹

이제 좀 더 상호작용적인 것으로 넘어가겠습니다. 부트스트랩은 체크박스나 라디오 버튼처럼 동작하는 버튼 그룹을 만들 수 있게 해줍니다:

<div class="btn-group" role="group" aria-label="기본 체크박스 전환 버튼 그룹">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">체크박스 1</label>

<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">체크박스 2</label>

<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">체크박스 3</label>
</div>

이 코드는 체크박스와 같이 동작하는 세 개의 버튼 그룹을 만듭니다. 여러 버튼을 클릭할 수 있으며, 클릭한 상태가 유지됩니다. 체크리스트를 버튼 그룹에 넣은 것과 같습니다!

버튼 도구 모음

때로는 버튼 그룹을 함께 모을 필요가 있습니다. 그때 버튼 도구 모음이 등장합니다:

<div class="btn-toolbar" role="toolbar" aria-label="버튼 그룹을 포함한 도구 모음">
<div class="btn-group me-2" role="group" aria-label="첫 번째 그룹">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
</div>
<div class="btn-group me-2" role="group" aria-label="두 번째 그룹">
<button type="button" class="btn btn-secondary">4</button>
<button type="button" class="btn btn-secondary">5</button>
</div>
<div class="btn-group" role="group" aria-label="세 번째 그룹">
<button type="button" class="btn btn-info">6</button>
</div>
</div>

이 코드는 세 개의 버튼 그룹을 포함한 도구 모음을 만듭니다. 식기抽屉을 정리하는 것처럼, 포크는 하나의 Drawe에, 숟가락은 다른 Drawe에, 그리고 그东西의 이상한 장난감은 자신만의 특별한 자리에 두는 것과 같습니다.

사이즈 조정

사람들처럼 버튼도 다양한 크기가 있습니다. 부트스트랩은 버튼 그룹 전체의 크기를 쉽게 조정할 수 있게 해줍니다:

<div class="btn-group btn-group-lg" role="group" aria-label="대형 버튼 그룹">
<button type="button" class="btn btn-outline-dark">왼쪽</button>
<button type="button" class="btn btn-outline-dark">중간</button>
<button type="button" class="btn btn-outline-dark">오른쪽</button>
</div>

btn-group-lg를 컨테이너에 추가하면 모든 버튼이 커집니다. btn-group-sm을 사용하면 작은 버튼을 만들 수 있습니다. 금이 딱 맞는 크기를 찾을 수 있습니다!

중첩

때로는 버튼 그룹 안에 또 다른 버튼 그룹이 필요할 때가 있습니다. 부트스트랩은 이를 위해도 준비되어 있습니다:

<div class="btn-group" role="group" aria-label="버튼 그룹에 중첩된 드롭다운">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>

<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
드롭다운
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">드롭다운 링크</a></li>
<li><a class="dropdown-item" href="#">드롭다운 링크</a></li>
</ul>
</div>
</div>

이 코드는 두 개의 일반 버튼과 드롭다운 버튼을 포함한 버튼 그룹을 만듭니다. 러시아 인형처럼, 버튼 안에 또 다른 버튼이 들어 있습니다!

수직 변형

마지막으로, 우리는 것들을 수직으로 돌리겠습니다. 수직 버튼 그룹입니다:

<div class="btn-group-vertical" role="group" aria-label="수직 버튼 그룹">
<button type="button" class="btn btn-primary">버튼</button>
<button type="button" class="btn btn-primary">버튼</button>
<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-vertical을 사용하여 버튼들을 수직으로 쌓습니다. 버튼들이 탑처럼 쌓이는 것이 완벽합니다!

결론

이제 여러분은 부트스트랩 버튼 그룹의 세계를 여행한 것입니다. 기본 예제에서 수직 변형까지, 다양한 예제를 통해 배웠습니다. 연습이 완벽을 만든다는 것을 기억하고, 이 예제들을 실험해 보지 마세요. 다양한 스타일, 크기, 레이아웃을 조합하여 여러분의 프로젝트에 딱 맞는 버튼 그룹을 만들어 보세요.

웹 개발은 창의성과 문제 해결을 기반으로 합니다. 버튼 그룹은 여러분의 도구箱에 있는 많은 도구 중 하나입니다. 계속 학습하고, 계속 코딩하고, 가장 중요한 것은 즐겁게 코드를 짜세요! 다음 번에 다시 만납시다, 행복한 코딩을!

Credits: Image by storyset