bootstrap bootstrap class 정리

[주인장]

부트스트랩의 브레이크포인트

• xs (초소형): <576px
• sm (소형): ≥576px
• md (중형): ≥768px
• lg (대형): ≥992px
• xl (초대형): ≥1200px
• xxl (초대형): ≥1400px

A

active

• Bootstrap에서 요소를 활성화 상태로 표시하기 위한 유틸리티 클래스입니다.
• 버튼, 링크, 또는 네비게이션 항목과 같은 인터랙티브 요소에 적용하여 현재 선택된 상태임을 강조합니다.
• 활성화된 요소는 약간 어두운 배경색과 시각적인 눌림 효과가 기본적으로 적용됩니다.

alert

• Bootstrap의 구성 요소 중 하나로, 사용자에게 경고, 알림, 정보 메시지 등을 제공하는 데 사용됩니다. 다양한 색상 클래스(alert-primary, alert-success, alert-danger 등)를 통해 메시지의 성격을 명확히 표현할 수 있습니다. 닫기 버튼을 포함할 수도 있습니다.

align-items-center

• align-items-center: Flexbox 유틸리티 클래스 중 하나로, Flex 컨테이너 안의 아이템들을 수직 방향으로 중앙에 정렬합니다.

align-items-end

• Bootstrap의 Flexbox 유틸리티 클래스 중 하나로, Flex 컨테이너 내 요소들을 컨테이너의 세로 축(교차 축)의 끝쪽에 정렬합니다.
• CSS의 align-items: flex-end; 속성이 적용됩니다.
• 요소를 하단에 배치해야 하는 레이아웃을 구성할 때 사용됩니다.

align-self-center

• Bootstrap의 Flexbox 유틸리티 클래스 중 하나로, 특정 Flex 아이템을 컨테이너의 세로 축(교차 축)의 중앙에 정렬합니다.
• CSS의 align-self: center; 속성이 적용됩니다.
• 컨테이너 내의 다른 요소와는 독립적으로, 특정 요소의 위치를 중앙에 정렬할 때 사용됩니다.

B

badge

• Bootstrap의 구성 요소 중 하나로, 작은 크기의 시각적 표시를 제공하며 보통 숫자나 상태를 강조하는 데 사용됩니다. 기본적인 스타일 외에도 색상 클래스(badge-primary, badge-warning 등)를 적용할 수 있고, pill 클래스와 함께 사용하면 둥근 형태로 나타납니다.

bg-body:

• Bootstrap의 배경색 유틸리티 클래스 중 하나로, 요소의 배경색을 기본 본문 색상으로 설정합니다.

bg-gradient

• Bootstrap의 배경 유틸리티 클래스 중 하나로, 요소의 배경에 그라데이션 효과를 추가합니다.
  • 단독으로는 효과가 없으며, 다른 배경색 클래스(bg-primary, bg-success 등)와 함께 사용하여 색상에 그라데이션을 적용합니다.
  • CSS의 background-image: linear-gradient() 속성이 적용됩니다.
  • 시각적으로 더 세련되고 스타일리시한 UI를 만들고자 할 때 유용합니다.
  • 주로 카드, 배너, 버튼 등에 적용하여 디자인을 강화할 수 있습니다.

bg-light

• Bootstrap의 유틸리티 클래스 중 하나로, 요소의 배경색을 밝은 회색으로 설정합니다.
• CSS의 background-color: #f8f9fa; 속성이 적용됩니다.
• 밝은 테마의 섹션이나 콘텐츠를 강조하거나 구분할 때 주로 사용됩니다.

bg-opacity-75

• Bootstrap의 배경 유틸리티 클래스 중 하나로, 요소의 배경색 불투명도를 75%로 설정합니다.
• CSS의 opacity와 유사하지만, 배경색에만 적용되며 요소의 내용물에는 영향을 미치지 않습니다.
• bg-primary, bg-success 등과 함께 사용하여 배경색의 투명도를 조정할 수 있습니다.
• 다른 불투명도 클래스(bg-opacity-50, bg-opacity-25 등)와 함께 다양한 투명도를 설정할 수 있습니다.
• 배경색이 강조되지만, 완전히 불투명하지 않도록 설정할 때 유용합니다.

bg-primary

• Bootstrap의 배경색 유틸리티 클래스 중 하나로, 요소의 배경색을 기본(primary) 테마 색상으로 설정합니다.
  • 기본적으로 Bootstrap의 테마 색상 팔레트에서 파란색 계열로 설정되어 있으며, 사용자 정의가 가능하다면 primary 색상을 변경할 수 있습니다.
  • 텍스트가 배경색과 조화를 이루도록, 일반적으로 text-white와 함께 사용됩니다.
  • 다른 배경색 클래스(bg-secondary, bg-success, bg-danger 등)와 조합하여 상태나 강조점을 표현할 수 있습니다.
  • 버튼, 카드, 배너 등 강조해야 하는 UI 요소에 활용됩니다.

blockquote:

• Bootstrap의 구성 요소 중 하나로, 인용문을 스타일링하는 데 사용됩니다. <blockquote> 태그와 함께 사용하여 텍스트를 강조하고, 일반적으로 좌우 여백과 독특한 서체 스타일이 적용됩니다.
  • blockquote-footer 클래스와 함께 사용하면 인용문의 출처를 표시할 수 있습니다.
  • 인용문의 방향을 오른쪽으로 바꾸고 싶을 경우 text-end 클래스와 함께 사용할 수 있습니다.
  • 인용문을 시각적으로 구별하는 데 유용하며, 긴 텍스트를 읽기 쉽게 표현합니다.

border

• Bootstrap의 경계선(Border) 유틸리티 클래스 중 하나로, 요소에 기본 테두리를 추가합니다.
• CSS의 border: 1px solid;과 동일한 효과를 제공합니다.
• 기본적으로 테두리는 색상이 currentColor에 따라 설정됩니다.

border-primary

• Bootstrap의 테두리(Border) 유틸리티 클래스 중 하나로, 요소의 테두리를 기본(primary) 테마 색상으로 설정합니다.
• CSS의 border-color: var(--bs-primary);와 동일한 효과를 제공합니다.
• 다른 테두리 클래스(border, border-top, border-1 등)와 조합하여 특정 위치, 두께, 모양 등을 세부적으로 조정할 수 있습니다.

border-top

• Bootstrap의 테두리(Border) 유틸리티 클래스 중 하나로, 요소의 위쪽에만 테두리를 추가합니다.
• CSS의 border-top: 1px solid;과 동일한 효과를 제공합니다.
• 테두리의 색상은 기본적으로 currentColor에 따라 설정되며, 다른 색상 클래스를 추가하여 변경할 수 있습니다.

btn

