반응형

부트스트랩은 어차피 CSS 기반으로 만들어진 걸 더욱 쉽게 사용하기 위해 만들어진 거라 CSS의 margin과 padding에 대한 이해만 있으면 쉽게 하실 수 있습니다. 또한 실력을 향상을 위해서는 공식문서를 읽어보시는 걸 추천드립니다.

 

https://getbootstrap.com/docs/5.0/utilities/spacing/#margin-and-padding

 

Spacing

Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.

getbootstrap.com

 

 

📝margin , padding

m margin
p padding

 

 

📝top , bottom , left , right ,x , y

t top
b bottom
s left
e right
x x축 → left , right
y y축 → 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 margin의 자동으로 세팅

 

 

📝사용 예시 (Margin)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

  <title>Document</title>
  <style>

    div{
      font-size:30px;
      font-weight: bold;
      color:white;
    }
  </style>

</head>
<body>
<div class="container">
    <div class="bg-warning text-danger text-center mb-5">부트스트랩 margin 예제</div>
  <div style="background-color:pink">
    <div class="m-3 bg-primary"> m-3 (전체)  </div>
    <div class="mx-3 bg-secondary"> mx-3 (x축) </div>
    <div class="ms-3 bg-secondary"> ms-3 (left) </div>
    <div class="me-3 bg-secondary"> me-3 (right) </div>

    <div class="my-3 bg-success"> my-3 (y축) </div>
    <div class="mb-3 bg-success"> mb-3 (bottom)</div>
    <div class="mt-3 bg-success"> mt-3 (top)</div>


    <div class="container" style="display: flex; flex-direction: column;">
      <div class ="bg-info m-auto">m-auto (중앙정렬)</div>
    </div>
  </div>
</div>

</body>
</html>

 

📝사용 예시 (Padding)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

  <title>Document</title>
  <style>

    div{
      font-size:30px;
      font-weight: bold;
      color:white;
    }
  </style>

</head>
<body>
<div class="container">

  <div class="bg-warning text-danger text-center mb-5">부트스트랩 padding 예제</div>
  <div style="background-color:pink">

    <div class="p-5 bg-primary mb-5"> p-5 </div>

    <div class="px-5 bg-secondary"> px-5 </div>
    <div class="ps-5 bg-success"> ps-5 </div>
    <div class="pe-5 bg-warning mb-5 text-end"> pe-5 </div>

    <div class="py-5 bg-secondary"> py-5 </div>
    <div class="pb-5 bg-success"> pb-5 </div>
    <div class="pt-5 bg-warning"> pt-5 </div>


  </div>

</div>

</body>
</html>

반응형

'[HTML && CSS] > [BootStrap]' 카테고리의 다른 글

[BootStrap5] 부트스트랩 container vs container-fluid  (0) 2021.06.24

티스토리툴바