Bootstrap -1

Kim sejin·2023년 9월 11일
0

css

목록 보기
3/3

Bootstrap

CDN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <h1>hello world</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

BootStrap의 javascript와 css를 사용하기 위해 CDN 링크를 추가한다.

grid

BootStrap에서는 12개가 하나의 행을 이룬다.

breakPoints

Bootstrap의 그리드 시스템은 6개의 기본 중단점과 사용자 정의한 모든 중단점에 걸쳐 적응할 수 있다. 6개의 기본 그리드 계층은 다음과 같다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <style>
        .col, .col-6{
            background-color: aqua;
            border: 2px solid black;
        }
        .row > div{
            border: 2px solid greenyellow;
        }
    </style>
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col">Column</div>
            <div class="col">Column</div>
            <div class="col">Column</div>
            <div class="col">Column</div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">A</div>
            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">B</div>
            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">C</div>
            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">D</div>
            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">E</div>
            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">F</div>
            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">G</div>
            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">H</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  </body>
</html>

breakpoints에 따라서 그리드의 크기가 변경되어 나타나게 된다. xl보다 작으면 하나의 그리드가 4개가 나오게 되고, lg보다 작으면 하나의 그리드가 6개 즉, 50%가 화면에 나타나게 된다. md보다 작으면 하나의 그리드가 12개 즉, 100%로 화면에 나타나게 된다.

이 때, col-sm-12를 입력하지 않아도 자동으로 남은 너비로 지정해주기 때문에, 작성할 필요가 없다.

사용자의 해상도에 따라서 하나의 컨테이너의 너비가 다 바뀌게 된다. => 반응형 웹을 쉽게 만들 수 있다(Container, row, column, 12 Grid)

Columns

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        
    </style>
</head>
<body>
    <div class="container text-center">
        <div class="row align-items-start">
          <div class="col">
            One of three columns
          </div>
          <div class="col">
            One of three columns
          </div>
          <div class="col">
            One of three columns
          </div>
        </div>
        <div class="row align-items-center">
          <div class="col">
            One of three columns
          </div>
          <div class="col">
            One of three columns
          </div>
          <div class="col">
            One of three columns
          </div>
        </div>
        <div class="row align-items-end">
          <div class="col">
            One of three columns
          </div>
          <div class="col">
            One of three columns
          </div>
          <div class="col">
            One of three columns
          </div>
        </div>
      </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

column을 어떻게 배치하냐에 대한 css의 FLEX와 같다고 할 수 있다. align-items와 align-self, justify-content를 통해 배치할 수 있다. 위의 코드의 결과는 밑의 그림과 같다.

Gutter

쉽게 말하자면 12 그리드에 간격을 주는 것이다.
gx는 열과 열을 즉, x측 뜻하고, gy는 y축을 뜻한다. gutter를 지정해주지 않으면, 기본적으로 간격을 지정해준다. g는 x축과 y축을 한번에 간격을 지정해주겠다는 뜻이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container overflow-hidden 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>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

위의 코드를 작성하면 밑과 같은 결과를 볼 수 있다.

Untility

display

어떤 컨텐츠를 특정 breakpoints에서 숨길 수 있는 기능들을 사용할 수 있다.

flexbox

보통 하나의 컨테이너와 여러개의 아이템으로 구성되어 배치한다.

margin vs padding


Padding은 Content와 Border 사이의 여백을 나타낸는 영역이다.
Margin은 Border 바깥쪽을 차지한다. 주변 요소와 거리를 두기 위한 영역이다.

visibility

Z-index

컨텐츠를 위로 띄워주는 역할을 한다. ex) modal, sticky 등등

CSS grid

flex box는 1차원적이라면, CSS grid는 2차원적으로 레이아웃을 구현할 수 있다. 생각보다 잘 안씀

profile
Kim sejin
이전 포스트

CSS flexbox

0개의 댓글