• Bootstrap의 버튼(Button) 유틸리티 클래스 중 하나로, 요소를 클릭 가능한 버튼으로 스타일링합니다.
• CSS의 display: inline-block;과 함께 다양한 버튼 스타일, 간격, 크기 등이 기본적으로 설정됩니다.
• 버튼에 다양한 색상, 크기, 모양 옵션을 추가하여 사용자 인터페이스(UI)를 구축할 때 사용됩니다.

btn-group

• Bootstrap의 버튼 그룹(Button Group) 유틸리티 클래스 중 하나로, 여러 버튼을 수평으로 정렬된 그룹으로 묶습니다.
• CSS의 display: inline-flex; 속성을 사용하여 버튼들을 나란히 배치하며, 각 버튼 간의 간격은 제거되어 시각적으로 하나의 그룹처럼 보이게 합니다.
• 주로 버튼 간의 관계를 나타내거나 그룹화된 작업을 제공할 때 사용됩니다.

btn-md:

• Bootstrap에서는 btn-sm, btn-md, btn-lg와 같은 크기 관련 클래스는 제공하지 않습니다.
• 대신, Bootstrap에는 btn-lg와 btn-sm가 있으며, 기본 크기는 btn 클래스만 사용하여 설정됩니다.
• 따라서 btn-md는 커스텀 클래스일 가능성이 높습니다. 이를 사용하려면 추가적인 CSS 정의가 필요합니다.

btn-outline-primary

• Bootstrap의 버튼 유틸리티 클래스 중 하나로, 버튼의 테두리를 기본(primary) 테마 색상으로 설정하며, 배경색은 투명하게 유지합니다.
• 버튼의 텍스트와 테두리는 기본 테마 색상(보통 파란색 계열)으로 표시되며, 호버 또는 포커스 시 배경색이 테마 색상으로 채워지는 효과가 있습니다.
• 깔끔하고 가벼운 버튼 스타일을 구현할 때 사용됩니다.

btn-primary

• Bootstrap의 버튼(Button) 유틸리티 클래스 중 하나로, 버튼의 색상을 기본(primary) 테마 색상으로 설정합니다.
• 기본적으로 파란색 계열의 배경색과 흰색 텍스트가 적용되며, 테마 설정에 따라 색상을 커스터마이징할 수 있습니다.
• 버튼의 상태에 따라 호버, 포커스, 활성화 시 약간의 색상 변화 효과가 포함됩니다.

btn-toolbar

• Bootstrap의 유틸리티 클래스 중 하나로, 여러 버튼 그룹을 툴바 형태로 정렬합니다.
• CSS의 display: flex; 속성을 사용하여 버튼 그룹들을 수평 또는 수직으로 배치하며, 간격 조정을 통해 직관적인 레이아웃을 제공합니다.
• 버튼 그룹 간의 간격을 조정하려면 gap-{n} 클래스를 사용할 수 있습니다.
• 주로 복합적인 버튼 동작 세트를 구성할 때 사용됩니다.

C

card:

• Bootstrap의 카드 컴포넌트를 정의하는 기본 클래스입니다.
• Bootstrap의 구성 요소 중 하나로, 다양한 콘텐츠(텍스트, 이미지, 버튼 등)를 포함하는 박스를 생성하는 데 사용됩니다. card-header, card-body, card-footer 같은 서브 클래스와 함께 세부적인 구성을 정의할 수 있습니다.

card-body

• Bootstrap의 컴포넌트 클래스 중 하나로, 카드(card) 컴포넌트의 콘텐츠 영역을 정의합니다.
• CSS의 padding 속성이 적용되어 내부 여백이 설정됩니다.
• 카드 내부의 텍스트, 이미지, 버튼 등 주요 콘텐츠를 포함하며, 카드를 구조적으로 구분할 때 사용됩니다.

card-footer

• Bootstrap의 컴포넌트 클래스 중 하나로, 카드(card) 컴포넌트의 하단에 추가 정보를 표시하는 푸터 영역을 정의합니다.
• CSS의 스타일링으로 여백, 배경색, 텍스트 정렬 등이 적용됩니다.
• 카드의 요약, 부가 설명, 또는 액션 버튼 등을 배치할 때 사용됩니다.

card-header

• Bootstrap의 컴포넌트 클래스 중 하나로, 카드(card) 컴포넌트의 상단에 제목이나 정보를 표시하는 헤더 영역을 정의합니다.
• CSS의 스타일링으로 여백, 배경색, 텍스트 정렬 등이 적용됩니다.
• 카드를 구분하거나 중요한 정보를 강조할 때 사용됩니다.

card-img-top

• Bootstrap의 컴포넌트 클래스 중 하나로, 카드(card) 컴포넌트의 상단에 이미지를 배치하는 데 사용됩니다.
• CSS의 width: 100%; 속성이 적용되어 이미지가 카드의 너비에 맞게 자동 조정됩니다.
• 카드의 헤더 역할을 하며, 주요 시각적 콘텐츠를 강조할 때 사용됩니다.

card-text

• Bootstrap의 컴포넌트 클래스 중 하나로, 카드(card) 컴포넌트에서 본문 텍스트를 표시하는 데 사용됩니다.
• 일반적인 텍스트 콘텐츠에 적절한 여백과 폰트 스타일이 적용됩니다.
• 카드 내에서 부가 설명이나 상세 내용을 추가할 때 사용됩니다.

card-title

• Bootstrap의 컴포넌트 클래스 중 하나로, 카드(card) 컴포넌트에서 제목을 표시하는 데 사용됩니다.
• 일반적으로 <h*> 태그와 함께 사용되며, CSS 스타일링으로 적절한 여백과 폰트 크기가 적용됩니다.
• 카드 내에서 제목을 강조하거나 구조를 명확히 할 때 사용됩니다.

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

• Bootstrap의 레이아웃 유틸리티 클래스 중 하나로, 콘텐츠를 정렬하고 레이아웃을 중앙에 배치하기 위한 기본 래퍼(wrapper) 역할을 합니다.
  • 반응형 그리드 시스템의 기본 요소로, 화면 크기에 따라 너비가 동적으로 조정됩니다.
  • 종류:
    • .container: 고정된 폭을 가지며, 각 뷰포트 크기(sm, md, lg, xl, xxl)에 따라 폭이 변화합니다.
    • .container-fluid: 항상 100% 너비를 가지며, 뷰포트 크기와 상관없이 화면 전체를 차지합니다.
    • .container-{breakpoint}: 특정 뷰포트 크기 이상에서만 고정 폭을 적용합니다. 예: .container-sm, .container-md.
  • 주로 페이지의 콘텐츠를 중앙에 배치하고, 적절한 여백과 정렬을 제공하는 데 사용됩니다.

container-fluid:

• 부트스트랩의 컨테이너 클래스 중 하나입니다.
• 페이지의 전체 너비를 차지하는 컨테이너를 만듭니다.
• container 클래스와 달리, container-fluid는 고정된 폭이 아닌, 뷰포트의 너비를 100% 차지합니다.
• 모든 뷰포트 크기에서 좌우 패딩이 일정하게 유지됩니다.

