[Bootstrap] 부트스트랩(Bootstrap) 공백(Spacing) 주기 (mt , mb, ml, mr, mx, my, pt, pb, pl, pr, px, py)
[Bootstrap] 2019. 10. 20. 01:10# 부트스트랩(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>
'[Bootstrap]' 카테고리의 다른 글
| [Bootstrap Table] bootstrapTable Html로 생성하기 (0) | 2019.12.13 |
|---|---|
| [BOOTSTRAP] nav 왼쪽, 가운데, 끝 정렬 하기(justify-content-* 사용하기: start, end, center, between, around) (0) | 2019.10.20 |
| [Bootstrap] nav 사용법 알아보기 (0) | 2019.10.20 |
| [Bootstrap] 점보트론(jumbotron) 사용하기 (jumbotron, jumbotron-fluid, container, container-fluid) (0) | 2019.10.20 |
| [Bootstrap] 부트스트랩(Bootstrap) Display (0) | 2019.10.20 |
미나미나미