개요

부트스트랩 공식 문서를 읽으며 핵심 부분을 정리하였다. 모든 부분을 암기할 순 없기에 핵심이 되는 부분만 정리하였다. 그 외 부분은 필요 시 공식 페이지를 방문해 찾아보는 것으로 한다.

공식 문서 링크

Getting Started

Introduction

부트스트랩을 사용하기 위해 부트스트랩 CSS와 JS를 적용한다.

코드는 공식 문서 참조

Layout

다양한 크기의 디바이스에 따른 반응형 화면 레이아웃 제작과 관련된 내용이다.

Breakpoints

화면 크기에 따라 Extra small, Small, Medium, Large, Extra large, Extra extra large 총 여섯 가지로 나뉜다. 6가지를 기준으로 CSS 미디어쿼리를 적용한다.

Containers

일반적으로 div 태그는 왼쪽 위에 배치하게 된다. 하지만 이는 미관상 좋지 않기에 container 태그를 사용한다.

기본 div의 클래스로 container를 입력하면 해당 컨텐츠가 좌우 공백과 함께 가운데에 표시된다. 그러다가, 특정 크기(576px) 이하로 줄어들게 되면 좌우 여백 없이(100%) 차지하게 된다.

• container-화면크기에 따라 어느 정도부터 최대한 차지하게 될지 정할 수 있다.
  • container-lg를 적용한 div 태그는 768px 이하는 모두 좌우 여백 없이 100% 차지하지만, 그 보다 커지면 좌우 여백이 생긴다.

Grid system

부트스트랩은 화면을 12개의 컬럼으로 나눈다.

일반적으로 row 클래스 아래 col 클래스를 사용하는 방식으로 div 태그를 배치한다.

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

이 때, col-화면크기-그리드로 화면 크기마다 어느 정도의 너비를 차지하게 할 지 정할 수 있다.

<div class="container">
        <div class="row">
            <div class="col-md-6 col-lg-4 col-xl-3">A</div>
            <div class="col-md-6 col-lg-4 col-xl-3">B</div>
            <div class="col-md-6 col-lg-4 col-xl-3">C</div>
            <div class="col-md-6 col-lg-4 col-xl-3">D</div>
            <div class="col-md-6 col-lg-4 col-xl-3">E</div>
            <div class="col-md-6 col-lg-4 col-xl-3">F</div>
            <div class="col-md-6 col-lg-4 col-xl-3">G</div>
            <div class="col-md-6 col-lg-4 col-xl-3">H</div>
            <div class="col-md-6 col-lg-4 col-xl-3">I</div>
            <div class="col-md-6 col-lg-4 col-xl-3">J</div>
        </div>
    </div>

해당 코드에서 md 크기 이상일 때에는 하나의 col이 6개의 그리드를 차지하기 때문에 한 에 2개가 배치된다. (12/6=2) 같은 원리로 lg 이상일 경우에는 3개, xl 이상일 경우에는 4개가 배치된다.

이는 작은 화면(md)일 때에는 한 줄에 2개가 표시되지만 큰 화면(xl)일 때에는 한 줄에 4개가 표시되어 공간 낭비를 줄일 수 있다.

참고로 md보다 작을 때에는 따로 지정하지 않았지만, div태그의 기본 성질에 의해 하나가 한 행 모두를 차지하게 된다.

Columns

CSS의 flexbox를 제공하는 클래스다. 박스 안의 윗 부분 배치나 아랫 부분 배치 등을 지정할 수 있는 기능을 제공한다.

Utilities

Display property

화면에 따라 컨텐츠를 표시하는, 디스플레이에 관련된 클래스다. 모바일 화면에서는 특정 컨텐츠를 표시하지 않는다거나 하는 방식을 적용할 수 있다.

<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

위 div 태그는 화면 크기가 lg 이상일 때에는 표시하지 않는다는 뜻이다.

아래 div 태그는 일반적으로는 표시하지 않지만, 화면 크기가 lg 이상일 때에는 block으로 표시한다는 뜻이다.