D

d-block

• Bootstrap의 디스플레이 유틸리티 클래스 중 하나로, 요소를 블록(block) 요소로 설정합니다.
  • CSS의 display: block;과 동일한 효과를 제공합니다.
  • 블록 요소는 가로 전체를 차지하며, 기본적으로 다음 요소는 다음 줄로 내려갑니다.
  • 주로 인라인(inline) 요소를 블록으로 변경하거나, 블록 레이아웃을 명시적으로 지정하고자 할 때 사용됩니다.
  • 반응형 디자인을 지원하며, 특정 뷰포트에서 적용하려면 d-sm-block, d-lg-block 등의 반응형 변형 클래스를 사용할 수 있습니다.
  • 버튼, 이미지, 카드와 같은 요소를 독립적으로 배치할 때 유용합니다.

d-flex

• d-flex: Bootstrap의 디스플레이 유틸리티 클래스 중 하나로, Flexbox 레이아웃을 활성화합니다. 이 클래스는 해당 요소를 Flex 컨테이너로 만들어, 그 자식 요소들이 Flexbox 레이아웃 규칙을 따르도록 합니다.

d-grid

• Bootstrap의 디스플레이(Display) 유틸리티 클래스 중 하나로, 요소를 CSS 그리드(Grid) 컨테이너로 설정합니다.
• CSS의 display: grid;와 동일한 효과를 제공하며, 그리드 레이아웃을 기반으로 자식 요소를 배치할 수 있습니다.
• 자식 요소 간의 간격을 설정하려면 gap-{n} 클래스와 함께 사용할 수 있습니다.

d-inline

• Bootstrap의 디스플레이 유틸리티 클래스 중 하나로, 요소를 인라인(inline) 요소로 설정합니다.
  • CSS의 display: inline;과 동일한 효과를 제공합니다.
  • 요소를 한 줄에 나란히 배치하고 싶을 때 사용되며, 블록(block) 요소의 기본 특성을 인라인으로 변경할 수 있습니다.
  • 반응형 디자인을 지원하며, 특정 뷰포트에서 적용하려면 d-sm-inline, d-md-inline과 같은 반응형 변형 클래스를 사용할 수 있습니다.
  • 텍스트나 작은 요소를 한 줄에 정렬해야 할 때 유용합니다.

d-inline-block

• Bootstrap의 디스플레이 유틸리티 클래스 중 하나로, 요소를 인라인-블록(inline-block) 요소로 설정합니다.
  • CSS의 display: inline-block;과 동일한 효과를 제공합니다.
  • 요소가 다른 요소와 같은 줄에 배치될 수 있으면서, 블록 요소처럼 높이와 너비를 설정할 수 있는 특성을 제공합니다.
  • 반응형 디자인을 지원하며, 특정 뷰포트에서 적용하려면 d-sm-inline-block, d-lg-inline-block 등의 반응형 변형 클래스를 사용할 수 있습니다.
  • 버튼, 아이콘, 이미지 등을 한 줄에 정렬하면서 스타일 속성을 제어해야 할 때 유용합니다.

d-lg-block:

• Bootstrap의 디스플레이 유틸리티 클래스 중 하나로, 요소를 큰 화면에서 블록 요소로 표시합니다.
• lg는 화면 크기 브레이크포인트를 나타내며, 넓이가 992px 이상일 때 적용됩니다.
• block은 요소를 블록 디스플레이로 설정하여 해당 크기 이상에서 요소가 표시되도록 합니다.

d-none

• Bootstrap의 디스플레이 유틸리티 클래스 중 하나로, 요소를 숨기기 위해 사용됩니다.
  • CSS의 display: none;과 동일한 효과를 제공합니다.
  • 요소가 문서 레이아웃에서 완전히 제거되어 시각적으로 보이지 않으며, 공간도 차지하지 않습니다.
  • 반응형 디자인을 지원하며, 특정 뷰포트에서만 요소를 숨기려면 d-sm-none, d-md-none 등의 클래스와 함께 사용할 수 있습니다.
  • 다른 디스플레이 클래스(d-block, d-flex 등)와 조합하여 조건에 따라 요소를 보이거나 숨기는 데 유용합니다.

disabled

• Bootstrap에서 요소를 비활성화 상태로 설정하기 위한 유틸리티 클래스입니다.
• 버튼, 링크, 입력 필드 등의 상호작용을 막아 사용자가 클릭하거나 조작할 수 없게 만듭니다.
• 버튼의 경우 pointer-events: none;과 opacity: 0.65;가 적용되어 시각적 비활성화 효과를 제공합니다.

display-1

• Bootstrap의 텍스트 유틸리티 클래스 중 하나로, 매우 큰 텍스트를 스타일링할 때 사용됩니다.
• 일반적인 헤딩 태그보다 더 커다란 글자 크기를 제공하며, 웹 페이지의 주요 제목이나 눈에 띄는 콘텐츠를 표시하는 데 적합합니다.
• display-2, display-3, display-4 등의 클래스와 함께 사용하여 크기를 조정할 수 있습니다.

dropdown

• Bootstrap의 구성 요소 중 하나로, 버튼이나 링크를 클릭 또는 호버할 때 추가 옵션 목록을 표시합니다.
• position: relative;와 함께 메뉴가 기본적으로 아래로 펼쳐지며, 다양한 방향으로 설정할 수 있습니다.
• 드롭다운 트리거는 보통 dropdown-toggle 클래스를 사용하며, 메뉴는 dropdown-menu 클래스로 구성됩니다.
• 주로 내비게이션 메뉴나 옵션 선택 UI를 구현할 때 사용됩니다.

dropdown-item

• Bootstrap의 드롭다운 구성 요소에서, 드롭다운 메뉴 내의 각 항목을 스타일링하는 클래스입니다.
• 링크 또는 버튼과 함께 사용되며, 사용자가 선택할 수 있는 개별 옵션으로 표시됩니다.
• 기본적으로 padding과 hover 효과가 포함되어 있으며, 활성화된 항목은 active 클래스를 추가해 강조할 수 있습니다.

dropdown-menu

• Bootstrap의 드롭다운 구성 요소에서, 드롭다운 항목을 포함하는 메뉴 컨테이너 역할을 하는 클래스입니다.
• 메뉴는 기본적으로 숨겨져 있으며, 드롭다운 트리거(dropdown-toggle)의 상호작용에 따라 표시됩니다.
• 기본적으로 아래로 펼쳐지며, dropdown-menu-end 또는 dropdown-menu-start 클래스와 함께 사용해 정렬 방향을 조정할 수 있습니다.
• 주로 내비게이션 옵션이나 작업 목록을 표시할 때 사용됩니다.

dropdown-toggle

