[Bootstrap] 부트스트랩 공백의 개념

---

오늘은 부트스트랩의 공백에 대해서 알아보자

---

 

bootstrap 의 공백(Spacing)

부트스트랩 기반 템플릿을 사용하던 도중 여러가지 클래스들을 만나게 되었다. py-1 라는 클래스가 궁금해서 시작된 포스팅 

Box model 박스모델

bootstrap의 공백의 자세한 클래스들을 알아가기 전에, 먼저 박스 모델부터 잠깐 살펴보도록 하자! 박스 모델은 HTML의 엘리먼트들은 (사각형 모양을 의미하는)박스의 형태를 가지고 있는 것을 말한다. 박스의 크기와 박스간의 간격을 정의하는 다양한 속성이 있다.

• margin : border를 기준으로 박스의 여백을 지정, 시각적인 요소는 없음
• border : 박스의 테두리
• padding : 테두리와 content간의 간격
• content : 엘리먼트 안에 포함되는 컨텐츠

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

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

 

 

 

---

출처: https://velog.io/@leyuri