Bootstrap] 03. 자주 쓰는 컴포넌트: 버튼, 카드, 네비게이션 바

[Bootstrap] 03. 자주 쓰는 컴포넌트: 버튼, 카드, 네비게이션 바

이전 글에서는 부트스트랩의 그리드 시스템을 통해 화면을 나누는 방법을 정리했습니다. 이번 글에서는 실제 화면을 구성할 때 자주 사용하는 버튼, 카드, 네비게이션 바를 살펴보겠습니다.

부트스트랩을 사용할 때 중요한 것은 단순히 클래스를 외우는 것이 아닙니다. 각 컴포넌트가 어떤 역할을 하고, 어떤 구조로 작성되는지 이해하는 것이 더 중요합니다.

---

1. 컴포넌트란?

컴포넌트(Component)는 화면에서 반복적으로 사용되는 UI 요소를 의미합니다. 버튼, 카드, 네비게이션 바, 입력 폼, 모달 창 같은 요소들이 대표적인 컴포넌트입니다.

부트스트랩은 이런 요소들을 미리 만들어두고, 정해진 클래스 이름을 붙이면 바로 사용할 수 있게 해줍니다. 그래서 처음부터 모든 CSS를 직접 작성하지 않아도 빠르게 화면 구조를 만들 수 있습니다.

<button class="btn btn-primary">버튼</button>

위 코드처럼 class에 Bootstrap에서 제공하는 이름을 넣으면 버튼 스타일이 적용됩니다.

---

2. 버튼(Button)

버튼은 사용자가 어떤 동작을 실행할 때 사용하는 요소입니다. 저장, 수정, 삭제, 이동, 제출 같은 기능에 자주 사용됩니다.

<button type="button" class="btn btn-primary">저장</button>
<button type="button" class="btn btn-secondary">취소</button>
<button type="button" class="btn btn-danger">삭제</button>

Bootstrap 버튼은 기본적으로 btn 클래스를 사용하고, 그 뒤에 색상이나 의미를 나타내는 클래스를 함께 붙입니다.

클래스	주로 사용하는 의미
btn-primary	가장 중요한 버튼
btn-secondary	보조 버튼
btn-success	성공, 완료
btn-warning	주의
btn-danger	삭제, 위험한 동작

버튼 색상은 단순히 예뻐 보이게 고르는 것이 아니라, 사용자에게 동작의 의미를 전달하기 위해 선택하는 것이 좋습니다.

---

3. Outline 버튼

항상 진한 배경의 버튼만 사용하면 화면이 무거워 보일 수 있습니다. 그럴 때는 outline 버튼을 사용할 수 있습니다.

<button type="button" class="btn btn-outline-primary">자세히 보기</button>
<button type="button" class="btn btn-outline-danger">삭제</button>

outline 버튼은 배경색을 강하게 채우지 않고 테두리 중심으로 표현됩니다. 보조 동작이나 덜 중요한 버튼에 사용하면 화면이 깔끔해집니다.

---

4. 버튼 크기 조절

버튼은 크기도 조절할 수 있습니다. 대표적으로 btn-sm, btn-lg 클래스를 사용합니다.

<button type="button" class="btn btn-primary btn-sm">작은 버튼</button>
<button type="button" class="btn btn-primary">기본 버튼</button>
<button type="button" class="btn btn-primary btn-lg">큰 버튼</button>

목록 안에서는 작은 버튼을, 주요 화면에서는 기본 버튼이나 큰 버튼을 사용하는 식으로 구분할 수 있습니다.

---

5. 카드(Card)

카드는 하나의 정보를 묶어서 보여줄 때 자주 사용하는 컴포넌트입니다. 게시글 목록, 상품 목록, 프로필, 통계 요약, 대시보드 박스 등에 많이 사용됩니다.

<div class="card">
  <div class="card-body">
    <h5 class="card-title">카드 제목</h5>
    <p class="card-text">카드 안에 들어갈 설명입니다.</p>
    <a href="#" class="btn btn-primary">자세히 보기</a>
  </div>
</div>

카드는 보통 card로 바깥 영역을 만들고, 그 안에 card-body를 넣어 내용을 배치합니다.

클래스	역할
card	카드 전체 영역
card-body	카드 내용 영역
card-title	카드 제목
card-text	카드 설명

---

6. 이미지가 있는 카드

카드 상단에 이미지를 넣고 싶다면 card-img-top 클래스를 사용할 수 있습니다.

<div class="card">
  <img src="sample.jpg" class="card-img-top" alt="샘플 이미지">

  <div class="card-body">
    <h5 class="card-title">상품 이름</h5>
    <p class="card-text">상품에 대한 간단한 설명입니다.</p>
    <a href="#" class="btn btn-primary">확인하기</a>
  </div>