• Bootstrap의 드롭다운 구성 요소에서, 드롭다운 메뉴를 열거나 닫는 트리거 역할을 하는 클래스입니다.
• 버튼, 링크 등과 함께 사용되며, data-bs-toggle="dropdown" 속성이 포함되어 드롭다운 기능이 활성화됩니다.
• 드롭다운 아이콘이 기본적으로 포함되어 있으며, 사용자가 클릭하거나 터치하면 메뉴를 표시하거나 숨깁니다.

E

end-0

• Bootstrap의 위치 유틸리티 클래스 중 하나로, 요소를 부모 요소의 오른쪽 끝으로 정렬합니다.
  • CSS의 right: 0;과 동일한 효과를 제공합니다.
  • 부모 요소가 position: relative, position: absolute, 또는 position: fixed로 설정된 경우에 적용됩니다.
  • 반응형 디자인을 지원하며, 특정 뷰포트에서만 적용하려면 end-sm-0, end-md-0 등의 반응형 변형 클래스를 사용할 수 있습니다.
  • 주로 버튼, 배너, 팝업 등을 오른쪽 끝에 배치해야 할 때 유용합니다.

F

fixed-top

• Bootstrap의 위치 유틸리티 클래스 중 하나로, 요소를 뷰포트의 상단에 고정합니다.
  • CSS의 position: fixed;와 top: 0;이 결합된 효과를 제공합니다.
  • 페이지를 스크롤해도 요소가 항상 상단에 고정되어 유지됩니다.
  • 주로 네비게이션 바(navbar)나 공지 배너와 같은 고정된 상단 요소를 만들 때 사용됩니다.
  • 상단 요소가 다른 콘텐츠와 겹치는 경우, padding-top을 추가하여 레이아웃을 조정해야 할 수 있습니다.

flex-column:

• Flexbox 컨테이너의 방향을 세로(column)로 설정합니다.
• flex-direction: column; 속성과 동일합니다.
• 즉, 자식 요소들이 위에서 아래로 세로 방향으로 정렬됩니다.

flex-grow-1:

• 이 클래스는 요소의 flex-grow 속성을 1로 설정합니다.
• flex-grow 속성은 Flexbox 컨테이너 내에서 요소가 차지할 수 있는 공간의 비율을 지정합니다.
• flex-grow: 1;은 요소가 남은 공간을 나눠 가지도록 설정합니다.

flex-md-row

• Bootstrap의 유틸리티 클래스 중 하나로, md(중간 화면 크기, 최소 768px) 이상일 때 Flexbox 컨테이너의 방향을 가로 방향(row) 으로 설정합니다.
• CSS의 flex-direction: row; 속성이 적용됩니다.
• 반응형 레이아웃을 구성할 때 특정 화면 크기에서 Flexbox 요소의 배치 방향을 조정하는 데 사용됩니다.

flex-wrap

• Bootstrap의 Flexbox 유틸리티 클래스 중 하나로, Flex 컨테이너의 자식 요소들이 필요에 따라 줄 바꿈(wrap) 되도록 설정합니다.
• CSS의 flex-wrap: wrap; 속성이 적용됩니다.
• 요소들이 컨테이너의 가로 너비를 초과할 경우, 다음 줄로 배치되도록 하여 레이아웃을 조정할 때 사용됩니다.

fst-italic

• Bootstrap의 텍스트 유틸리티 클래스 중 하나로, 텍스트를 이탤릭체(Italic)로 스타일링합니다.
  • CSS의 font-style: italic;과 동일한 효과를 제공합니다.
  • 기울임체로 강조하고자 하는 텍스트에 사용되며, 주로 인용문, 서브텍스트, 또는 특별한 강조가 필요한 경우에 활용됩니다.
  • fst-normal 클래스와 함께 사용하여 기본 텍스트 스타일로 되돌릴 수 있습니다.

fw-bold

• Bootstrap의 텍스트 유틸리티 클래스 중 하나로, 텍스트를 굵게(Bold) 설정합니다. 가중치(weight)가 높은 글꼴 스타일을 적용하며, 강조가 필요한 텍스트를 나타낼 때 사용됩니다.
  • 다른 가중치 유틸리티(fw-normal, fw-light 등)와 함께 사용하여 텍스트 굵기를 조정할 수 있습니다.
  • CSS의 font-weight: bold;와 동일한 효과를 제공합니다.

G

g-0:

• Bootstrap 5에서 추가된 유틸리티 클래스 중 하나로, 컬럼 간의 간격(gutter)을 설정하는 클래스입니다.
• g-0은 모든 방향에서 간격을 0으로 설정합니다. 즉, 행 내부의 모든 컬럼 간의 여백이 없게 됩니다.

gap-1

• Bootstrap의 간격 유틸리티 클래스 중 하나로, 플렉스(flex) 또는 그리드(grid) 컨테이너 내에서 요소 간의 간격을 설정합니다.
• CSS의 gap: 0.25rem;과 동일한 효과를 제공합니다.
• 플렉스 또는 그리드 컨테이너에 적용되며, 자식 요소 간의 간격을 균등하게 조정합니다.
• 숫자 값(0부터 5까지)을 사용하여 간격 크기를 설정하며, 각 숫자는 기본 단위(0.25rem)의 배수입니다.
• 반응형 디자인을 지원하며, 특정 뷰포트에서 적용하려면 gap-sm-1, gap-md-1 등의 클래스와 함께 사용할 수 있습니다.

H

h-25

• Bootstrap의 높이(Height) 유틸리티 클래스 중 하나로, 요소의 높이를 **부모 요소 높이의 25%**로 설정합니다.
• CSS의 height: 25%;와 동일한 효과를 제공합니다.
• 비율 기반으로 높이를 설정할 때 사용되며, 다른 높이 클래스(h-50, h-75, h-100, h-auto 등)와 조합하여 다양한 크기를 지정할 수 있습니다.
• 반응형 디자인을 지원하며, 특정 뷰포트에서 적용하려면 h-sm-25, h-md-25 등의 클래스와 함께 사용할 수 있습니다.
• 레이아웃에서 요소의 높이를 유연하게 조정하거나 화면 비율에 따라 콘텐츠를 배치할 때 유용합니다.

h1:

• <h1> 태그와 동일함

hstack

• Bootstrap의 유틸리티 클래스 중 하나로, 요소를 수평으로 정렬하는 플렉스 컨테이너를 생성합니다.
• CSS의 display: flex; flex-direction: row;과 동일한 효과를 제공합니다.
• 자식 요소가 한 줄로 나란히 배치되며, 기본적으로 요소 간의 여백은 없습니다.
• 요소 간 간격을 추가하려면 gap-{value} 클래스를 함께 사용할 수 있습니다.
• 버튼 그룹, 아이콘 배치 등 수평 정렬이 필요한 간단한 레이아웃을 만들 때 유용합니다.

I

J

justify-content-around

