6. 간단하고 다양한 버튼 디자인, Bootstrap 버튼과 아이콘 완벽 가이드

안녕하세요! 오늘은 Bootstrap을 이용해 다양한 버튼과 아이콘을 디자인하는 방법을 소개해드릴게요. Bootstrap은 기본적으로 깔끔하고 다양한 스타일의 버튼을 제공해 손쉽게 웹 디자인에 사용할 수 있으며, 다양한 아이콘 라이브러리와도 함께 사용할 수 있어요. 이 글에서는 버튼 스타일, 크기, 색상 설정 방법과 아이콘 라이브러리를 활용해 버튼에 아이콘을 추가하는 방법까지 알아보겠습니다.

1. Bootstrap 버튼 스타일

Bootstrap은 여러 가지 버튼 스타일을 제공해 버튼이 다양한 목적과 역할을 표현할 수 있도록 도와줍니다. 주요 스타일은 다음과 같아요:

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>

 

위 코드에서는 btn 클래스와 함께 btn-primary, btn-secondary 등의 클래스를 사용해 버튼 색상을 지정했어요. 각각의 색상 클래스는 버튼의 용도와 강조 정도에 따라 선택할 수 있습니다.

2. 버튼 크기 설정

Bootstrap은 버튼의 크기를 설정할 수 있는 유틸리티 클래스도 제공합니다. btn-lg와 btn-sm 클래스를 사용해 버튼의 크기를 조절할 수 있어요. 또한, btn-block 클래스를 사용하면 버튼이 가로로 꽉 차도록 설정할 수 있습니다.

 

<button class="btn btn-primary btn-lg">Large Button</button>
<button class="btn btn-primary">Default Button</button>
<button class="btn btn-primary btn-sm">Small Button</button>
<button class="btn btn-primary btn-block">Full Width Button</button>

 

이렇게 btn-lg와 btn-sm을 사용하면 큰 버튼과 작은 버튼을 손쉽게 만들 수 있어요. btn-block은 버튼이 가로 전체 너비를 차지하게 하여 모바일 환경에서도 유용하게 사용할 수 있습니다.

3. 버튼 색상과 배경 변경

버튼의 색상은 다양한 상황을 나타내는 데 유용하게 활용될 수 있습니다. btn-outline-색상명 형식의 클래스를 사용해 외곽선 버튼을 만들 수도 있어요. 외곽선 버튼은 버튼 안쪽 배경색이 비어 있고, 외곽선만 색상이 적용됩니다.

 

<button class="btn btn-outline-primary">Primary Outline</button>
<button class="btn btn-outline-success">Success Outline</button>
<button class="btn btn-outline-danger">Danger Outline</button>
<button class="btn btn-outline-warning">Warning Outline</button>
<button class="btn btn-outline-info">Info Outline</button>

 

위 코드에서는 btn-outline-primary, btn-outline-success와 같은 클래스를 사용해 외곽선만 색상이 적용된 버튼을 만들었어요. 이 버튼 스타일은 배경이 필요하지 않은 경우 깔끔하게 사용할 수 있습니다.

4. 아이콘을 사용한 버튼 디자인

버튼에 아이콘을 추가하면 더 직관적인 디자인을 만들 수 있습니다. Bootstrap과 함께 자주 사용되는 Font Awesome 또는 Bootstrap Icons와 같은 아이콘 라이브러리를 통해 버튼에 아이콘을 추가할 수 있어요.

(1) Font Awesome을 이용한 아이콘 버튼

Font Awesome은 다양한 아이콘을 제공하는 무료 아이콘 라이브러리입니다. 아래는 Font Awesome을 이용해 버튼에 아이콘을 추가하는 예제입니다.

먼저, Font Awesome을 추가한 후 아래와 같이 아이콘을 사용해 보세요:

 

<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<button class="btn btn-primary"><i class="fas fa-download"></i> Download</button>
<button class="btn btn-success"><i class="fas fa-check"></i> Confirm</button>
<button class="btn btn-danger"><i class="fas fa-trash"></i> Delete</button>

 

위 코드에서는 fa-download, fa-check, fa-trash 아이콘을 추가하여 버튼의 용도를 시각적으로 더욱 명확하게 표현했습니다.

(2) Bootstrap Icons을 이용한 아이콘 버튼

Bootstrap Icons는 Bootstrap 팀에서 제공하는 공식 아이콘입니다. CDN을 통해 Bootstrap Icons를 불러와 사용할 수 있어요.

 

<!-- Bootstrap Icons CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">

<button class="btn btn-primary"><i class="bi bi-star-fill"></i> Favorite</button>
<button class="btn btn-info"><i class="bi bi-info-circle-fill"></i> Info</button>
<button class="btn btn-warning"><i class="bi bi-exclamation-triangle-fill"></i> Warning</button>

 

위 코드에서는 bi-star-fill, bi-info-circle-fill, bi-exclamation-triangle-fill 등의 Bootstrap Icons를 버튼에 추가했습니다.

5. 아이콘만 있는 버튼

때로는 아이콘만 표시된 버튼이 필요한 경우도 있습니다. 이때는 아이콘을 중심에 놓고, 버튼에 btn 클래스와 btn-색상 클래스를 적용하여 간결한 아이콘 버튼을 만들 수 있습니다.

 

<button class="btn btn-primary"><i class="fas fa-heart"></i></button>
<button class="btn btn-success"><i class="fas fa-play"></i></button>
<button class="btn btn-danger"><i class="fas fa-times"></i></button>

 

아이콘만 표시된 버튼은 직관적인 메시지를 전달할 때 유용하게 사용할 수 있습니다.

요약 및 다음 단계

Bootstrap의 버튼과 아이콘 유틸리티를 활용하면 버튼의 색상, 크기, 스타일을 다양하게 조절할 수 있어요. 또한 Font Awesome이나 Bootstrap Icons 같은 아이콘 라이브러리를 활용해 버튼의 의미를 더욱 명확하게 표현할 수 있습니다. 다음 단계로는 버튼을 실제 프로젝트에 적용해보고, 다양한 컴포넌트와 조합해 웹 페이지 전체의 디자인을 다듬어보세요!

 

2024.11.12 - [프로그래밍/Bootstrap] - Bootstrap 목차