부트스트랩의 브레이크포인트
- xs (초소형): <576px
- sm (소형): ≥576px
- md (중형): ≥768px
- lg (대형): ≥992px
- xl (초대형): ≥1200px
- xxl (초대형): ≥1400px
A
align-items-center
- align-items-center: Flexbox 유틸리티 클래스 중 하나로, Flex 컨테이너 안의 아이템들을 수직 방향으로 중앙에 정렬합니다.
B
bg-body:
- Bootstrap의 배경색 유틸리티 클래스 중 하나로, 요소의 배경색을 기본 본문 색상으로 설정합니다.
btn:
- Bootstrap의 버튼 스타일을 적용하는 기본 클래스입니다.
- 이 클래스를 추가하면 해당 요소가 기본 버튼 스타일을 따릅니다.
btn-md:
- Bootstrap에서는 btn-sm, btn-md, btn-lg와 같은 크기 관련 클래스는 제공하지 않습니다.
- 대신, Bootstrap에는 btn-lg와 btn-sm가 있으며, 기본 크기는 btn 클래스만 사용하여 설정됩니다.
- 따라서 btn-md는 커스텀 클래스일 가능성이 높습니다. 이를 사용하려면 추가적인 CSS 정의가 필요합니다.
C
card:
- Bootstrap의 카드 컴포넌트를 정의하는 기본 클래스입니다.
- 카드 컴포넌트는 내용과 이미지를 포함하는 컨테이너로, 기본 스타일을 적용합니다.
col:
- Bootstrap의 그리드 시스템 클래스로, 컬럼을 나타냅니다.
- 이 클래스를 사용하면 그리드 레이아웃을 구성할 수 있습니다.
col-md-4
- col: Bootstrap의 그리드 시스템 클래스로, 컬럼을 나타냅니다.
- md: 미디엄 디바이스를 의미하며, 화면 너비가 768px 이상일 때 적용됩니다.
- 4: 12열 그리드 시스템에서 4열을 차지함을 의미합니다. 즉, 한 행(row)에서 총 12열 중 4열을 차지합니다.
collapse:
- 부트스트랩의 collapse 컴포넌트를 나타내는 클래스입니다.
- 이 클래스는 특정 요소를 확장하거나 축소할 수 있게 해줍니다.
- 주로 토글 버튼과 함께 사용되어 클릭 시 요소를 보이거나 숨길 수 있게 합니다.
col-sm-2:
- col-sm-2: 화면 크기가 small 이상일 때(576px 이상) 이 컬럼의 너비를 12컬럼 중 2컬럼으로 설정합니다.
container-fluid:
- 부트스트랩의 컨테이너 클래스 중 하나입니다.
- 페이지의 전체 너비를 차지하는 컨테이너를 만듭니다.
- container 클래스와 달리, container-fluid는 고정된 폭이 아닌, 뷰포트의 너비를 100% 차지합니다.
- 모든 뷰포트 크기에서 좌우 패딩이 일정하게 유지됩니다.
D
d-flex
- d-flex: Bootstrap의 디스플레이 유틸리티 클래스 중 하나로, Flexbox 레이아웃을 활성화합니다. 이 클래스는 해당 요소를 Flex 컨테이너로 만들어, 그 자식 요소들이 Flexbox 레이아웃 규칙을 따르도록 합니다.
d-lg-block:
- Bootstrap의 디스플레이 유틸리티 클래스 중 하나로, 요소를 큰 화면에서 블록 요소로 표시합니다.
- lg는 화면 크기 브레이크포인트를 나타내며, 넓이가 992px 이상일 때 적용됩니다.
- block은 요소를 블록 디스플레이로 설정하여 해당 크기 이상에서 요소가 표시되도록 합니다.
d-none:
- Bootstrap의 디스플레이 유틸리티 클래스 중 하나로, 요소를 화면에서 숨깁니다.
- display: none; 스타일을 적용하여 해당 요소를 모든 화면 크기에서 숨깁니다.
E
F
flex-column:
- Flexbox 컨테이너의 방향을 세로(column)로 설정합니다.
- flex-direction: column; 속성과 동일합니다.
- 즉, 자식 요소들이 위에서 아래로 세로 방향으로 정렬됩니다.
flex-grow-1:
- 이 클래스는 요소의 flex-grow 속성을 1로 설정합니다.
- flex-grow 속성은 Flexbox 컨테이너 내에서 요소가 차지할 수 있는 공간의 비율을 지정합니다.
- flex-grow: 1;은 요소가 남은 공간을 나눠 가지도록 설정합니다.
G
g-0:
- Bootstrap 5에서 추가된 유틸리티 클래스 중 하나로, 컬럼 간의 간격(gutter)을 설정하는 클래스입니다.
- g-0은 모든 방향에서 간격을 0으로 설정합니다. 즉, 행 내부의 모든 컬럼 간의 여백이 없게 됩니다.
H
I
J
justify-content-center
- justify-content-center: Flexbox 유틸리티 클래스 중 하나로, Flex 컨테이너 안의 아이템들을 수평 방향으로 중앙에 정렬합니다.
K
L
lead
- Bootstrap의 텍스트 유틸리티 클래스 중 하나로, 요소의 텍스트를 크고 가독성 좋게 설정합니다. 일반적인 단락보다 더 강조된 텍스트를 만들 때 사용합니다.
M
m-1:
- 부트스트랩의 마진 유틸리티 클래스입니다.
- m은 마진(margin)을 의미하며, -1은 해당 요소의 모든 방향에 기본 크기(0.25rem = 4px)의 마진을 적용합니다.
- 이 클래스는 요소의 모든 방향에 4px의 마진을 추가하여 각 항목 사이에 간격을 만듭니다.
mb-3:
- Bootstrap의 마진 유틸리티 클래스 중 하나로, 하단에 3단위의 마진을 추가합니다.
min-vh-100:
- 요소의 최소 높이를 뷰포트(viewport) 높이의 100%로 설정합니다.
- min-height: 100vh; 속성과 동일합니다.
- 뷰포트 높이는 브라우저 창의 높이를 의미합니다.
ms-auto:
- 부트스트랩 5에서 제공하는 마진 유틸리티 클래스입니다.
- ms는 'margin-start'를 의미하며, 이는 왼쪽 마진을 설정하는 클래스입니다. (RTL 언어 지원을 위한 방향 의존적 마진)
- ms-auto는 margin-left: auto;와 동일하게 작동하여 요소를 가능한 왼쪽으로 밀어넣습니다.
- 이 클래스를 사용하면 해당 요소가 오른쪽 정렬됩니다.
mt-3:
- Bootstrap의 마진 유틸리티 클래스 중 하나로, 상단에 3단위(보통 1단위는 기본 여백의 0.25배)의 마진을 추가합니다.
N
navbar:
- 네비게이션 바 컴포넌트임을 나타내는 기본 클래스입니다.
- 네비게이션 바의 기본 스타일을 설정합니다.
navbar-collapse:
- 네비게이션 바에서 사용되는 collapse 컴포넌트를 지정하는 클래스입니다.
- 이 클래스는 네비게이션 바의 아이템들을 포함하는 요소에 적용되어, 화면 크기에 따라 네비게이션 아이템들이 보이거나 숨겨지게 합니다.
navbar-dark:
- 네비게이션 바의 텍스트 색상을 어두운 배경에 맞게 밝게 설정합니다.
- 기본적으로 링크와 텍스트 색상이 밝은 색으로 설정됩니다.
navbar-expand-lg:
- 네비게이션 바가 특정 화면 크기 이상에서 확장되는지 여부를 설정합니다.
- lg는 'large'의 약자로, 큰 화면(대략 992px 이상)에서 네비게이션 바가 수평으로 확장되도록 설정합니다.
- 작은 화면에서는 네비게이션 바가 수직으로 축소됩니다.
nav-item:
- 부트스트랩 네비게이션 바 내의 항목을 나타내는 클래스입니다.
- 주로 li 요소에 적용되며, 네비게이션 링크들을 포함하는 li 요소를 스타일링합니다.
- nav-item 클래스는 네비게이션 항목을 일관된 스타일로 렌더링하도록 도와줍니다.
navbar-nav:
- 부트스트랩의 네비게이션 바 내의 항목들을 그룹화하는 클래스입니다.
- 주로 ul 요소에 적용되며, 네비게이션 항목(li 요소)들을 포함합니다.
- 네비게이션 바의 링크들을 스타일링합니다.
O
P
p-3:
- Bootstrap의 패딩 유틸리티 클래스 중 하나로, 모든 면에 3단위의 패딩을 추가합니다.
py-3:
- 부트스트랩 유틸리티 클래스 중 하나로, 요소의 상하 패딩(padding-y)을 설정합니다.
- py-3는 상하 패딩을 .75rem로 설정합니다. (1rem = 16px 기준으로 약 12px)
Q
R
rounded:
- Bootstrap의 테두리 유틸리티 클래스 중 하나로, 요소의 모서리를 둥글게 만듭니다.
row:
- Bootstrap의 그리드 시스템에서 행(row)을 정의하는 클래스입니다.
- 행은 하나 이상의 컬럼(col)을 포함하며, 그리드를 구성하는 기본 요소입니다.
- 행 내부의 컬럼은 col 클래스를 사용하여 정의됩니다.
S
shadow:
- Bootstrap의 그림자 유틸리티 클래스 중 하나로, 기본 그림자 효과를 추가합니다.
- 이 클래스는 요소에 그림자를 추가하여 입체감을 줍니다.
T
text-white:
- Bootstrap의 텍스트 유틸리티 클래스 중 하나로, 텍스트 색상을 흰색으로 설정합니다.
U
V
W
X
Y
Z
카페 게시글
검색이 허용된 게시물입니다.
CSS
bootstrap
bootstrap class 정리
주인장
추천 0
조회 38
24.06.26 22:52
댓글 0
다음검색