• Bootstrap의 Flexbox 유틸리티 클래스 중 하나로, Flex 컨테이너 내 요소들을 양쪽에 동일한 여백을 두고 배치합니다.
• CSS의 justify-content: space-around; 속성이 적용됩니다.
• 요소 간 간격을 균등하게 분배하면서, 컨테이너의 양쪽 끝에도 일정한 여백을 유지할 때 사용됩니다.

justify-content-between

• Bootstrap의 Flexbox 유틸리티 클래스 중 하나로, Flex 컨테이너 내 요소들을 양 끝에 배치하고, 요소 간의 간격을 최대화합니다.
• CSS의 justify-content: space-between; 속성이 적용됩니다.
• 요소들을 시작과 끝에 정렬하면서 중간에 여유 공간을 균등하게 확보할 때 사용됩니다.

justify-content-center

• justify-content-center: Flexbox 유틸리티 클래스 중 하나로, Flex 컨테이너 안의 아이템들을 수평 방향으로 중앙에 정렬합니다.

justify-content-end

• Bootstrap의 Flexbox 유틸리티 클래스 중 하나로, Flex 컨테이너 내 요소들을 오른쪽 끝(끝쪽 정렬) 으로 배치합니다.
• CSS의 justify-content: flex-end; 속성이 적용됩니다.
• 요소를 오른쪽으로 정렬해야 하는 레이아웃을 구성할 때 유용합니다.

K

L

lead

• Bootstrap의 텍스트 유틸리티 클래스 중 하나로, 요소의 텍스트를 더 크고 가독성 좋게 설정합니다. 일반적인 단락보다 약간 더 강조된 텍스트를 만들 때 사용되며, 소개문구나 요약 내용을 돋보이게 하는 데 적합합니다. <p> 태그와 함께 주로 사용되며, 다른 텍스트와 조화를 이루도록 적당한 마진과 글자 크기를 제공합니다.

lh-base

• Bootstrap의 텍스트 유틸리티 클래스 중 하나로, 텍스트의 줄 간격(line height)을 기본값으로 설정합니다.
  • 기본적으로 Bootstrap의 line-height: 1.5;가 적용됩니다.
  • 텍스트의 가독성을 높이고, 적절한 줄 간격을 유지하는 데 사용됩니다.
  • 다른 줄 간격 클래스(lh-sm, lh-lg 등)와 함께 사용하여 줄 간격을 더 작거나 크게 조정할 수 있습니다.

link-primary

• Bootstrap의 링크 스타일링 유틸리티 클래스 중 하나로, 링크 텍스트의 색상을 기본(primary) 테마 색상으로 설정합니다.
• CSS의 color: var(--bs-primary);와 동일한 효과를 제공합니다.
• 일반 링크 스타일과 동일하게 작동하며, 호버 시 색상이 약간 밝아지는 기본 Bootstrap 링크 효과가 적용됩니다.
• link-secondary, link-success 등과 함께 사용하여 링크의 상태나 목적에 따라 색상을 구분할 수 있습니다.
• 주로 강조되거나 눈에 띄어야 하는 링크에 활용됩니다.

list-group

• Bootstrap의 컴포넌트 클래스 중 하나로, 일련의 항목을 그룹화하여 정렬된 리스트를 생성합니다.
• CSS 스타일링으로 테두리, 여백, 패딩 등이 적용되어 시각적으로 깔끔하고 정돈된 리스트를 제공합니다.
• 메뉴, 작업 목록, 알림 등을 구성할 때 주로 사용됩니다.

list-group-flush

• Bootstrap의 컴포넌트 클래스 중 하나로, list-group 의 테두리를 제거하고, 리스트 항목들을 카드나 컨테이너의 가장자리와 밀착되게 배치합니다.
• CSS의 border-width: 0; 속성이 적용됩니다.
• 리스트 항목이 자연스럽게 컨테이너의 레이아웃에 녹아들도록 디자인할 때 사용됩니다.

list-group-item

• Bootstrap의 컴포넌트 클래스 중 하나로, list-group 내부의 각각의 항목을 정의합니다.
• CSS 스타일링으로 테두리, 배경색, 패딩 등이 적용되어 리스트 항목을 시각적으로 구분합니다.
• 항목에 링크, 버튼, 또는 다른 콘텐츠를 포함할 수 있으며, 메뉴나 작업 항목을 구성할 때 사용됩니다.

list-group-numbered

• Bootstrap의 컴포넌트 클래스 중 하나로, list-group 항목 앞에 자동으로 번호를 추가하여 순서를 나타냅니다.
• CSS 스타일링을 통해 숫자가 깔끔하게 정렬되고 시각적으로 구분됩니다.
• 번호가 있는 정렬된 리스트를 구성할 때 사용됩니다.

M

m-1

• Bootstrap의 여백(마진) 유틸리티 클래스 중 하나로, 요소의 모든 방향(위, 오른쪽, 아래, 왼쪽)에 0.25rem의 마진을 추가합니다.
• CSS의 margin: 0.25rem;과 동일한 효과를 제공합니다.
• 숫자 값(0부터 5까지)을 사용하여 여백 크기를 설정하며, 각 숫자는 기본 여백 단위(0.25rem)의 배수입니다.
• 반응형 디자인을 지원하며, 특정 뷰포트에만 적용하려면 m-sm-1, m-lg-1 등의 클래스와 함께 사용할 수 있습니다.
• 요소 간의 간격을 균형 있게 조정할 때 유용합니다.

m-auto

• Bootstrap의 여백(마진) 유틸리티 클래스 중 하나로, 요소의 모든 방향(위, 오른쪽, 아래, 왼쪽)에 자동 마진(margin: auto;)을 적용합니다.
• CSS의 margin: auto;과 동일한 효과를 제공하며, 주로 요소를 컨테이너 내에서 수평 및 수직으로 중앙 정렬하기 위해 사용됩니다.
• 요소의 부모 컨테이너가 display: flex; 또는 display: grid;일 때 더욱 유용합니다.
• 특정 방향만 자동 마진을 적용하려면 mt-auto, mb-auto, mx-auto 등과 같은 클래스도 사용할 수 있습니다.
• 중앙 배치를 위한 간단하고 효율적인 도구로 활용됩니다.

mb-3:

• Bootstrap의 마진 유틸리티 클래스 중 하나로, 하단에 3단위의 마진을 추가합니다.

me-1

• Bootstrap의 여백(마진) 유틸리티 클래스 중 하나로, 요소의 오른쪽(margin-right)에 0.25rem의 마진을 추가합니다.
• CSS의 margin-right: 0.25rem;과 동일한 효과를 제공합니다.
• 특정 방향(오른쪽)만 여백을 조정할 때 사용되며, 다른 여백 클래스(ms-1, mx-1, my-1 등)와 조합하여 다양한 여백 설정이 가능합니다.
• 반응형 디자인을 지원하며, 특정 뷰포트에만 적용하려면 me-sm-1, me-md-1 등의 클래스와 함께 사용할 수 있습니다.
• 요소의 오른쪽 간격을 조정하거나 가로로 정렬된 콘텐츠의 여백을 설정할 때 유용합니다.

