인기 있는 스타일링 라이브러리/프레임워크를 살펴보는 스타일링 시리즈의 두 번째 부분에 오신 것을 환영합니다. 이번 블로그에서는 부트스트랩에 대해 살펴보겠습니다. Bootstrap은 직관적인 그리드 시스템, UI 구성 요소 및 광범위한 유틸리티를 제공하여 웹 사이트를 더 빠르고 쉽게 구축할 수 있게 해주는 강력한 오픈 소스 프런트엔드 프레임워크입니다.

설정

물론 일부 기능을 살펴보기 전에 프로젝트에서 부트스트랩을 설정하는 방법에 대해 이야기해야 합니다. 이 글을 쓰는 시점에서 Bootstrap의 현재 버전은 5.3.3이며 모든 예제에 이를 사용할 것입니다.

CDN을 통한 부트스트랩

Bootstrap은 CDN 또는 콘텐츠 전송 네트워크를 사용하여 매우 빠르게 설정할 수 있습니다. 이 방법은 설치가 필요하지 않습니다. Bootstrap의 CSS 및 JavaScript 링크를 HTML 파일에 추가하기만 하면 바로 경쟁이 시작됩니다!
HTML의

그런 다음 닫는

패키지 관리자를 통해

대규모 프로젝트에서 작업하거나 최신 프런트엔드 도구를 사용하여 작업하는 경우 프로젝트 관리자를 통해 설치하는 것이 좋습니다. 운 좋게도 이것도 간단합니다! 터미널에서 npm을 사용하는 경우 npm install bootstrap을 작성하고,yan을 사용하는 경우에는 Yarn add bootstrap을 작성하세요. 설치 후 부트스트랩의 CSS 및 JavaScript를 기본 CSS 및 JS 파일로 각각 가져오는 것이 좋습니다.

// Import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

// Import Bootstrap JavaScript
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

그리드 시스템

Bootstrap의 가장 강력한 기능 중 하나는 그리드 시스템입니다. 이를 통해 다양한 화면 크기에 자동으로 조정되는 반응형 레이아웃을 만들 수 있습니다.

구조

그리드는 12열 구조를 기반으로 콘텐츠를 정리합니다. 기본 구조는 다음과 같습니다:

  

    
Column 1
    
Column 2
    
Column 3
  

• 컨테이너: 컨테이너는 열과 행을 정렬하면서 보관합니다.
• 행: 행은 열을 가로로 유지하고 그룹화합니다.
• 열: 열은 콘텐츠가 위치하는 곳이며, 각 행에는 12개의
가 포함될 수 있습니다.

크기

열은 자체 크기를 가질 수도 있습니다! 이는 다양한 레이아웃을 제공하는 데 사용될 수 있습니다. 행에서 차지할 열 수에 따라 표시됩니다.

  

    
100% Width
  
  

    
50% Width
    
50% Width
  
  

    
33.33% Width
    
33.33% Width
    
33.33% Width
  

중단점

Bootstraps 그리드는 모바일 우선입니다. 즉, 더 큰 장치로 확장하기 전에 모바일 장치용으로 구축되었습니다. 이 때문에 Bootstrap에는 다양한 화면 크기에서 열이 작동하는 방식을 정의하는 클래스가 있습니다. 이는 다음과 같습니다:

• xs: 576px 미만의 화면용
• sm: 576px보다 큰 화면의 경우
• md: 768px보다 큰 화면의 경우
• lg: 992px 이상의 화면인 경우
• xl: 1200px 이상의 화면용

예를 들어:

  

    
Wide on medium and larger screens
    
Narrower on medium and larger screens
  

이 예에서 첫 번째 열은 작은 화면에서 전체 너비를 차지하지만 중형 또는 대형 화면에서는 8개의 그리드 단위만 차지합니다. 두 번째는 작은 화면에서 너비의 절반을 차지하고 중간 이상에서는 4개의 단위만 차지합니다.

공통 구성 요소

Bootstrap은 최소한의 사용자 정의 CSS로 매력적이고 사용자 친화적인 웹 사이트를 만드는 데 도움이 되는 다양한 사전 구축 구성 요소를 제공합니다. 구성 요소가 많기 때문에 작업할 가능성이 있는 가장 일반적인 구성 요소 중 일부를 살펴보겠습니다.

타이포그래피

