bootstrap - 공백(Spacing) 주는 법

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