min-vh-100:

• 요소의 최소 높이를 뷰포트(viewport) 높이의 100%로 설정합니다.
• min-height: 100vh; 속성과 동일합니다.
• 뷰포트 높이는 브라우저 창의 높이를 의미합니다.

modal

• Bootstrap의 구성 요소 중 하나로, 오버레이 형식으로 나타나는 팝업창을 생성합니다. 주로 사용자에게 추가 정보 제공, 경고, 입력 양식 등을 표시하는 데 사용되며, modal-header, modal-body, modal-footer 클래스를 사용해 세부적으로 구성할 수 있습니다.

ms-1

• Bootstrap의 여백(마진) 유틸리티 클래스 중 하나로, 요소의 왼쪽(margin-left)에 0.25rem의 마진을 추가합니다.
• CSS의 margin-left: 0.25rem;과 동일한 효과를 제공합니다.
• 특정 방향(왼쪽)만 여백을 조정할 때 사용되며, 다른 여백 클래스(me-1, mx-1, my-1 등)와 조합하여 다양한 여백 설정이 가능합니다.
• 반응형 디자인을 지원하며, 특정 뷰포트에만 적용하려면 ms-sm-1, ms-md-1 등의 클래스와 함께 사용할 수 있습니다.
• 요소의 왼쪽 간격을 조정하거나 특정 콘텐츠를 정렬할 때 유용합니다.

ms-auto:

• 부트스트랩 5에서 제공하는 마진 유틸리티 클래스입니다.
• ms는 'margin-start'를 의미하며, 이는 왼쪽 마진을 설정하는 클래스입니다. (RTL 언어 지원을 위한 방향 의존적 마진)
• ms-auto는 margin-left: auto;와 동일하게 작동하여 요소를 가능한 왼쪽으로 밀어넣습니다.
• 이 클래스를 사용하면 해당 요소가 오른쪽 정렬됩니다.

mt-1

• Bootstrap의 여백(마진) 유틸리티 클래스 중 하나로, 요소의 위쪽(margin-top)에 0.25rem의 마진을 추가합니다.
• CSS의 margin-top: 0.25rem;과 동일한 효과를 제공합니다.
• 특정 방향(위쪽)만 여백을 조정할 때 사용되며, 다른 여백 클래스(mb-1, mx-1, my-1 등)와 조합하여 다양한 여백 설정이 가능합니다.
• 반응형 디자인을 지원하며, 특정 뷰포트에만 적용하려면 mt-sm-1, mt-md-1 등의 클래스와 함께 사용할 수 있습니다.
• 요소의 위쪽 간격을 조정하거나 섹션 간의 상단 여백을 설정할 때 유용합니다.

mx-1

• Bootstrap의 여백(마진) 유틸리티 클래스 중 하나로, 요소의 왼쪽(margin-left)과 오른쪽(margin-right)에 각각 0.25rem의 마진을 추가합니다.
• CSS의 margin-left: 0.25rem; margin-right: 0.25rem;과 동일한 효과를 제공합니다.
• 특정 방향(가로 방향)만 여백을 조정할 때 사용되며, 다른 여백 클래스(ml-1, mr-1, my-1 등)와 조합하여 세부적인 여백 설정이 가능합니다.
• 반응형 디자인을 지원하며, 특정 뷰포트에만 적용하려면 mx-sm-1, mx-md-1 등의 클래스와 함께 사용할 수 있습니다.
• 가로 방향 요소 간의 간격을 조정하거나 콘텐츠의 가로 여백을 설정할 때 유용합니다.

my-1

• Bootstrap의 여백(마진) 유틸리티 클래스 중 하나로, 요소의 위(margin-top)와 아래(margin-bottom)에 각각 0.25rem의 마진을 추가합니다.
• CSS의 margin-top: 0.25rem; margin-bottom: 0.25rem;과 동일한 효과를 제공합니다.
• 특정 방향(세로 방향)만 여백을 조정할 때 사용되며, 다른 여백 클래스(mt-1, mb-1, mx-1 등)와 조합하여 세부적인 여백 설정이 가능합니다.
• 반응형 디자인을 지원하며, 특정 뷰포트에서 적용하려면 my-sm-1, my-md-1 등의 클래스와 함께 사용할 수 있습니다.
• 요소 간 세로 간격을 조정하거나 콘텐츠의 여백을 설정할 때 유용합니다.

N

navbar:

• 네비게이션 바 컴포넌트임을 나타내는 기본 클래스입니다.
• 네비게이션 바의 기본 스타일을 설정합니다.

navbar-collapse:

• 네비게이션 바에서 사용되는 collapse 컴포넌트를 지정하는 클래스입니다.
• 이 클래스는 네비게이션 바의 아이템들을 포함하는 요소에 적용되어, 화면 크기에 따라 네비게이션 아이템들이 보이거나 숨겨지게 합니다.

navbar-dark:

• 네비게이션 바의 텍스트 색상을 어두운 배경에 맞게 밝게 설정합니다.
• 기본적으로 링크와 텍스트 색상이 밝은 색으로 설정됩니다.

navbar-expand-lg:

• 네비게이션 바가 특정 화면 크기 이상에서 확장되는지 여부를 설정합니다.
• lg는 'large'의 약자로, 큰 화면(대략 992px 이상)에서 네비게이션 바가 수평으로 확장되도록 설정합니다.
• 작은 화면에서는 네비게이션 바가 수직으로 축소됩니다.

nav-item:

• 부트스트랩 네비게이션 바 내의 항목을 나타내는 클래스입니다.
• 주로 li 요소에 적용되며, 네비게이션 링크들을 포함하는 li 요소를 스타일링합니다.
• nav-item 클래스는 네비게이션 항목을 일관된 스타일로 렌더링하도록 도와줍니다.

navbar-nav:

• 부트스트랩의 네비게이션 바 내의 항목들을 그룹화하는 클래스입니다.
• 주로 ul 요소에 적용되며, 네비게이션 항목(li 요소)들을 포함합니다.
• 네비게이션 바의 링크들을 스타일링합니다.

O 

offset-4

• Bootstrap의 레이아웃 유틸리티 클래스 중 하나로, 그리드 시스템에서 해당 열(column)을 왼쪽으로 4칸만큼 띄웁니다.
• CSS의 margin-left: 33.333333%; 속성이 적용됩니다(12칸 기준의 그리드 시스템에서 4칸에 해당).
• 레이아웃을 조정하여 콘텐츠를 가운데로 정렬하거나 공간을 확보할 때 주로 사용됩니다.

order-1

• Bootstrap의 유틸리티 클래스 중 하나로, Flexbox 컨테이너에서 요소의 배치 순서를 1로 설정합니다.
• CSS의 order: 1; 속성이 적용됩니다.
• 기본 정렬 순서를 재정의하여 요소를 원하는 순서로 배치할 때 사용됩니다.