</div>

이미지, 제목, 설명, 버튼을 함께 묶을 수 있기 때문에 목록형 화면을 만들 때 유용합니다.

---

7. 카드와 그리드 함께 사용하기

카드는 그리드 시스템과 함께 사용할 때 더 효과적입니다. 예를 들어 카드 3개를 한 줄에 배치하고 싶다면 row와 col을 함께 사용하면 됩니다.

<div class="container">
  <div class="row g-3">

    <div class="col-12 col-md-6 col-lg-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">카드 1</h5>
          <p class="card-text">첫 번째 카드입니다.</p>
        </div>
      </div>
    </div>

    <div class="col-12 col-md-6 col-lg-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">카드 2</h5>
          <p class="card-text">두 번째 카드입니다.</p>
        </div>
      </div>
    </div>

    <div class="col-12 col-md-6 col-lg-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">카드 3</h5>
          <p class="card-text">세 번째 카드입니다.</p>
        </div>
      </div>
    </div>

  </div>
</div>

위 구조는 모바일에서는 한 줄에 1개, 태블릿에서는 2개, 큰 화면에서는 3개의 카드가 보이도록 구성한 예시입니다.

---

8. 네비게이션 바/Navbar

네비게이션 바는 사이트 상단에서 메뉴 이동을 담당하는 영역입니다. 브랜드명, 메뉴, 로그인 버튼, 검색창 등이 들어갈 수 있습니다.

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">

    <a class="navbar-brand" href="#">MySite</a>

    <button class="navbar-toggler" type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarMenu">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarMenu">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

navbar는 코드가 조금 길어 보이지만 구조를 나누어 보면 어렵지 않습니다.

클래스	역할
navbar	네비게이션 바 전체 영역
navbar-brand	사이트 이름 또는 로고
navbar-nav	메뉴 목록 영역
nav-item	각 메뉴 항목
nav-link	메뉴 링크
navbar-toggler	모바일 화면에서 메뉴를 열고 닫는 버튼

---

9. navbar-expand-lg의 의미

navbar에서 자주 보이는 클래스 중 하나가 navbar-expand-lg입니다. 이 클래스는 큰 화면에서는 메뉴를 펼쳐서 보여주고, 작은 화면에서는 접힌 메뉴 형태로 보여주겠다는 의미입니다.

<nav class="navbar navbar-expand-lg">
  ...
</nav>

즉, 화면 크기에 따라 메뉴 형태를 다르게 보여주기 위한 반응형 클래스입니다. 모바일 화면에서는 햄버거 버튼이 보이고, 사용자가 버튼을 누르면 메뉴가 펼쳐집니다.

단, 메뉴 접기와 펼치기 기능을 사용하려면 Bootstrap의 JavaScript 파일도 함께 적용되어 있어야 합니다. CSS만 적용되어 있으면 모양은 보일 수 있지만, 버튼 클릭 동작은 제대로 작동하지 않을 수 있습니다.

---

10. 컴포넌트 사용 시 주의할 점

• 클래스를 무작정 많이 붙이기보다 구조를 먼저 이해해야 한다.
• 버튼 색상은 동작의 의미에 맞게 선택하는 것이 좋다.
• 카드는 그리드와 함께 사용할 때 목록 화면을 만들기 쉽다.
• navbar의 반응형 동작은 JavaScript 설정이 필요할 수 있다.
• Bootstrap 기본 디자인만 그대로 쓰면 사이트들이 비슷해 보일 수 있다.

Bootstrap은 빠르게 화면을 만들 수 있게 도와주지만, 모든 디자인 판단을 대신해주는 도구는 아닙니다. 어떤 요소가 중요한지, 어떤 버튼을 강조해야 하는지, 정보는 어떻게 묶어야 하는지는 직접 판단해야 합니다.

---

11. 정리

• 컴포넌트는 화면에서 반복적으로 사용되는 UI 요소다.
• 버튼은 btn 클래스를 기본으로 하고, 의미에 맞는 색상 클래스를 함께 사용한다.
• 카드는 제목, 설명, 이미지, 버튼 등을 하나의 정보 단위로 묶을 때 유용하다.
• 카드는 그리드 시스템과 함께 사용하면 반응형 목록 화면을 쉽게 만들 수 있다.
• 네비게이션 바는 사이트의 주요 이동 경로를 담당한다.

이번 글에서는 Bootstrap에서 자주 사용하는 기본 컴포넌트들을 정리했습니다. 버튼, 카드, 네비게이션 바만 잘 이해해도 간단한 웹페이지의 뼈대는 충분히 만들 수 있습니다.

다음 글에서는 Bootstrap에서 사용자의 입력을 받는 폼(Form)과 화면 위에 띄우는 모달(Modal)을 정리해보겠습니다.