1. 기본 개념`form`에 유효성 검사 피드백을 제공하기 위해 다음 두 클래스 중 하나를 사용`.was-validated`: 제출 이후 유효성 검사 적용`.needs-validation`: 제출 전 사용자 정의 스크립트로 제어하는 방식2. 필수 속성각 `input`, `select`, `textarea` 요소에 `required` 속성을 넣어야 유효성 검사 동작`.valid-feedback` / `.invalid-feedback` 클래스를 활용해 성공/실패 메시지 제공 가능 Username: Looks good! Please fill out this field. Password: Valid password. Please enter your pas..

1. 기본 개념`.form-floating` 클래스를 사용하면 라벨이 input 안쪽에 있다가, 사용자가 입력하거나 클릭할 경우 위로 떠오름 (애니메이션 효과)label은 반드시 input 뒤에 위치해야 하며, `placeholder` 속성도 필수 Email address2. 비밀번호 필드 예시 Password3. Textarea (텍스트 영역)textarea도 floating label을 적용반드시 `placeholder`를 입력해야 작동 Comments4. Select 메뉴 (주의사항 있음)select에 floating label을 적용할 수 있지만, 애니메이션 효과는 없음label이 상단 왼쪽에 고정 Open this select menu One Two Th..

1. 기본 구조`.input-group`: 전체 그룹 컨테이너`.input-group-text`: 앞/뒤 텍스트 또는 아이콘 요소`.form-control`: 인풋 필드 @ 2. 위치별 추가 요소 @ @example.com3. Input Group 크기 조절.........4. 여러 개 인풋 또는 텍스트 Person One Two 5. 체크박스/라디오 버튼 포함  6. 버튼 추가 버튼 검색 OK Cancel7. 드롭다운 버튼 추가 선택 옵션 1 옵션 2

1. 기본 사용법Custom range`type="range"`: HTML 기본 range input`.form-range`: Bootstrap 5 슬라이더 스타일 적용 2. 최소값/최대값 설정 (`min`, `max`)기본값: `min=0`, `max=100`직접 설정 가능3. 간격 조정 (`step`)기본 간격: `1`원하는 단위로 조정 가능 (ex. 10, 0.5 등)4. 팁`.form-range`는 Bootstrap에서 기본 스타일만 가능실시간으로 값을 보려면 JavaScript로 연동하거나 `output` 태그와 함께 사용Range: 50

1. 기본 체크박스 (Checkbox) Option 1`.form-check`: 컨테이너`.form-check-input`: input 태그용 클래스`.form-check-label`: label 태그용 클래스`checked`: 기본 선택 상태🔒 비활성화하려면 `disabled` 속성 추가2. 라디오 버튼 (Radio Buttons) Option 1`type="radio"` 사용`name` 속성 동일해야 하나만 선택 가능선택된 기본 값에는 `checked` 추가3. 토글 스위치 (Toggle Switch) Dark Mode`.form-switch` 클래스 사용 시 스위치 형태로 표시됨동작은 체크박스와 동일

1. 기본 셀렉트 메뉴`` 태그에 `.form-select` 클래스를 사용하여 기본 셀렉트 박스를 스타일링 1 2 3 4`.form-select` 클래스 사용내부에 `` 태그로 항목 정의2. 셀렉트 박스 크기 조절 `.form-select-lg`: 큰 셀렉트 박스`.form-select-sm`: 작은 셀렉트 박스3. 비활성화된 셀렉트 메뉴 1 2`disabled` 속성으로 사용 불가능하게 설정4. 다중 선택 셀렉트 1 2 3`multiple` 속성 추가 시 Ctrl(또는 Cmd)이나 Shift로 다중 선택 가능5. Data List (입력 추천 목록)Choose your browser: ``과 ``를 활용자동완성 기능 제공

1. 기본 Form 구조`form-control`, `form-check` 등의 유틸리티 클래스를 이용해 다양한 형태의 폼 생성 Email: Password: Remember me Submit`.form-control`: input, textarea에 기본 스타일 적용`.form-label`: label에 패딩 정렬`.form-check`, `.form-check-input`, `.form-check-label`: 체크박스, 라디오 스타일2. TextareaComments:`.form-control`을 그대로 사용3. 가로형 폼 (Row & Grid 사용) `.row`, `.col` 구조로..

1. 기본 구조Offcanvas는 모달처럼 숨겨진 콘텐츠를 슬라이딩 형식으로 보여주는 UI 요소보통 사이드바 메뉴로 사용 헤더 내용이 들어갑니다. 버튼 사이드바 열기 클래스  설명 `.offcanvas`Offcanvas 컴포넌트 생성`.offcanvas-start`왼쪽에서 슬라이딩`.offcanvas-header`헤더 영역`.offcanvas-body`본문 내용 영역`.btn-close`닫기 버튼`data-bs-toggle="offcanvas"`열기 동작 지정`data-bs-target="#id"`연결할 Offcanvas ID2. 위치 설정 클래스 위치  클래스 왼쪽`.offcanvas-start`오른쪽`.offcanvas-end`위`.offcanvas-top`..

1. Scrollspy 사용 조건Scrollspy는 스크롤 위치에 따라 내비게이션 링크를 자동으로 활성화 상태로 업데이트하는 기능긴 페이지에서 섹션이 어디인지 시각적으로 알려주는 데 유용 속성  설명 `data-bs-spy="scroll"`해당 요소를 scrollspy로 지정`data-bs-target=".navbar"`감시할 내비게이션 영역 지정 (클래스나 ID)`data-bs-offset="50"`스크롤 계산 시 상단 여백 (픽셀)`position: relative`Scrollspy 요소에 필수 CSS (예: `` 또는 ``)2. 구조 예시 Section 1 Section 2 Section 3 내용 1 내용 2 내용 3주의: `data-bs-target`으로 지정한 내비..

1. 기본 구조Toast는 사용자에게 일시적인 메시지를 띄워주는 컴포넌트알림(Alert)처럼 보이지만, 자동으로 사라지는 특징이 있어 피드백용 메시지로 자주 사용 Toast Header Some text inside the toast body 구성 요소 설명 `.toast`토스트 전체 컴포넌트`.toast-header`상단 제목 영역`.toast-body`본문 메시지`.btn-close`닫기 버튼, `data-bs-dismiss="toast"` 필요`.show`토스트가 보이도록 활성화함2. 토스트 보이게 하기토스트는 기본적으로 숨겨져 있음.JavaScript로 수동으로 `.show()` 호출해야 함:Show Toast Notification ..