P

p-1

• Bootstrap의 패딩(안쪽 여백) 유틸리티 클래스 중 하나로, 요소의 모든 방향(위, 오른쪽, 아래, 왼쪽)에 0.25rem의 패딩을 추가합니다.
• CSS의 padding: 0.25rem;과 동일한 효과를 제공합니다.
• 숫자 값(0부터 5까지)을 사용하여 패딩 크기를 설정하며, 각 숫자는 기본 단위(0.25rem)의 배수입니다.
• 반응형 디자인을 지원하며, 특정 뷰포트에서 적용하려면 p-sm-1, p-lg-1 등의 클래스와 함께 사용할 수 있습니다.
• 요소 내부의 콘텐츠 간격을 조정하거나 레이아웃을 세밀하게 설정할 때 유용합니다.

pb-3

• Bootstrap의 유틸리티 클래스 중 하나로, 요소의 아래쪽 패딩(padding-bottom)을 1rem으로 설정합니다.
• CSS의 padding-bottom: 1rem; 속성이 적용됩니다.
• 콘텐츠 간 간격을 조정하거나 레이아웃을 구성할 때 유용합니다.

placeholder

• Bootstrap의 유틸리티 클래스 중 하나로, UI 컴포넌트에 자리 표시자(placeholder) 스타일을 적용합니다.
• CSS의 background-color와 opacity 속성이 적용되어, 시각적으로 회색 톤의 빈 공간을 나타냅니다.
• 로딩 중이거나 콘텐츠가 준비되지 않았음을 나타내기 위해 사용됩니다.

placeholder-glow

• Bootstrap의 유틸리티 클래스 중 하나로, **자리 표시자(placeholder)**에 부드러운 빛나는 효과를 추가합니다.
• CSS의 animation: glow 속성이 적용되어 시각적으로 콘텐츠 로딩 상태를 표현합니다.
• 자리 표시자에 애니메이션을 통해 로딩 중임을 강조할 때 사용됩니다.

position-relative

• Bootstrap의 위치 유틸리티 클래스 중 하나로, 요소를 상대적 위치로 설정합니다.
  • CSS의 position: relative;와 동일한 효과를 제공합니다.
  • 상대적 위치는 요소의 원래 위치를 기준으로, top, right, bottom, left 속성을 사용하여 이동할 수 있게 합니다.
  • 원래 위치는 그대로 유지되며, 다른 요소의 레이아웃에 영향을 주지 않습니다.
  • 주로 자식 요소를 기준으로 배치하거나 특정 위치에 배치해야 하는 경우에 사용됩니다.
  • 다른 위치 클래스(position-absolute, position-fixed 등)와 조합하여 레이아웃을 유연하게 제어할 수 있습니다.

ps-1

• Bootstrap의 패딩(안쪽 여백) 유틸리티 클래스 중 하나로, 요소의 왼쪽(padding-left)에 0.25rem의 패딩을 추가합니다.
• CSS의 padding-left: 0.25rem;과 동일한 효과를 제공합니다.
• 특정 방향(왼쪽)만 패딩을 조정할 때 사용되며, 다른 패딩 클래스(pe-1, py-1, px-1 등)와 조합하여 다양한 설정이 가능합니다.
• 반응형 디자인을 지원하며, 특정 뷰포트에서 적용하려면 ps-sm-1, ps-md-1 등의 클래스와 함께 사용할 수 있습니다.
• 요소의 왼쪽 여백을 세밀하게 설정하거나 콘텐츠를 정렬할 때 유용합니다.

pt-1

• Bootstrap의 패딩(안쪽 여백) 유틸리티 클래스 중 하나로, 요소의 위쪽(padding-top)에 0.25rem의 패딩을 추가합니다.
• CSS의 padding-top: 0.25rem;과 동일한 효과를 제공합니다.
• 특정 방향(위쪽)만 패딩을 조정할 때 사용되며, 다른 패딩 클래스(pb-1, px-1, py-1 등)와 조합하여 세부적인 설정이 가능합니다.
• 반응형 디자인을 지원하며, 특정 뷰포트에서 적용하려면 pt-sm-1, pt-md-1 등의 클래스와 함께 사용할 수 있습니다.
• 콘텐츠의 상단 간격을 조정하거나 특정 요소를 아래로 밀어야 할 때 유용합니다.

px-1

• Bootstrap의 패딩(안쪽 여백) 유틸리티 클래스 중 하나로, 요소의 왼쪽(padding-left)과 오른쪽(padding-right)에 각각 0.25rem의 패딩을 추가합니다.
• CSS의 padding-left: 0.25rem; padding-right: 0.25rem;과 동일한 효과를 제공합니다.
• 특정 방향(가로 방향)만 패딩을 조정할 때 사용되며, 다른 패딩 클래스(py-1, pt-1, pb-1 등)와 조합하여 다양한 설정이 가능합니다.
• 반응형 디자인을 지원하며, 특정 뷰포트에서 적용하려면 px-sm-1, px-md-1 등의 클래스와 함께 사용할 수 있습니다.
• 요소의 가로 간격을 조정하거나 내부 콘텐츠의 좌우 여백을 설정할 때 유용합니다.

py-1

• Bootstrap의 패딩(안쪽 여백) 유틸리티 클래스 중 하나로, 요소의 위쪽(padding-top)과 아래쪽(padding-bottom)에 각각 0.25rem의 패딩을 추가합니다.
• CSS의 padding-top: 0.25rem; padding-bottom: 0.25rem;과 동일한 효과를 제공합니다.
• 특정 방향(세로 방향)만 패딩을 조정할 때 사용되며, 다른 패딩 클래스(px-1, pt-1, pb-1 등)와 조합하여 세부적인 설정이 가능합니다.
• 반응형 디자인을 지원하며, 특정 뷰포트에서 적용하려면 py-sm-1, py-md-1 등의 클래스와 함께 사용할 수 있습니다.
• 요소의 세로 간격을 조정하거나 콘텐츠와의 간격을 설정할 때 유용합니다.

Q

R

rounded

• Bootstrap의 모서리 스타일 유틸리티 클래스 중 하나로, 요소의 모서리를 둥글게 설정합니다.
• CSS의 border-radius: 0.25rem;과 동일한 효과를 제공합니다.
• 기본적으로 요소의 각 모서리에 동일한 둥근 효과를 적용하며, 둥글기의 크기는 미리 정의된 값으로 설정됩니다.

rounded-1

• Bootstrap의 모서리 스타일 유틸리티 클래스 중 하나로, 요소의 모서리를 약간 둥글게 설정합니다.
• CSS의 border-radius: 0.2rem;과 동일한 효과를 제공합니다.
• rounded 클래스보다 모서리가 덜 둥글며, 미세한 곡선을 추가할 때 사용됩니다.

