[CSS]부트스트랩 클래스 살펴보기

[bootstrap.css엔 무엇이 있을까?]

-> bootstrap.css파일을 열어보면 각종 클래스들이 정리되어 있음을 알 수 있다.

 

 

[bootstrap.css 클래스를 사용해야하는 이유?]

 

button에 패딩을 넣는 3가지 방법

 

1번

        <style>
            #one{padding:4px;}
        </style>

        <button id="one"> 

 

2번

        <button style="padding:4px">

 

3번 -> 부트스트랩의 class를 사용! rem으로 크기를 설정하기 때문에 확대해도 깨지지 않는다는 장점이 있다. 

	<button class="p-1">

 

        

 

[bootstrap.css 약어]

  .mr-sm-n3,
  .mx-sm-n3 {
    margin-right: -1rem !important;
  }
  .mb-sm-n3,
  .my-sm-n3 {
    margin-bottom: -1rem !important;
  }

┖위의 bootstrap.css 내 적혀진 클래스명을 보면 저게 뭔 소리야..? 하는 의문이 든다. 따라서 약어를 정리해보았다.

 

 

[bootstrap 약어 정리]

css폴더의 bootstrap.css 파일을 보고 ctrl+f로 각 class 검색해서 보기

 

n이 들어간건 negative

1 +0.25rem (4px)

2 +0.5rem (8px)

3 +1rem (16px)

4 +1.5rem (24px)

5 +3rem (48px)

n1 -0.25rem (4px)

n2 -0.5rem (8px)

n3 -1rem (16px)

n4 -1.5rem (24px)

n5 -3rem (48px)

 

p - padding

m - margin

r-right

l - left

t-top

b-bottom

x-left/right

y-top/bottom

 

sm>=576

md>=768

lg>=992

xl>=120

border - 경계선 

d - display

bg - background

d-inline : display inline

ml - margin left

mb - margin bottom

sucess-녹색

info -하늘색

warning - 주황색

danger -빨강색

light - 밝은 회색

dark - 어두운 회색

secondary - 회색

primary - 하늘

 

!important 최우선으로 적용하겠다

 

퀴즈) 아래 클래스보며 제대로 약어 숙지했는 지 check해보기!

.mt-sm-0 : margin top을 sm이상 영역에서는 0으로 하겠다. 

.mx-sm-0 : margin x(left/right)을 sm이상 영역에서는 0으로 하겠다.

.mb-sm-2 : margin bottom을 sm이상 영역에서는 2단계로 하겠다. 즉 0.5rem

.my-n3 : margin y(top/bottom)을 negative 3단계 적용하겠다. 즉 -1rem

 

 

[마이너스 margin은 무슨의미?]

아래 그림은 margin이 0일때, 10일때 -10일때를 보여준다.