커뮤니티 UI Kit

.btn 클래스를 <a>, <button>, 또는 <input> 요소에 사용하여 스타일이 적용된 버튼을 빠르게 생성할 수 있습니다. 실무에서는 .btn-solid-*, .btn-outline-*, .btn-soft-*, .btn-ghost-* 시맨틱 클래스를 권장합니다.

.btn-pill을 추가하여 매끄러운 알약 모양의 모서리를 제공합니다.

.btn-outline-* 클래스를 사용하여 유색 테두리가 있는 버튼을 만듭니다.

.btn-pill을 적용하여 매끄러운 알약 모양의 모서리를 제공합니다.

.btn-soft-* 클래스를 사용하여 부드럽고 색조가 있는 배경색의 버튼을 만듭니다.

.btn-soft-*와 .btn-pill을 결합하여 부드러운 알약 모양의 버튼을 만듭니다.

.btn-ghost-* 클래스로 배경을 투명하게 유지하고 호버 시 색상을 강조할 수 있습니다.

고스트 스타일 버튼과 .btn-pill을 결합하여 호버 시 강조되는 둥근 투명 버튼을 만듭니다.

그라데이션 유틸리티 클래스를 사용하여 매끄러운 색상 전환을 적용하고 스타일리시한 그라데이션 버튼을 만듭니다.

그라데이션 버튼과 .btn-pill을 결합하여 혼합된 색상 전환이 있는 매끄러운 알약 모양의 버튼을 만듭니다.

.btn-lg 또는 .btn-sm을 사용하여 큰 버튼이나 작은 버튼을 빠르게 만들 수 있습니다.

<button>에 disabled 속성을 추가하여 사용자 상호 작용을 방지하고 비활성 상태를 시각적으로 나타냅니다.

.btn-block 클래스를 추가하여 버튼이 컨테이너의 전체 너비를 차지하게 합니다.

아이콘 버튼을 사용하면 아이콘만 사용하여 컴팩트한 컨트롤을 만들거나, 툴바 및 작업 영역에서 더 명확하게 하기 위해 아이콘을 텍스트와 쌍으로 구성할 수 있습니다.

.btn 클래스는 <button>, <a>, <input> 요소에서 작동하지만 브라우저에 따라 모양이 약간 다를 수 있습니다.

inline-flex를 사용하여 버튼을 단일 컨테이너 내로 그룹화하여 나란히 정렬하거나 일관된 간격으로 수직으로 쌓을 수 있습니다.

.badge와 .badge-solid-* 클래스를 사용하여 배지를 만듭니다.

.badge-pill 클래스를 사용하여 배지를 더 둥글게 만듭니다.

.badge-outline-* 클래스를 사용하여 테두리가 있는 배지를 빠르게 생성합니다.

배지를 더 둥글게 만들려면 .badge-pill 수정자 클래스를 사용하세요.

.badge-soft-* 클래스를 사용하여 밝은 색상의 배지를 만듭니다.

배지를 밝게 만들려면 .badge-soft-* 수정자 클래스를 사용하세요.

.badge-label 을 사용하여 사각형 기반의 배지를 빠르게 생성합니다.

.badge-list 안에 .badge-list-item을 배치하고, 보조 설명은 .badge-list-summary로 표시합니다.

표와 관리자 목록의 상태값은 .badge-status와 의미 기반 variant인 .is-success, .is-warning, .is-danger, .is-info를 함께 사용합니다.

.badge-square 클래스를 사용하여 사각형 기반의 배지를 빠르게 생성합니다.

.badge-square와 .badge-pill을 사용하여 원형 기반의 배지를 빠르게 생성합니다.

.badge-corner 보조 클래스로 링크나 버튼의 모서리에 배치합니다.

적절한 토글 클래스와 메뉴 구조를 사용하여 최소한의 마크업 변경으로 모든 버튼이나 링크를 드롭다운 토글로 전환할 수 있습니다.

data-dropdown-placement="bottom-right" 속성을 사용하여 드롭다운 메뉴를 요소의 오른쪽에 배치하십시오.