rounded-pill

• Bootstrap의 유틸리티 클래스 중 하나로, 요소의 모서리를 둥글게 처리하여 알약(pill) 모양으로 만듭니다.
• CSS의 border-radius: 50rem; 속성이 적용됩니다.
• 배지(badge), 버튼, 카드 등에서 둥근 디자인을 강조할 때 사용됩니다.

rounded-top

• Bootstrap의 모서리 스타일 유틸리티 클래스 중 하나로, 요소의 위쪽 모서리만 둥글게 설정합니다.
• CSS의 border-top-left-radius와 border-top-right-radius 속성에 동일한 값을 적용하여 위쪽 두 모서리만 둥근 효과를 만듭니다.
• 기본적으로 둥근 값은 Bootstrap의 미리 정의된 0.25rem이 적용됩니다.

row:

• Bootstrap의 그리드 시스템에서 행(row)을 정의하는 클래스입니다.
• 행은 하나 이상의 컬럼(col)을 포함하며, 그리드를 구성하는 기본 요소입니다.
• 행 내부의 컬럼은 col 클래스를 사용하여 정의됩니다.

S

shadow

• Bootstrap의 그림자(Shadow) 유틸리티 클래스 중 하나로, 요소에 기본 그림자 효과를 추가합니다.
• CSS의 box-shadow 속성을 사용하며, 기본적으로 부드럽고 미세한 그림자가 적용됩니다.
• 시각적으로 요소를 부각시키고 입체감을 더하는 데 유용합니다.

shadow-none

• Bootstrap의 그림자(Shadow) 유틸리티 클래스 중 하나로, 요소의 그림자 효과를 제거합니다.
• CSS의 box-shadow: none;과 동일한 효과를 제공합니다.
• 그림자가 기본적으로 적용된 요소(예: 카드, 버튼 등)의 그림자를 없애고 평평한 디자인을 만들고자 할 때 사용됩니다.

T

table

• Bootstrap의 구성 요소 중 하나로, 테이블 요소를 쉽게 스타일링할 수 있게 합니다. table-striped, table-bordered, table-hover와 같은 클래스와 조합하여 다양한 테이블 디자인을 생성할 수 있습니다.

text-bg-primary

• Bootstrap의 유틸리티 클래스 중 하나로, 요소의 텍스트 배경을 기본(primary) 테마 색상으로 설정합니다.
  • CSS의 background-color: var(--bs-primary);와 동일한 효과를 제공합니다.
  • 배경색은 테마의 primary 색상으로 설정되며, 텍스트를 배경 위에 돋보이게 표시합니다.
  • 일반적으로 텍스트를 읽기 쉽게 하기 위해 text-white와 함께 사용됩니다.
  • 버튼, 배너, 알림과 같은 UI 요소에서 텍스트를 강조하는 데 유용합니다.
  • 다른 배경색 클래스(text-bg-danger, text-bg-success 등)와 조합하여 다양한 상태를 표현할 수 있습니다.

text-lowercase

• Bootstrap의 텍스트 유틸리티 클래스 중 하나로, 텍스트를 소문자로 변환합니다.
  • 요소의 내용이 대문자, 혼합된 문자라도 모두 소문자로 표시됩니다.
  • CSS의 text-transform: lowercase;와 동일한 효과를 제공합니다.
  • 특정 스타일 요구 사항이나 디자인 컨셉에 따라 텍스트를 일관되게 소문자로 표현해야 할 때 사용됩니다.

text-opacity-75

• Bootstrap의 텍스트 유틸리티 클래스 중 하나로, 텍스트의 불투명도를 75%로 설정합니다.
  • CSS의 opacity: 0.75;와 동일한 효과를 제공합니다.
  • 텍스트 색상과 조합하여 가독성을 조정하거나, 강조도를 줄이고자 할 때 사용됩니다.
  • 다른 불투명도 클래스(text-opacity-50, text-opacity-25 등)와 함께 다양한 투명도를 적용할 수 있습니다.
  • 배경색과 조화롭게 텍스트를 표현하거나, 덜 중요한 정보를 시각적으로 구분할 때 유용합니다.

text-primary

• Bootstrap의 텍스트 색상 유틸리티 클래스 중 하나로, 텍스트 색상을 기본(primary) 테마 색상으로 설정합니다.
  • 기본적으로 테마의 primary 색상(보통 파란색 계열)이 적용되며, 사용자 정의 테마에서는 primary 색상이 변경될 수 있습니다.
  • CSS의 color: var(--bs-primary);와 동일한 효과를 제공합니다.
  • 강조하고자 하는 텍스트를 표현할 때 유용하며, 배경색과 조화를 이루는 색상을 선택할 수 있습니다.
  • 다른 텍스트 색상 클래스(text-secondary, text-success, text-danger 등)와 함께 다양한 상태를 시각적으로 구분하는 데 사용됩니다.

text-start

• Bootstrap의 텍스트 정렬 유틸리티 클래스 중 하나로, 텍스트를 왼쪽으로 정렬합니다.
  • CSS의 text-align: start;와 동일한 효과를 제공합니다.
  • 부모 요소의 방향성(direction: ltr 또는 direction: rtl)에 따라 텍스트를 시작 부분(주로 왼쪽)으로 정렬합니다.
  • 반응형 디자인을 지원하며, 특정 뷰포트에서 정렬을 변경하려면 text-md-start, text-lg-end와 같은 반응형 변형 클래스와 함께 사용할 수 있습니다.
  • 기본적으로 텍스트를 왼쪽 정렬하여 가독성을 높이는 데 유용합니다.

U

V

vstack

• Bootstrap의 유틸리티 클래스 중 하나로, 요소를 수직으로 정렬하는 플렉스 컨테이너를 생성합니다.
• CSS의 display: flex; flex-direction: column;과 동일한 효과를 제공합니다.
• 자식 요소가 수직으로 나열되며, 기본적으로 요소 간의 여백은 없습니다.
• 요소 간에 간격을 추가하려면 gap-{value} 클래스를 함께 사용할 수 있습니다.
• 콘텐츠를 수직으로 깔끔하게 정렬하거나 간단한 레이아웃을 만들 때 유용합니다.

W

w-50

• Bootstrap의 너비(Width) 유틸리티 클래스 중 하나로, 요소의 너비를 **부모 요소의 50%**로 설정합니다.
• CSS의 width: 50%;과 동일한 효과를 제공합니다.
• 반응형 디자인을 지원하며, 특정 뷰포트에서 적용하려면 w-sm-50, w-md-50 등의 클래스와 함께 사용할 수 있습니다.
• 콘텐츠나 레이아웃을 비율 기반으로 조정해야 할 때 유용합니다.
• 다른 너비 클래스(w-25, w-75, w-100 등)와 조합하여 다양한 크기를 설정할 수 있습니다.

X

Y

Z