[Bootstrap] Bootstrap 예제: 4. Sass를 이용한 커스터마이징

Bootstrap 예제: 4. Sass를 이용한 커스터마이징

Bootstrap의 가장 강력한 커스터마이징 방법은 Sass(SCSS)를 사용하는 것입니다. 내장된 변수를 수정하여 프로젝트에 맞는 디자인 시스템을 구축할 수 있습니다.

설정 방법

1. Sass 컴파일러 준비: Node.js 환경이라면 sass 패키지를 설치합니다.

   npm install -g sass

2. 파일 구조: 일반적으로 다음과 같은 구조를 사용합니다.

   my-project/
   |-- scss/
   |   |-- _custom.scss  // 변수를 덮어쓰거나 커스텀 스타일을 추가하는 파일
   |   `-- main.scss     // Bootstrap과 custom 파일을 불러오는 메인 파일
   |-- css/
   |   `-- main.css      // 컴파일된 결과물
   `-- index.html

_custom.scss: 변수 덮어쓰기

Bootstrap의 기본 변수 값을 변경합니다. 어떤 변수를 사용할 수 있는지는 Bootstrap 공식 문서나 node_modules/bootstrap/scss/_variables.scss 파일에서 확인할 수 있습니다.

// _custom.scss

// 1. 원하는 Bootstrap 변수의 기본값을 덮어씁니다.
// Primary 색상을 브랜드 색상으로 변경
$primary: #7952b3;
$danger: #d9232d;

// Body의 기본 배경색과 글자색 변경
$body-bg: #f8f9fa;
$body-color: #212529;

// 폰트 변경 (Google Fonts 등에서 임포트 후 사용)
$font-family-sans-serif: "Noto Sans KR", sans-serif;

// 컨테이너 최대 너비 변경
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

// 2. 여기에 추가적인 커스텀 CSS를 작성할 수도 있습니다.
.custom-card {
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem rgba($primary, 0.15);
}

main.scss: 파일 임포트

작성한 _custom.scss 파일과 Bootstrap 라이브러리를 순서대로 불러옵니다.

중요: 변수를 먼저 로드해야 Bootstrap이 해당 변수를 사용하여 CSS를 생성하므로, _custom.scss를 먼저 임포트해야 합니다.

// main.scss

// 1. 덮어쓸 변수가 담긴 커스텀 파일 임포트
@import "custom";

// 2. Bootstrap 전체 또는 필요한 부분만 임포트
// (경로는 프로젝트 구조에 따라 다를 수 있음)
@import "../node_modules/bootstrap/scss/bootstrap";

컴파일

터미널에서 sass 명령어를 사용하여 main.scss를 main.css로 컴파일합니다.

# 입력파일:출력파일
sass scss/main.scss:css/main.css

# --watch 플래그를 사용하면 파일 변경 시 자동으로 컴파일됩니다.
sass --watch scss/main.scss:css/main.css

이제 index.html에서 컴파일된 css/main.css 파일을 링크하여 사용하면, 커스터마이징된 스타일이 적용된 Bootstrap을 사용할 수 있습니다.