[CSS/bootstrap] 배치 정리

자주 헷갈리는 배치(container, grid, width, height, margin, padding) 정리

 

container

• container: 너비 고정 (양 옆 여백 존재), 화면 크기에 따라 max-width 바뀜.
• container-fluid: width는 항상 100% 고정 (여백 x)

 

 

grid

• col-(sm/md/lg/xl)-(offset)-(1~12)
  • 한 row의 전체 넓이는 12로 둠.
  • sm : 576px 이상의 스크린 (모바일)
  • md : 768px 이상의 스크린 (태블릿)
  • lg : 992px 이상의 스크린 (작은 데스크탑)
  • xl : 1200px 이상의 스크린 (큰 데스크탑)
  • offset: 좌측에 offset-숫자 만큼의 여백(margin)

 

 

 

width & height

• w-(%): width + 너비 퍼센트
  • ex) w-25 는 전체 너비의 1/4 차지.
• h-(%): height + 높이 퍼센트

 

 

 

margin & padding

• m: margin

• p: padding

• t / b / l / r : 순서대로 top, bottom, left, right

• x: left & right

• y: top & bottom

• 실제 사용 예시: mt-3 (margin top: 3), px-1 (padding left&right: 1)

 

 

 

content  중앙 정렬

• 수평 중앙 정렬
  • display: block 설정 후 mx-auto.
  • 부모의 w 또는 mw(max-width) 값 설정 필수!

 

• 수직 중앙 정렬도 마찬가지로 부모 h/mh 설정하고 my-auto.