관련링크
Breakpoink(중단점)
Grid(그리드)
1. Container(컨테이너)
2. col (레이아웃 규칙)
  1. 사용법
화면분기별 가시성

Breakpoink(중단점)

부트스트랩은 반응형 페이지를 구현하기 위한 화면 분기를 6단계로 나누고 있다.
화면 크기에 해당하는 클래스는 속성과 속성값의 사이에 작성한다. 예시: col-md-4
부트스트랩 5부터는 min-width 로 분기가 작성된다. 4는 max-width 였고 jQuery 였다.

Breakpoint	Class infix	화면폭
Extra small	None	<576px (0~576)
Small	sm	≥576px (576~)
Medium	md	≥768px (768~)
Large	lg	≥992px (992~)
Extra large	xl	≥1200px (1200~)
Extra extra large	xxl	≥1400px (1400~)

Grid(그리드)

그리드란? 디자인을 효율적으로 하기위한 방법중 하나 화면을 일정한 크기의 사각형으로 분할하여 콘텐츠를 배치하면 가독성있고 세련된 디자인을 쉽게 제작할수 있다

🔗구글머티리얼디자인3-그리드시스템 설명

부트스트랩의 그리드 시스템은 컨테이너 > 행 > 열 단위로 레이아웃을 구성한다.
부트스트랩의 그리드 시스템은 6단계로 화면을 분기한다.

// sm 576~767
// md ~768
// lg ~992
// xl ~1200
// xxl ~1400

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// sm
@media (min-width: 576px) { ... }

// md
@media (min-width: 768px) { ... }

// lg
@media (min-width: 992px) { ... }

// xl
@media (min-width: 1200px) { ... }

// xxl
@media (min-width: 1400px) { ... }

Container(컨테이너)

콘텐츠 박스를 구성하는 큰 단위로 6단계의 분기점이 있다. xxl: 1400/xl: 1200/ lg: 992/md: 768/sm: 576 / xs: 575 미만 으로 나누며 화면 크기별 콘테이너의 너비는 아래의 표와 같다

class	Extra Small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px	XX-Large ≥1400px
.container	100%	540px	720px	960px	1140px	1320px
.container-sm	100%	540px	720px	960px	1140px	1320px
.container-md	100%	100%	720px	960px	1140px	1320px
.container-lg	100%	100%	100%	960px	1140px	1320px
.container-xl	100%	100%	100%	100%	1140px	1320px
.container-xxl	100%	100%	100%	100%	100%	1320px
.container-fluid	100%	100%	100%	100%	100%	100%

부트스트랩은 moblie-first 이므로 작은크기의 화면부터 테스트하자

container.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <!-- xxl: 1400/xl: 1200/ lg: 992/md: 768/sm: 576 / xs: 575 미만-->
    <div class="container text-center mt-4 bg-info">
      .container (xs:100% / sm:540 / md : 720 / lg : 960 / xl: 1140 / xxl :1400
      )
    </div>
    <div class="container-sm text-center mt-4 bg-info">
      .container-sm (xs:100% / sm:540 / md : 720 / lg : 960 / xl: 1140 / xxl
      :1400 )
    </div>
    <div class="container-md text-center mt-4 bg-info">
      .container-md (xs:100% / sm:100% / md : 720 / lg : 960 / xl: 1140 / xxl
      :1400 )
    </div>
    <div class="container-lg text-center mt-4 bg-info">
      .container-lg (xs:100% / sm:100% / md : 100% / lg : 960 / xl: 1140 / xxl
      :1400 )
    </div>
    <div class="container-xl text-center mt-4 bg-info">
      .container-xl (xs:100% / sm:100% / md : 100% / lg : 100% / xl: 1140 / xxl
      :1400 )
    </div>
    <div class="container-xxl text-center mt-4 bg-info">
      .container-xxl (xs:100% / sm:100% / md : 100% / lg : 100% / xl: 100% / xxl
      :1400 )
    </div>
    <div class="container-fluid text-center mt-4 bg-info">
      .container-xxl (xs:100% / sm:100% / md : 100% / lg : 100% / xl: 100% / xxl
      :100% )
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

col (레이아웃 규칙)

부트스트랩은 1행(.row)이 12개의 열(.col)로 구성 화면크기마다 정해진 클래스를 부여해서 반응형 페이지 쉽게 완성할수 있음

사용법

.container 를 쓰면 미디어쿼리부터 전부 맞춰짐
약속된 접두사를 쓰면 레이아웃이 만들어짐
- 접두사 예시 : .row , .col, .col-xd …
- col-화면크기-숫자: 지정한 화면 크기에서 col이 몇칸을 차지할것인지 설정
- col-sm-숫자: 576px 이하면 세로배치 (휴대폰)
- col-md-숫자: 768px 이하면 세로배치
- col-lg-숫자: 992px 이하면 세로배치
- col-xl-숫자: 1200px 이하면 세로배치
구조는 .container>.row>.col*12 가 기본
.row 에 .col 은 총 12개까지 들어갈수 있음 + 5.full-width레이아웃을 만들때는 .container-fluid 사용

