# 부트스트랩(Bootstrap) 공백(Spacing) 주기 


- M/P 의 의미

       - M : Margin을 의미

       - P : Padding을 의미


- t , b , l , r ,x , y  의 의미

       - t : top을 의미 

       - b : bottom을 의미

       - l : left을 의미

       - r : 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의 자동으로 세팅


- 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의 자동으로 세팅


- 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) 크기


# 테스트 코드 

 <div class="container">
        <!-- 수평선 긋기 -->
        <hr class="my-2">
        <div class="bg-secondary">margin 테스트</div>
        <div class="m-1 bg-warning"> m-1 => top, bottom, left, right에 .25rem 만큼 margin </div>
        <div class="m-3 bg-primary"> m-3 => top, bottom, left, right에 1rem 만큼 margin </div>
        <div class="m-5 bg-danger"> m-5 => top, bottom, left, right에 3rem 만큼 margin </div>

        <!-- 수평선 긋기 -->
        <hr class="my-2">
        <div class="bg-secondary">margin X,Y 테스트</div>
        <div class="mx-3 bg-primary"> m-3 => left, right에 1rem 만큼 margin </div>
        <div class="my-3 bg-danger"> m-3 => top, bottom에 1rem 만큼 margin </div>
        
        <!-- 수평선 긋기 -->
        <hr class="my-2">
        <div class="bg-secondary">padding 테스트</div>
        <div class="p-1 bg-warning"> p-1 => top, bottom, left, right에 .25rem 만큼 padding </div>
        <div class="p-3 bg-primary"> p-3 => top, bottom, left, right에 1rem 만큼 padding </div>
        <div class="p-5 bg-danger"> p-5 => top, bottom, left, right에 3rem 만큼 padding </div>

        <!-- 수평선 긋기 -->
        <hr class="my-2">
        <div class="bg-secondary">padding X ,Y 테스트</div>
        <div class="px-3 bg-danger"> px-3 => left, right에 1rem 만큼 padding  </div>
        <div class="py-3 bg-primary"> px-3 => top, bottom에 1rem 만큼 padding </div>
        
        <!-- 수평선 긋기 -->
        <hr class="my-2">
    </div>

# 결과화면 


# 전체코드

...더보기

<!doctype html>

<html lang="ko">

 

<head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

 

    <title>Hello, world!</title>

</head>

 

<body>

    <!-- bootstrap의 container을 사용 -->

    <div class="container">

        <!-- 수평선 긋기 -->

        <hr class="my-2">

        <div class="bg-secondary">margin 테스트</div>

        <div class="m-1 bg-warning"> m-1 => top, bottom, left, right에 .25rem 만큼 margin </div>

        <div class="m-3 bg-primary"> m-3 => top, bottom, left, right에 1rem 만큼 margin </div>

        <div class="m-5 bg-danger"> m-5 => top, bottom, left, right에 3rem 만큼 margin </div>

 

        <!-- 수평선 긋기 -->

        <hr class="my-2">

        <div class="bg-secondary">margin X,Y 테스트</div>

        <div class="mx-3 bg-primary"> m-3 => left, right에 1rem 만큼 margin </div>

        <div class="my-3 bg-danger"> m-3 => top, bottom에 1rem 만큼 margin </div>

        

        <!-- 수평선 긋기 -->

        <hr class="my-2">

        <div class="bg-secondary">padding 테스트</div>

        <div class="p-1 bg-warning"> p-1 => top, bottom, left, right에 .25rem 만큼 padding </div>

        <div class="p-3 bg-primary"> p-3 => top, bottom, left, right에 1rem 만큼 padding </div>

        <div class="p-5 bg-danger"> p-5 => top, bottom, left, right에 3rem 만큼 padding </div>

 

        <!-- 수평선 긋기 -->

        <hr class="my-2">

        <div class="bg-secondary">padding X ,Y 테스트</div>

        <div class="px-3 bg-danger"> px-3 => left, right에 1rem 만큼 padding  </div>

        <div class="py-3 bg-primary"> px-3 => top, bottom에 1rem 만큼 padding </div>

        

        <!-- 수평선 긋기 -->

        <hr class="my-2">

    </div>

 

    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"

        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"

        crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"

        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"

        crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"

        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"

        crossorigin="anonymous"></script>

</body>

 

</html>

블로그 이미지

미나미나미

,