Contents
margin 관련 키워드margin 관련 키워드
- m: 마진 전체
m-0: 마진 0m-1: 마진 0.25rem (4px)m-2: 마진 0.5rem (8px)m-3: 마진 1rem (16px)m-4: 마진 1.5rem (24px)m-5: 마진 3rem (48px)m-auto: 마진 자동 (주로 중앙 정렬에 사용)
- mt: 상단 마진
mt-0,mt-1,mt-2,mt-3,mt-4,mt-5,mt-auto
- mb: 하단 마진
mb-0,mb-1,mb-2,mb-3,mb-4,mb-5,mb-auto
- ms: 좌측 마진 (왼쪽)
ms-0,ms-1,ms-2,ms-3,ms-4,ms-5,ms-auto
- me: 우측 마진 (오른쪽)
me-0,me-1,me-2,me-3,me-4,me-5,me-auto
- mx: 좌우 마진 (수평)
mx-0,mx-1,mx-2,mx-3,mx-4,mx-5,mx-auto
- my: 상하 마진 (수직)
my-0,my-1,my-2,my-3,my-4,my-5,my-auto
각 키워드 뒤에 숫자를 붙여서 마진의 크기를 조절할 수 있으며,
0부터 5까지의 값이 있으며, 각 값은 다음과 같은 크기를 의미합니다: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: 요소를 마지막으로 정렬.
Share article