드롭다운 버튼은 아이콘을 포함하거나 제외하도록 커스텀할 수 있어, 깔끔한 텍스트 전용 토글이나 커스텀 아이콘으로 시각적으로 향상된 토글을 만들 수 있습니다.

일반 버튼과 별도의 토글을 결합하여 분할 버튼 드롭다운을 만드세요. 이 레이아웃은 메인 버튼에서 빠른 작업을 제공하고 드롭다운에서 추가 옵션을 제공합니다.

드롭다운 메뉴는 모든 버튼 변형과 함께 사용할 수 있으므로 기본, 보조 또는 성공 버튼과 같은 다양한 색상이나 스타일에 맞출 수 있습니다.

드롭다운 메뉴는 유연한 디자인 옵션을 위해 크고 작은 버튼 또는 분할 버튼 변형을 포함한 모든 크기의 버튼과 결합할 수 있습니다.

부모 요소에 data-dropdown-placement="top" 또는 data-dropdown-placement="top-left" 속성을 사용하여 토글 버튼 위에 드롭다운 메뉴를 표시하십시오.

부모 요소에 data-dropdown-placement="left-start" 속성을 사용하여 토글 버튼의 왼쪽에 드롭다운 메뉴를 배치하십시오.

부모 요소에 data-dropdown-placement="right-end" 속성을 사용하여 토글 버튼의 오른쪽에 드롭다운 메뉴를 표시하십시오.

드롭다운 항목에 .active 속성을 사용하여 현재 선택되었거나 활성화된 옵션으로 강조하십시오.

드롭다운 항목에 .disabled 속성을 사용하여 메뉴 내에서 사용할 수 없거나 비활성화된 옵션을 나타내십시오.

드롭다운 메뉴 내부에 헤더를 추가하여 관련 메뉴 항목을 명확하게 그룹화하거나 레이블을 지정하십시오.

메뉴 요소에 data-theme="dark" 를 추가하여 드롭다운 메뉴에 다크 테마를 적용하십시오. 이를 통해 개별 항목을 변경하지 않고도 어두운 내비게이션 바나 레이아웃에 맞출 수 있습니다.

data-dropdown-placement="bottom" 또는 data-dropdown-placement="top" 속성을 사용하여 드롭다운 메뉴를 토글 버튼의 아래나 위 중앙에 배치하십시오.

기본적으로 드롭다운 메뉴는 내부 또는 외부를 클릭할 때 닫힙니다. autoClose 옵션을 사용하여 드롭다운의 이 동작을 변경할 수 있습니다.

드롭다운 메뉴 내에 자유로운 형식의 텍스트를 배치하고 간격 유틸리티를 사용하세요. 메뉴 너비를 제한하기 위해 추가적인 크기 조정 스타일이 필요할 수 있습니다.

프로필 이미지, 상태 배지, 액션 행, 인라인 토글을 포함한 드롭다운 메뉴 스타일입니다.

프로필 이미지가 없을 때 회원 공개 해시 앞 6글자와 가장 가까운 색상을 적용합니다.

로컬 콘텐츠를 위한 간단한 탭 인터페이스 위젯입니다.

균등 분할된 탐색 항목은 사용 가능한 전체 너비를 채우도록 늘어나며 모든 탭이 컨테이너 전체에 고르게 배치되도록 합니다.

탐색 항목을 세로로 쌓으려면 flex 방향을 column으로 변경하여 항목들이 위아래로 표시되도록 할 수 있습니다.

필(Pill) 스타일 탐색은 탐색 항목에 둥근 색상 기반 스타일을 적용하여 활성 상태를 시각적으로 더 뚜렷하게 만듭니다.

탐색 항목에 간단한 하단 테두리 스타일을 적용하여 디자인을 미니멀하게 유지하면서 활성 상태를 강조할 수도 있습니다.

탐색 바는 미니멀한 레이아웃을 유지하면서 활성 또는 선택된 항목을 시각적으로 강조하기 위해 유색 테두리 스타일을 사용할 수 있습니다.

레이아웃을 깔끔하고 미니멀하게 유지하면서 활성 상태를 나타내기 위해 간단한 하단 테두리 스타일을 사용할 수도 있습니다.