ul .dropdown-menu dropdown-menu-end

div .dropdown dropup/dropend/dropstart

☞ .btn-group btn-group-lg/sm 클래스는 그룹 내 모든 버튼의 크기를 더 크게/작게 설정한다!

☞ 위 드롭다운 메뉴는 기본적으로 앞쪽에서부터 맞추어지지만, md 브레이크포인트에서부터는(.dropdown-menu dropdown-menu-lg-end) 뒤쪽에 맞추어진다 ← 화면 크기 늘이고 줄이면서 확인해보세요..

                                                    
                                                        .fadeUp-Ani {
                                                            animation-name: fadeUp;
                                                            animation-duration: 700ms;
                                                            animation-timing-function: margin cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
                                                        } @keyframes fadeUp {
                                                            0% { opacity: 0; margin-top: 1rem; }
                                                            100% { opacity: 1; margin-top: 0; }
                                                        }
                                                    
                                                

• li .list-group-item list-group-item-action
• li .list-group-item active
• li .list-group-item disabled

☞ .list-group-flush는 상위 컨테이너(예컨대, 카드 등)에서 목록 아이템들을 가장자리에서 가장자리로 렌더링하기 위해 일부 테두리와 둥근 모서리를 제거해준다 ← 위 코드에서 .list-group-flush를 제거한 뒤 확인해보십시오..

✓ 참고로, <a> 태그가 아닌 <button> 태그를 사용할 때라면; .disabled 클래스 대신 disabled 속성을 사용할 수 있다 ← <a> 태그에서는 disabled 속성을 지원하지 않는다!

• First item
• Second item
• Third item

• First item
• Second item
• Third item

☞ 리스트그룹 아이템들에 대해 .list-group-item-action 클래스를 주니.. 마우스 호버 시의 움직임이야 머 그런 것인데, 위쪽 예제와는 다르게 전체 너비를 차지하는군요(무슨 사연인지, 저도 좀 헷갈립니다?) ← .list-group-item-action 클래스를 어느 한 아이템에만 주면; 또 달라집니다 - 코드 바꿔가며 스스로 확인해보세요 ㅡㅡ;

• First item
• Second item
• Third item

☞ 이 반응형 수평 리스트그룹은 md 브레이크포인트서부터 수평 리스크그룹이 되며, .flex-fill 클래스는 각 항목의 길이를 똑같게 해서 전체 너비를 채워줍니다

☞ 위에서 보이는 구분선(»)은 이 강좌사이트를 위해 마련한 사용자정의 Css를 쓴 것이라 이 예제 코드대로의 모습은 아닙니다 - 부트스트랩 기본값은 /입니다!

* cf) Css에서 Breadcrumb 항목은 일반적으로 인라인 링크로 작성하며, 각 항목 사이에 구분기호가 있어 개별 페이지간의 계층구조를 나타내는데, 보통 <nav> 태그와 <ul> 태그(& <li> 안의 <a> 태그도 함께)를 조합하여 플렉스박스로 작성한다

                                                    
                                                        .breadcrumb_ex ul {
                                                            display: flex; flex-wrap: wrap; justify-content: center;
                                                            list-style: none;
                                                        } .breadcrumb_ex li:not(:last-child)::after {
                                                            display: inline-block;
                                                            margin: 0 0.5rem;
                                                            content: "→"; /* 이 구분기호는 필요하다면 언제든 변경해주면 된다! */
                                                        }
                                                    
                                                

1. «Prev
2. 1
3. 2
4. 3
5. 4
6. 5
7. »Next

☞ 각 번호들은 이 웹문서를 위해 사용자정의 클래스를 써서 꾸며준 것입니다 ← 부트스트랩에서의 기본 모양은 « 1 2 3 4 » 형태입니다

* cf) Css에서 Pagination 은 사용자가 게시물 검색 결과 등의 컨텐츠 페이지 사이를 이동할 수 있는 페이지 매김을 표시하는데, 그 사용 방식은 Breadcrumb에서와 거의 비슷하다

                                                    
                                                        .pagination_ex {
                                                            display: flex; flex-wrap: wrap; justify-content: center;
                                                            list-style: none;
                                                        } .pagination_ex li { margin: 1em; }
                                                    
                                                

• Active
• Link
• Disabled

