Bootstrap4 알아보기#1 _ container 속성

Bootstrap

• Bootstrap은 빠르고 쉬운 웹 개발을 위한 무료 프런트 엔드 프레임워크입니다.
• Bootstrap은 반응형 디자인을 쉽게 만들 수 있는 기능도 제공합니다!

Bootstrap의 장점

• 사용하기 쉬움: HTML 및 CSS에 대한 기본 지식만 있으면 누구나 Bootstrap 사용을 시작할 수 있습니다.
• 반응형 기능: Bootstrap의 반응형 CSS는 휴대폰, 태블릿 및 데스크탑에 맞게 조정됩니다.
• 모바일 우선 접근 방식: Bootstrap에서 모바일 우선 스타일은 핵심 프레임워크의 일부입니다.
• 브라우저 호환성: Bootstrap 4는 모든 최신 브라우저(Chrome, Firefox, Internet Explorer 10+, Edge, Safari 및 Opera)와 호환됩니다.
  ㄴ 출처 : https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp

Bootstrap은 모바일 우선이어서 모바일에 장치에 반응하도록 설계되어있습니다. 

<meta name="viewport" content="width=device-width, initial-scale=1">

Bootstrap은  컨테이너의 개념을 사용합니다. 

• .container클래스는 응답성이 뛰어난 고정 너비 컨테이너를 제공
• .container-fluid클래스는 뷰포트의 전체 너비에 걸쳐 있는 전체 너비 컨테이너를 제공

container 클래스는 기본적으로 15px의 왼쪽 및 오른쪽 패딩이 있으며 상단 또는 하단 패딩은 없다.

 - 상단 또는 하단 패딩을 주고 싶다면 아래 규칙을 참조해서 옵션을 주면 된다. 

padding을 top방향으로 16px 만큼.
<div class="container pt-3"></div>

※속성은 다음 중 하나입니다.
m- 세트margin
p- 세트padding

※여기서 side는 다음 중 하나입니다.
t- 세트 margin-top또는padding-top
b- 세트 margin-bottom또는padding-bottom
l- 세트 margin-left또는padding-left
r- 세트 margin-right또는padding-right
x- padding-left및 padding-right또는 margin-left및 둘 다 설정margin-right
y- padding-top및 padding-bottom또는 margin-top및 둘 다 설정margin-bottom
공백 - 요소의 4면 모두에 margin또는를 설정합니다.padding

※크기는 다음 중 하나입니다.
0- 세트 margin또는padding0
1- margin또는 (글꼴 크기가 16px인 경우 4px) padding로 설정.25rem
2- margin또는 (글꼴 크기가 16px인 경우 8px) padding로 설정.5rem
3- margin또는 (글꼴 크기가 16px인 경우 16px) padding로 설정1rem
4- margin또는 (글꼴 크기가 16px인 경우 24px) padding로 설정1.5rem
5- margin또는 (글꼴 크기가 16px인 경우 48px) padding로 설정3rem
auto- margin자동으로 설정

container 클래스에 다양한 옵션 사용도 가능하다. 

<div class="container p-3 my-3 bg-dark text-white"></div>