[Vue3] Bootstrap구성

youngseo·2022년 3월 2일

bootstrap

한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online를 들으며 정리한 내용입니다.

Bootstrap이란?

Bootstrap은 프론트엔드 개발을 빠르고 쉽게 할 수 있는 반응형의 UI 프레임 워크입니다.

웹페이지 제작 시 가장 많이 사용되는 레이아웃, 버튼 등의 CSS, JS파일을 미리 만들어놓아 길고긴 코드의 작성 없이 다운로는 또는 CDN방식으로 링크를 하는 것 만으로도 사용이 가능하게 합니다.

이미 지정된 CSS클래스나 JavaScript함수만 불러오면 완성된 디자인 요소를 입맛에 따라 사용이 가능하기 때문에 많은 사랑을 받고 있습니다.

또한 반응형 웹 디자인을 지원하기 때문에 하나의 웹페이지를 데스크탑, 태블릿, 스마트폰 모두에서 무리 없이 볼 수 있도록 만들어줍니다.

▶부트스트랩
▶부트스트랩이란 무엇이며, 왜 사용하는걸까?

Bootstrap실습

프로젝트에 사용될 버튼, 입력요소, 네비게이션 메뉴들 등의 UI를 부트스트랩의 도움을 받아 만들어보도록 하겠습니다.

1. 부트스트랩 설치

$ npm i bootstrap@next

2. src > scss > main.scss

import규칙을 통해 부트스트랩에서 제공하고 있는 기본 스타일을 가져옵니다.

@import "../../node_modules/bootstrap/scss/bootstrap"; //scss확장자명 생략 가능

3. App.vue

main.scss파일을 App.vue파일에 연결해줍니다.

주의점: 모든 프로젝트의 폴더에서 동작하도록 scoped없이 작성을 해줍니다.

<template>
  <RouterView />
</template>

<style lang="scss">
  @import "~/scss/main"; ✅
</style>

4. Home.vue

부트스트랩을 이용해 버튼을 만들어보도록 하겠습니다.

class="btn" 뒤에 primary라는 키워드를 btn-와 함께 붙여 부트스트랩의 기본 스타일을 사용할 수 있습니다.

<template>
  <h1>Home!</h1>
  <div class="btn btn-primary">
    Home
  </div>
</template>

5. 부트스트랩 스타일 커스터마이징

5-1 ⭐부트스트랩 변수정의▶부트스트랩⭐

!defaul 플래그는 SCSS에서 제공하는 기능으로, 새롭게 지정되는 값이 있으면 기존 값을 무시 하겠다는 의미를 가집니다. 즉,Bootstrap에서 지정한 '파란색'의 Primary색상을 우리가 외부에서 수정할 수 있다는 의미입니다.
// Required
@import "../node_modules/bootstrap/scss/functions";
// Default variable overrides
$body-bg: #000;
$body-color: #111;
// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

위 코드에서 경로를 수정해 main.scss파일의 제일 상단에 붙여넣기 한 후, $primary변수를 재정의합니다.
재정의 하려는 색상은 @import: ".../vaiables" 위쪽에 명시를 해줘야합니다

5-2 primary 색상 커스터마이징

// Default variable overrides
$primary: #FCD000;

// Required
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";

@import "../../node_modules/bootstrap/scss/bootstrap";

node_modules > bootstrap > scss > variables.scss를 확인해보면 부트스트랩이 가지고 있는 기본적인 변수들을 확인할 수 있습니다.

5-3 $primary재정의 vs 테마색상 지정 커스터마이징

// Default variable overrides
$primary: #FCD000;          ---(1)

// Required
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";

$theme-colors: (             ---(2)

  "primary": orange,
  "secondary": red,
  "success": $success,
  "info": $info,
  "warning": $warning,
  "danger": $danger,
  "light": $light,
  "dark": $dark
);

@import "../../node_modules/bootstrap/scss/bootstrap";