• 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

• First item
• Second item
• Third item

☞ 이 반응형 수평 리스트그룹은 md 브레이크포인트서부터 수평 리스크그룹이 되며, 각 항목의 길이를 똑같게 해서 채워진다(.flex-fill)

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

➥ 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

☞ 페이지네이션의 수평 배치는 플렉스박스의 .justify-content-start/center/end 유틸리티를 쓰면 된다!

➥ 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

➥ 동적 탭 내비게이션에서는 구조, 기능 및 현재 상태를 스크린리더기 등의 보조기술에 전달하기 위해 role= "tab"과 role= "tablist", role= "tabpanel" 및 추가적으로 aria- 속성을 필요로 한다. 한편, JavaScript는 활성 탭에 aria-selected= "true"를 추가하여 선택된 상태를 처리하므로, 동적 탭 인터페이스에서는 aria-current 속성이 필요하지 않다!

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

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

☞ 참고로, 위 코드에서 굳이 바깥 <div>를 만들어 min-height: 120px; 값을 준 것은 문서에서 과도한 다시 그리기를 방지하기 위해 설정해준 것일뿐, 반드시 필요한 것은 아니다 ← 저 코드를 제거한 뒤에 한번 확인해보십시오..

내비게이션 바 작성 예 1)

내비게이션 바 작성 예 2)

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

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

☞ 브랜드(= 사이트 로고)에는 텍스트나 이미지 모두 사용할 수 있다!

내비게이션 바 토글러

➥ 내비게이션 바의 토글러 아이콘은 기본적으로 내비게이션 바의 배경에 맞추어 정의되어 있으며(단, 내비게이션 바와 토글러 모두 사용자 지정에 의한 색상 변경도 가능하다!), 내비게이션 바의 렌더링 높이(기본값: ~ 54px)는 기본적으로 안의 내용 크기에 의해 제어된다!

✓   때로는 내비게이션 바 외부에 위치한 컨테이너 요소의 컨텐츠를 트리거해야 할 때가 있는데, 부트스트랩 플러그인은 id 및 data-bs-target 속성의 매칭으로 작동하기에 이 또한 간단하다 ← 밑으로 내려가려면; 다시 닫아주세요..

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

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

스크롤링 내비게이션 바

➥ 스크롤은 기본적으로 75vh(혹은, 뷰포트 높이의 75%)에서 시작하지만, 사용자정의 스타일로 재정의해줄 수도 있다 ← 참고로, 더 큰 뷰포트에서 내비게이션 바가 확장될 때, 컨텐츠는 기본 내비게이션 바에서와 같은 모양으로 나타난다!

고정 내비게이션 바

스티키 내비게이션 바

➥ 고정 내비게이션 바는 position: fixed; 속성을 사용하는데, 이는 DOM의 정상적인 흐름으로부터 가져오는 것이므로 다른 요소와의 겹침을 방지하기 위해 사용자정의 css(예컨대, padding-top)가 필요할 수도 있음을 의미한다!

스티키 고정 사이드바 예 1

스티키 고정 사이드바 예 2

➥ 참고로, Sticky-JS 는 순수 자바스크립트로 작성된 반응형 Sticky 요소 라이브러리로서, 이를 이용하면 웹사이트에서 (추가적인 Css 없이도)Sticky 요소를 쉽게 고정시킬 수 있다!

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

Link with href Open with button

➥ 반응형 오프캔버스는 설정된 브레이크포인트 아래에서만 오프캔버스로 작동하고 브레이크포인트서부터는 일반적인 코드로 작동한다:

반응형 오프캔버스

☞ 다크 오프캔버스는 그에 맞추어 타이틀 색상에도 밝은 계통 색상으로 적절히 변경해줄 필요가 있다: .offcanvas-title text-bg-dark

오프캔버스 내비게이션 바

➥ 참고로, jc-Starter , jc-Nav , jc-Nav2 Sticky-Nav 는 이 강좌 사이트를 만들기 위해 GSAP)의 z-Animation과 스티키 고정, 오프 캔버스 및 스크롤 스파이 등을 써서 만든, 가칭 fancy Navigation Bar인데.. 세부 내용은 좀 복잡하여 생략하니 간단히 모양만 살펴보십시오..

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

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

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

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

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

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

정중앙 스크롤링 모달

멀티 토글링 모달

                                        
                                            const dialog= document.querySelector("#dialog-ids") // Dialog 요소
                                            const showButton= document.querySelector(".dialog_button_open") // 모달창 열기 버튼(dialog 외부)
                                            const closeButton= document.querySelector(".dialog_button_close") // 모달창 닫기 버튼(dialog 내부)
                                        
                                            showButton.addEventListener("click", () => {
                                                dialog.showModal() // 모달창 열기
                                            });
                                        
                                            closeButton.addEventListener("click", () => {
                                                dialog.close() // 모달창 닫기
                                            });
                                        
                                    

➥ 기본적으로 모든 브라우저에서 Esc 키를 누르면 모달창을 닫을 수 있지만(하지만, 키보드에 액세스할 수 없는 터치 스크린 사용자도 존재한다!), 스크립트의 요소.close() 메서드로 설정해주는 모달창 내부 [닫기] 버튼으로도 모달창을 닫을 수 있다. 또는, 모달창 내부는 대개 폼으로 작성되고, 따라서 폼 내부의 [확인] 및 [취소] 버튼을 이용하여 모달을 닫는 수단들도 있다 ← 이렇게 모달창 내부에서 창을 닫을 수 있는 수단을 명시적으로 만들어주는 것이 사용자 편의성 측면에서 유익하다!

                                        
                                            #dialog-ids::backdrop {
                                                background-image: linear-gradient(
                                                    90deg, black, gray, black
                                                );
                                    
                                                opacity: 0.75;
                                            }