컴포넌트

컴포넌트 (Components)

Bootstrap의 거의 모든 컴포넌트가 기본 클래스(base class)와 수정자 클래스(modifier class)를 바탕으로 어떻게 반응형으로 구축되는지 배워 보아요.

출처: 문서

본문

기본 클래스 (Base classes)

Bootstrap의 컴포넌트는 대부분 기본-수정자(base-modifier) 명명법으로 만들어져요. .btn 같은 기본 클래스에 공유되는 속성을 최대한 모아 두고, .btn-primary나 .btn-success 같은 수정자 클래스에 각 변형별 스타일을 모아 두는 방식이에요.

수정자 클래스를 만들 때는 Sass의 @each 루프를 사용해서 Sass 맵(map)을 순회해요. 이는 특히 $theme-colors로 컴포넌트의 변형을 생성하거나 각 브레이크포인트에 맞는 반응형 변형을 만들 때 유용해요. 이 Sass 맵을 수정하고 다시 컴파일하면, 변경 사항이 자동으로 이 루프들에 반영되는 걸 볼 수 있어요.

이 루프들을 어떻게 커스터마이즈하고 Bootstrap의 기본-수정자 방식을 자신의 코드에 어떻게 확장하는지는 Sass 맵과 루프 문서를 확인해 보세요.

수정자 (Modifiers)

Bootstrap의 많은 컴포넌트는 기본-수정자 클래스 방식으로 만들어져 있어요. 즉 스타일의 대부분을 기본 클래스(예: .btn)에 담고, 스타일 변형은 수정자 클래스(예: .btn-danger)에만 담는 방식이죠. 이 수정자 클래스들은 $theme-colors 맵에서 만들어져서 수정자 클래스의 개수와 이름을 쉽게 커스터마이즈할 수 있어요.

다음은 $theme-colors 맵을 순회하면서 .alert와 .list-group 컴포넌트의 수정자를 생성하는 두 가지 예시예요.

scss/_alert.scss

// Generate contextual modifier classes for colorizing the alert
@each $state in map-keys($theme-colors) {
  .alert-#{$state} {
    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
  }
}

scss/_list-group.scss

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state in map-keys($theme-colors) {
  .list-group-item-#{$state} {
    --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
  }
}

반응형 (Responsive)

이 Sass 루프는 색상 맵에만 국한되지 않아요. 컴포넌트의 반응형 변형도 만들 수 있죠. 드롭다운의 반응형 정렬을 예로 들어 볼게요. $grid-breakpoints Sass 맵에 대한 @each 루프를 미디어 쿼리 인클루드와 섞어서 사용해요.

scss/_dropdown.scss

// We deliberately hardcode the `bs-` prefix because we check
// this custom property in JS to determine Popper's positioning

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .dropdown-menu#{$infix}-start {
      --bs-position: start;

      &[data-bs-popper] {
        right: auto;
        left: 0;
      }
    }

    .dropdown-menu#{$infix}-end {
      --bs-position: end;

      &[data-bs-popper] {
        right: 0;
        left: auto;
      }
    }
  }
}

$grid-breakpoints를 수정하면 그 맵을 순회하는 모든 루프에 변경 사항이 적용돼요.

scss/_variables.scss

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Sass 맵과 변수를 수정하는 방법에 대한 더 자세한 정보와 예시는 Grid 문서의 CSS 섹션을 참조하세요.

직접 만들기 (Creating your own)

Bootstrap으로 빌드할 때 이 가이드라인을 채택해서 자신만의 컴포넌트를 만드는 걸 권장해요. 우리도 문서와 예시의 커스텀 컴포넌트에 이 방식을 적용하고 있어요. callouts 같은 컴포넌트는 기본 클래스와 수정자 클래스로 구성된 제공 컴포넌트와 똑같이 만들어졌어요.

"이건 callout이에요. 우리가 여러분에게 드리는 메시지가 돋보이도록 문서용으로 직접 만든 거예요. 수정자 클래스를 통해 세 가지 변형이 있어요."

<div class="callout">...</div>

CSS에서는 아래처럼 작성하게 되는데, 스타일의 대부분은 .callout로 처리하고 각 변형의 고유한 스타일은 수정자 클래스로 조절해요.

// Base class
.callout {}

// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}

callout의 경우 그 고유한 스타일은 그냥 border-left-color 하나뿐이에요. 그 기본 클래스를 수정자 클래스 중 하나와 조합하면 완전한 컴포넌트 패밀리를 얻을 수 있어요:

  • 이건 정보(info) callout이에요. 동작을 보여주는 예시 텍스트예요.
  • 이건 경고(warning) callout이에요. 동작을 보여주는 예시 텍스트예요.
  • 이건 위험(danger) callout이에요. 동작을 보여주는 예시 텍스트예요.

더 알아보기 (Learn more)