사용자가 믿기 위해서는 읽어야 하기 때문에 텍스트에 대해 이야기하는 것부터 시작하겠습니다. 타이포그래피 클래스를 사용하면 제목부터 본문, 목록까지 일관된 텍스트 스타일을 쉽게 정의할 수 있습니다. 예를 들어, 다른 제목은 표시 클래스에 따라 표시됩니다:

Heading 1
Heading 2
Heading 3
This is lead text, which stands out from regular paragraph text.
This is regular paragraph text.
This is small text, which stands out from regular paragraph text.

위에서 볼 수 있듯이 본문 텍스트를 수정하기 위해 유틸리티 클래스를 사용하여 단락 텍스트를 정의할 수도 있습니다.

버튼

모든 웹사이트나 앱에는 버튼이 필요합니다! 부트스트랩은 기본적으로 다양한 버튼 스타일을 제공합니다. 해당 클래스는 다음과 같이 정의됩니다:

Primary Button
Secondary Button
Danger Button


Large Button
Small Button


Success Outline
Warning Outline

NavBar

Bootstrap의 navbar 구성 요소에는 정렬, 드롭다운 등을 위한 클래스가 내장되어 있습니다!

이 예에서는 탐색 메뉴가 작은 화면에서 축소됩니다.

유틸리티 클래스

Bootstrap에는 개발 속도를 높이고 사용자 정의 CSS의 필요성을 줄이는 데 도움이 되는 광범위한 유틸리티 클래스도 포함되어 있습니다. 몇 가지 클래스 이름만으로 간격, 정렬, 표시 속성 등을 조정할 수 있습니다!

간격

간격은 개발 시 사용자 가독성을 위해 매우 중요합니다. 고맙게도 Bootstrap은 요소의 여백과 패딩을 조정하는 클래스를 제공합니다. 모두 {property}{sides}-{size}.

• 속성: 여백은 m, 패딩은 p
• 측면: t 상단, b 하단, l 왼쪽, r 오른쪽, x 왼쪽 및 오른쪽, y 상단 및 하단 또는 모든 측면에 대해 공백
• 크기: ​​0, 1, 2, ... 또는 자동

예를 들어:

Margin Top of 3
Padding of 5
Horizontally Centered with Auto Margin

표시하다

디스플레이 유틸리티는 요소의 가시성과 레이아웃을 제어하는 ​​데 도움이 됩니다. 이는 요소의 작동 방식을 표시하거나 숨기거나 변경하는 데 사용할 수 있습니다. 표시 클래스에는 다음이 포함됩니다.

• d-block: 블록 요소로 표시
• d-inline: 인라인 요소로 표시
• d-none: 요소 숨기기
• d-flex: Flexbox 활성화
• d-inline-block: 인라인 블록으로 표시

Bootstrap은 또한 d-none d-md-block과 같은 중단점에 적용되는 이러한 클래스의 반응형 버전을 제공합니다. 이는 작은 화면에서 요소를 숨깁니다.

Visible on medium and larger screens
Centered with Flexbox

텍스트 유틸리티

Bootstrap은 다음과 같은 클래스를 사용하여 대량의 텍스트 사용자 정의를 제공합니다.

텍스트 정렬

• text-start: 텍스트를 왼쪽으로 정렬
• text-end: 텍스트를 오른쪽으로 정렬합니다
• text-center: 텍스트를 가운데로 정렬합니다

텍스트 줄바꿈

• text-nowrap: 텍스트가 다음 줄로 넘어가는 것을 방지합니다
• text-truncate: 텍스트가 너무 긴 경우 줄임표로 텍스트를 자릅니다.

텍스트 색상

• text-primary: 기본 색상이 포함된 텍스트(기본값: 파란색)
• text-success: 성공 색상이 포함된 텍스트(기본값: 녹색)
• text-danger: 위험 색상이 포함된 텍스트(기본값: 빨간색)

This text is centered and green
This text is right-aligned and blue

결론

Bootstrap은 개발자가 반응형 웹사이트를 효율적으로 구축할 수 있게 해주는 강력하고 유연한 프레임워크입니다. 이러한 기본 개념을 익히면 작업 흐름을 간소화하고 사용자 정의 CSS 및 레이아웃 관리보다는 사이트의 디자인과 기능에 더 집중할 수 있습니다. 그러니 뛰어 들어보세요! 몇 가지 예시를 실험해보고 놀라운 앱을 만들어보세요!

출처

부트스트랩