☞ Nav 배치는 플렉스박스 유틸리티를 써서 .nav justify-content-start/center/end와 같이 사용해주면 된다. 한편, 스크린리더기 등에 현재 페이지임을 알리기 위해서는; aria-current= "page" 속성을 넣어주면 된다

☞ 여기서는 <ul>(및 <li>) 대신 <nav>(및 <a>)를 사용하였는데, 필요하다면; .nav nav-underline으로 active 상태의 링크에 밑줄을 표시해줄 수도 있다!

• Ul .nav nav-tabs
• Link
• Disabled

* cf) 동적 탭 내비게이션에서 탭 요소는 새 페이지나 위치로 이동하는 링크가 아니라 동적 변경을 트리거하는 컨트롤이므로, 탭을 위해서는 <button> 요소를 사용하는 것이 가장 표준적이다!

☞ 컨트롤 버튼에서 .data-bs-toggle= "collapse" 속성을 주어야 하며, 펼쳐질 대상요소에서 .collapse 클래스를 주는 것 또한 필수이다!

☞ Collapse의 대상이 되는 요소는 축소될 때 height: 0;으로 애니메이션되는데, (Css가 애니메이션을 처리하는 방식을 고려할 때)대상이 되는 요소에서 padding은 사용할 수 없다!

☞ 참고로, 위 코드에서 굳이 바깥 <div>를 만들어 min-height: 120px; 값을 준 것은 문서에서 과도한 다시 그리기를 방지하기 위해 미리 공간을 확보해둔 것일뿐, 반드시 필요한 것은 아닙니다 ← 문제되지 않는다면; 저 바깥 <div>를 제거하시면 됩니다..

* cf) 내비게이션 바를 사용하려면; 전체 내비게이션 바 주위를 <nav> 요소로 둘러싸주어야 한다. 만약, <nav> 대신 <div>와 같은 보다 일반적인 요소를 사용하는 경우라면; <ul>의 부모요소에서 role= "navigation" 속성을 추가하여 스크린리더기 등에 명시적으로 알리도록 해야한다 ← 곧, <ul> 자체에서 role= "navigation"으로 설정해서는 안된다!

✓ 내비게이션 바는, 비록 .nav-tabs 클래스를 가진 탭으로 스타일이 지정된 경우라도, role= "tablist", role= "tab", role= "tabpannel" 속성을 주어서는 안된다 - 이는 동적 탭 인터페이스에만 적합하다!

☞ 위 코드에서 class="d-flex"를 제거한 뒤의 모습과 비교해보십시오..

* cf) 때로는 내비게이션 바 외부에 위치한 컨테이너 요소의 컨텐츠를 트리거해야 할 때가 있는데, 부트스트랩 플러그인은 id 및 data-bs-target 속성의 매칭으로 작동하기에 이 또한 간단하다!

(* 이곳을 열어줍니다.. ← 밑으로 내려가려면; 다시 닫아주세요..)

☞ 여기서는 <nav> 요소에서 data-bs-theme= "dark" 값을 주었지만, 내부 드롭다운 메뉴에서 줄 수도 있다 ← 이 경우, 드롭다운 메뉴에서만 다크모드로 된다!

* cf) 부트스트랩 v5.3)에서 새 컬러모드가 도입되면서, <nav> 요소에서의 .navbar-light/dark 클래스는 더 이상 사용되지 않는다. 드롭다운 메뉴에서의 .dropdown-menu-dark 클래스도 또한 제거되었다. 대신, 루트 요소나 부모 래퍼, 또는 드롭다운 요소 자체에서 data-bs-theme= "dark" 클래스를 사용하면 된다!

* cf) 부트스트랩의 그리드 시스템과 플렉스박스, 내비게이션 바에다, 사용자정의 Css 및 JavaScript를 써서 스티키 고정 사이드바 및 스티키 고정 좌/우측 사이드바 를 작성할 수 있다

✓ 오프캔버스 패널은 개념적으로 모달 대화상자이므로 aria-labelledby= "제목참조"를 추가해주어야 한다 ← 참고로, role= "dialog"는 이미 부트스트랩 자바스크립트에 내재되어 있으므로 필요하지 않다!

Link with href Open with button