위의 그림과 같은 레이아웃을 만들어보자

col-start.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-row"></body>
</html>

col-final.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  </head>

  <body class="p-3 m-0 border-0 bd-example bd-example-row">
    <!-- Example Code -->
    <div class="container text-center mb-5">
      <div class="row d-flex ">
        <div class="col mx-2">1</div>
        <div class="col me-1">2</div>
        <div class="col gx-5">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
        <div class="col">7</div>
        <div class="col">8</div>
        <div class="col">9</div>
        <div class="col">10</div>
        <div class="col">11</div>
        <div class="col">12</div>
      </div>
    </div>
    <div class="container text-center mb-5">
      <div class="row">
        <div class="col-xxl-4 col-xl-2 col-lg-8">4</div>
        <div class="col-xxl-4 col-xl-2 col-lg-4">4</div>
        <div class="col-xxl-4 col-xl-2 d-lg-none d-xl-block">4</div>
      </div>
    </div>
    <div class="container text-center mb-5">
      <div class="row">
        <div class="col-xxl-4 ">4</div>
        <div class="col-xxl-8 ">8</div>
      </div>
    </div>
    <div class="container text-center mb-5">
      <div class="row">
        <div class="col-xxl-6 ">6</div>
        <div class="col-xxl-6 ">6</div>
        <div class="col-xxl-12 col-xl-10 col-lg-4">12</div>
      </div>
    </div>

    <!-- End Example Code -->
  </body>
</html>

화면분기별 가시성

숨기기 `.d-none`

화면분기	클래스
모두숨김	.d-none
sm 이상 숨김	.d-sm-none
md 이상 숨김	.d-md-none
lg 이상 숨김	.d-lg-none
xl 에서 숨김	.d-xl-none

표시하기 `.d-block`

화면분기	클래스
모두표시	.d-block
sm 이상 보임	.d-sm-block
md 이상 보임	.d-md-block
lg 이상 보임	.d-lg-block
xl 에서 보임	.d-xl-block

조합사용

화면분기	클래스
xs 에서만 숨김	.d-none .d-sm-block
sm 에서만 숨김	.d-sm-none .d-md-block
md 에서만 숨김	.d-md-none .d-lg-block
lg 에서만 숨김	.d-lg-none .d-xl-block
xs 에서만 보임	.d-block .d-sm-none
sm 에서만 보임	.d-none .d-sm-block .d-md-none
md 에서만 보임	.d-none .d-md-block .d-lg-none
lg 에서만 보임	.d-none .d-lg-block .d-xl-none
xl 에서만 보임	.d-none .d-xl-block

거터

😀 열 사이의 패딩 ver 5에 추가된 속성 컬럼사이의 여백으로 최대 1.5rem (24px) 이다 Bootstrap 그리드 시스템에서 콘텐츠의 간격을 맞추고 정렬하는 데에 사용
거터는 가로 padding에 기준으로 생기는 .col 안의 콘텐츠 사이의 간격

세로거터

.gx-* 를 추가한다.
container px-4 가 있을 경우 보다 큰값으로 gx-5 넣어야 한다.

ex

html

<div class="container px-4 text-center">
  <div class="row gx-5">
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

가로거터

접두사에 .gy- 를 사용 하고 부모.row 에.overflow-hidden 를 추가한다

ex

html

<div class="container overflow-hidden text-center">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

거터가 없을경우 .g-0

spacing (여백)

여백의 종류

m/p

m : Margin
p : Padding

여백의 방향

t , b , l , r ,x , y

t : top
b : bottom
l : left
r : right
s : Start -> left , right
e : End -> top , bottom

여백의 크기

0, 1, 2, 3, 4, 5, auto

0 : 0
1 : .25rem( font-size가 16px이면, 4px) 크기
2 : .5rem( font-size가 16px이면, 8px) 크기
3 : 1rem( font-size가 16px이면, 16px) 크기
4 : 1.5rem( font-size가 16px이면, 24px) 크기
5 : 3rem( font-size가 16px이면, 48px) 크기
auto : auto

n1, n2, n3, n4, n5

n : negative을 의미
n1 : -.25rem( font-size가 16px이면, -4px) 크기
n2 : -.5rem( font-size가 16px이면, -8px) 크기
n3 : -1rem( font-size가 16px이면, -16px) 크기
n4 : -1.5rem( font-size가 16px이면, -24px) 크기
n5 : -3rem( font-size가 16px이면, -48px) 크기

관련링크

Breakpoink(중단점)

Grid(그리드)

Container(컨테이너)

col (레이아웃 규칙)

사용법

화면분기별 가시성

숨기기 .d-none

표시하기 .d-block

조합사용

거터

세로거터

ex

가로거터

ex

spacing (여백)

여백의 종류

여백의 방향

여백의 크기

숨기기 `.d-none`

표시하기 `.d-block`