BootStrap 키워드 간단 정리

margin 관련 키워드

1. m: 마진 전체
• m-0: 마진 0
• m-1: 마진 0.25rem (4px)
• m-2: 마진 0.5rem (8px)
• m-3: 마진 1rem (16px)
• m-4: 마진 1.5rem (24px)
• m-5: 마진 3rem (48px)
• m-auto: 마진 자동 (주로 중앙 정렬에 사용)

2. mt: 상단 마진
• mt-0, mt-1, mt-2, mt-3, mt-4, mt-5, mt-auto

3. mb: 하단 마진
• mb-0, mb-1, mb-2, mb-3, mb-4, mb-5, mb-auto

4. ms: 좌측 마진 (왼쪽)
• ms-0, ms-1, ms-2, ms-3, ms-4, ms-5, ms-auto

5. me: 우측 마진 (오른쪽)
• me-0, me-1, me-2, me-3, me-4, me-5, me-auto

6. mx: 좌우 마진 (수평)
• mx-0, mx-1, mx-2, mx-3, mx-4, mx-5, mx-auto

7. my: 상하 마진 (수직)
• my-0, my-1, my-2, my-3, my-4, my-5, my-auto

• 0: 0

• 1: 0.25rem (4px)

• 2: 0.5rem (8px)

• 3: 1rem (16px)

• 4: 1.5rem (24px)

• 5: 3rem (48px)

• auto: 자동

Flexbox 컨테이너 만들기

• d-flex: 요소를 Flexbox 컨테이너로 설정합니다.

• d-inline-flex: 요소를 인라인 Flexbox 컨테이너로 설정합니다.

Flex 방향 설정 (Flex Direction)

• flex-row: 요소들을 가로 방향으로 정렬 (기본값).

• flex-row-reverse: 요소들을 가로 방향으로 반대로 정렬.

• flex-column: 요소들을 세로 방향으로 정렬.

• flex-column-reverse: 요소들을 세로 방향으로 반대로 정렬.

Flex 정렬 설정 (Alignment)

수평 정렬 (Justify Content)

• justify-content-start: 요소들을 왼쪽으로 정렬.

• justify-content-end: 요소들을 오른쪽으로 정렬.

• justify-content-center: 요소들을 가운데로 정렬.

• justify-content-between: 요소들 사이에 동일한 간격을 두어 정렬.

• justify-content-around: 요소들 사이와 양쪽 끝에 동일한 간격을 두어 정렬.

• justify-content-evenly: 요소들 사이에 동일한 간격을 두어 정렬.

수직 정렬 (Align Items)

• align-items-start: 요소들을 위쪽으로 정렬.

• align-items-end: 요소들을 아래쪽으로 정렬.

• align-items-center: 요소들을 수직 가운데로 정렬.

• align-items-baseline: 요소들을 텍스트 베이스라인에 맞춰 정렬.

• align-items-stretch: 요소들을 컨테이너의 높이에 맞게 늘림.

개별 요소 정렬 (Align Self)

• align-self-start: 개별 요소를 위쪽으로 정렬.

• align-self-end: 개별 요소를 아래쪽으로 정렬.

• align-self-center: 개별 요소를 수직 가운데로 정렬.

• align-self-baseline: 개별 요소를 텍스트 베이스라인에 맞춰 정렬.

• align-self-stretch: 개별 요소를 컨테이너의 높이에 맞게 늘림.

Flex Wrap (아이템 줄 바꿈)

• flex-wrap: 요소들을 여러 줄로 나눔.

• flex-nowrap: 요소들을 한 줄로 유지 (기본값).

• flex-wrap-reverse: 요소들을 여러 줄로 반대로 나눔.

Flex Grow and Shrink (크기 조절)

• flex-grow-0: 요소가 성장하지 않음.

• flex-grow-1: 요소가 성장함.

• flex-shrink-0: 요소가 줄어들지 않음.

• flex-shrink-1: 요소가 줄어듦.

순서 조절 (Order)

• order-0, order-1, order-2, order-3, order-4, order-5: 요소의 순서를 조절.

• order-first: 요소를 첫 번째로 정렬.

• order-last: 요소를 마지막으로 정렬.