* cf) 확장/축소되는 Navigation Bar를 Offcanvas 컴포넌트를 써서 Offcanvas 서랍으로 변환할 수도 있는데, Offcanvas 기본 스타일을 모두 확장하고, .navbar-expand-* 클래스를 사용하면; 동적이고 유연한 오프캔버스 사이드바 를 만들 수 있다

✓ 부트스트랩 v5.3)의 새로운 색상모드 도입으로 인해 이전의 -dark/light 색상 전환은 더 이상 사용되지 않는다. 대신 부모 래퍼 또는 컴포넌트에서 data-bs-theme= "dark"로 설정하고, .offcanvas text-bg-dark 클래스를 조합해주면 된다

                                        
                                            body { 
                                                position: relative; height: 800px; margin-top: 0.5rem; overflow: auto;
                                            }
                                        
                                    

☞ '스파이드' 컨테이너를 스크롤하면; 해당 영역에 새로이 .active 클래스가 추가되고, 기존에 연결되어 있던 내비게이션의 앵커 링크는 제거된다!

(* 이 가로 스크롤 스파이 및 세로 스크롤 스파이 샘플은 Bootstrap 5) 샘플 예제 에서 가져와(약간 손질한)것입니다..)

* cf) 모달은 position: fixed;를 사용한다. 따라서, 가능하면 모달 코드를 최상위 위치에 배치하여 다른 요소의 잠재적인 간섭을 배제하도록 해야한다 ← 특히 모바일 장치에서 사용할 때, 그리고 다른 고정된 요소 내에서 모달을 중첩할 때는 문제가 발생할 소지가 있다!

☞ .modal fade fade-in은 모달에 페이드인 효과를 준다!

* cf) 구조적으로 모달 대화상자는 자신만의 별도 문서/컨텍스트를 나타내므로 .modal-title은 (이상적으로는)<h1> 태그를 써야 한다 - 필요한 경우, 폰트 사이즈 관련 클래스를 써서 제목의 모양을 스타일링해주면 된다. 또한, .modal에 aria-labelledby 속성을 추가하여 (모달 헤더를 참조하여)모달 대화상자에 대한 설명을 제공해주어야 한다 ← 참고로, role= "dialog" 속성은 (이미 부트스트랩의 JavaScript를 통해 추가되어 있으므로)따로 추가할 필요는 없다!

☞ 필요에 따라 툴팁이나 팝오버를 모달 내에 배치할 수도 있는데, 모달이 닫히면; 내부의 모든 툴팁과 팝오버도 자동으로 해제된다!

☞ 폼 텍스트는 명시적으로 aria-describedby 속성을 써서 폼 컨트롤과 연결되어야 한다 - 이렇게 하면, 사용자가 컨트롤에 포커스를 주거나 입력할 때 스크린 리더기 등의 보조 기술이 이 폼 텍스트를 확실히 알려줄 것이다!

* cf) 부트스트랩의 그리스시스템으로 작업할 때는 폼 요소를 .col 안에 넣어주어야 한다 ← 부트스트랩은 내부적으로 고정된 높이를 설정하고, 브라우저간 약간의 불일치는 무시한다!

☞ 플로팅 레이블(.form-floating)을 쓸 때는, <input> 요소가 <label> 앞으로 와야한다!

☞ Default checkbox 를 제외한 나머지 컨트롤들은 스스로 작성해서 추가해주십시오.. ← 그저 위 <input> 요소에다 각각 checked, disabled, checked disabled 속성 키워드를 추가해주기만 하면 됩니다 ^^

☞ 라디오 버튼의 이름(name= "exampleRadios")은 모두 같아야 한다!

* cf) <label>에서 .form-check-label 대신, .btn 스타일을 사용하여 버튼 비슷한 체크박스나 라디오 버튼을 만들 수도 있다 ← 이러한 토글 버튼은 필요 시, 버튼 그룹으로 추가로 그룹화할 수 있다!

Single toggle

☞ 컨트롤의 특성을 보조기술에 더 정확하게 전달하고자 한다면; role= "switch" 속성을 넣어주는 것이 좋다!

☞ multiple 속성을 주면; Ctrl 및 Shift 키와의 조합으로 복수 선택을 가능하게 한다!

(* 이 로그인 폼 샘플은 Bootstrap 5) 샘플 예제 에서 가져온 것입니다..)