개요
reactstrap에서 className 속성을 통해 Bootstrap의 다양한 스타일을 적용할 수 있는데, 기존 템플릿 코드롤 보면서 이게 뭘까 하는게 많았는데 깔끔하게 속성들을 정리해보고 가자.
1. 레이아웃
| 이름 |
설명 |
| container |
고정 폭 컨테이너 |
| container-fluid |
전체 너비를 차지하는 컨테이너 |
| row |
Flexbox 행 생성 |
| col |
자동 크기 조정 열 |
| col-{size}-n |
특정 크기(sm, md, lg, xl, xxl)에서 n만큼 너비를 차지 |
| d-flex |
Flexbox 컨테이너 활성화 |
| d-inline-flex |
인라인 Flexbox 컨테이너 |
| d-block |
블록 요소 표시 |
| d-inline |
인라인 요소로 표시 |
| d-none |
숨김 처리 |
2, Flexbox 관련
| 이름 |
설명 |
| flex-row |
주축을 가로 방향(기본값)으로 설정 |
| flex-column |
주축을 세로 방향으로 설정 |
| justify-content-start |
왼쪽 정렬(기본값) |
| justify-content-center |
가운데 정렬 |
| jsutify-content-end |
오른쪽 정렬 |
| justify-content-between |
아이템 간 간격을 균등하게 배치 |
| justify-content-around |
아이템 주변 간격을 균등하게 배치 |
| align-items-start |
아이템을 위쪽 정렬 |
| align-items-center |
아이템을 가운데 정렬 |
| align-items-end |
아이템을 아래쪽 정렬 |
3. 여백 및 패딩 관련
| 이름 |
설명 |
| m-{size} |
외부 여백 (size: 0~5, auto) |
| mt-{size} |
위쪽 여백 |
| mb-{size} |
아래쪽 여백 |
| ml-{size} |
왼쪽 여백 |
| mr-{size} |
오른쪽 여백 |
| mx-{size} |
좌우 여백 |
| my-{size} |
상하 여백 |
| p-{size} |
내부 패딩 |
| pt-{size} |
위쪽 패딩 |
| pb-{size} |
아래쪽 패딩 |
| pl-{size} |
왼쪽 패딩 |
| pr-{size} |
오른쪽 패딩 |
| px-{size} |
좌우 패딩 |
| py-{size} |
상하 패딩 |
4. 반응형
| 이름 |
설명 |
| w-100 |
너비 100% |
| h-100 |
높이 100% |
| mw-100 |
최대 너비 100% |
| mh-100 |
최대 높이 100% |
| vh-100 |
뷰포트 높이 100% |
| vw-100 |
뷰포트 너비 100% |
