ul .dropdown-menu dropdown-menu-end

div .dropdown dropup/dropend/dropstart

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

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

☞ .dropdown 버튼에서 .btn mb-0 식으로 마진을 없애주는 것이 좋다. 아니라면; 마우스 커서가 버튼에서 중간의 빈 공간을 거쳐 아래 .dropdown-menu로 내려갈 때 아래 드롭다운 메뉴가 사라져버리는 상황과 마주칠 수도 있다!

                                    
                                        /* 페이드업 애니메이션 사용자정의 Css */
                                        .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; }
                                        }
                                    
                                

☞ 여기서는 margin-top: 0; 값으로 .dropdown 내부의 버튼과 .dropdown-menu 사이의 간격을 없애주었습니다만.. 마진병합 현상 등의 예기치 못한 문제까지도 고려할 필요가 있기에 위 html 코드에서 다시 한번, 드롭다운 버튼에 부트스트랩의 .mb-0 클래스를 더해준 것입니다!

1. li .list-group-item list-group-item-action
2. li .list-group-item active
3. li .list-group-item disabled

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

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

░ .list-group list-group-flush에다 카드에서의 둥근 모서리(.card border border-5 rounded-5)를 보태니, 굳이 애 안써도 이 자체만으로 꽤 멋진 카드 테두리 모양이 만들어지는군요 - 어떤 식으로 붙여도 응용이 가능한, 이것이 바로 부트스트랩의 커다란 유익함입니다 ^^

• 아이템 1
• 아이템 2
• 아이템 3

• 아이템 1
• 아이템 2
• 아이템 3

• 아이템 1
• 아이템 2
• 아이템 3

☞ 결과는? 플렉스박스의 아이템 밀어내기(.me/ms-auto)와 정확히 같은 방식으로 움직입니다 ← 1번째와 3번째 아이템에 함께 넣어주면? 스스로 확인해보십시오 ㅡㅡ;

• First item
• Second item
• Third item

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

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

                                    
                                        .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: "→"; /* 이 구분기호는 필요하다면 언제든 변경해주면 된다! */
                                        }
                                    
                                

☞ Css에서 Breadcrumb는 플렉스박스를 써서 배치한다: justify-content 속성을 사용하여 <ul> 컨테이너를 내부 중앙에 배치하며, <li> 리스트 자체도 인라인 방향으로 배치된 플렉스 아이템이 된다!

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

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

1. 이전«
2. Page11
3. Page12
4. 현재 Page13
5. Page14
6. Page15
7. 다음»

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

☞ Css에서 Pagination은 플렉스박스를 써서 배치한다. justify-content: center; 속성을 사용하여 <ol> 컨테이너를 내부 중앙에 배치하며, <li> 리스트 자체도 인라인 방향으로 배치된 플렉스 아이템이 된다!

░ Pagenation은, 일반적으로 페이지 맨 위 헤더 영역에 배치되는 Breadcrumb와는 달리, 대개 컨텐츠 항목들 아래 가로 정중앙에 한 행으로 배치한다!

• Active
• Link
• Disabled

☞ 스크린리더기 등에 현재 페이지임을 알리기 위해서는; aria-current= "page" 속성을 넣어주면 된다

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

☞ 위 <ul> 탐색 탭(.nav nav-tabs) 대 아래 <div> 컨텐츠창(.tab-content)의 내부 구조 및 이름들을 비교하면서 세세히 살펴보십시오.. ← 특히, 각 탭의 href= 속성은 컨텐츠창의 id= 속성으로 연결되어 있습니다!

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

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

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

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

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

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

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

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

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

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

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

☞ 축소 시 내비게이션바 토글 버튼은 기본적으로 왼쪽 정렬되지만, <a> 요소와 같은 형제요소의 뒤에 나오는 경우에는 자동적으로 오른쪽으로 배치된다!

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

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

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

☞ 여기서는 내비게이션 바를 하단으로 내린게 아니라, .fixed-bottom으로 하단 바닥글을 배치한 것입니다 - 물론, 상단 메뉴바를 없애고 이 곳으로 내릴 수도 있지만.. 그 경우에는 좀 피곤한 문제들이 생길 수도 있기에(예컨대, 메뉴바 드롭다운의 펼침 방향 등..), 저로서는 하단 내비게이션 바는 그다지 권장하지 않습니다..

                                        
                                            html { overflow-y: scroll; }

                                            @media (min-width: 992px) { /* 너비가 992px를 넘어서면 */
                                                .sidebar {
                                                    position: fixed; top: 0; bottom: 0; overflow-y: auto;
                                                }
                                                .sidebar.sidebar-left { left: 0; } /* 좌측 사이드바 */
                                                .sidebar.sidebar-right { right: 0; } /* 우측 사이드바 */
                                            }
                                        
                                    

☞ 찬찬히 두 예제의 코드를 비교해가면서, 그 차이를 확인하십시오..

* cf) 순수 자바스크립트로 작성된 반응형 Sticky 요소 라이브러리인 Sticky-JS ↓ 플러그인을 쓰면; 웹사이트에서 (추가적인 Css 없이도)Sticky 요소를 쉽게 고정시킬 수 있다

                                        
                                            <script src="vendors/sticky-js/sticky.min.js"></script>

                                            <!-- 스티키 요소 초기화 -->
                                            <script>
                                                var sticky= new Sticky('.sticky') // 스티키 요소: .sticky
                                            </script>
                                        
                                    

☞ 특정 뷰포트 크기에서부터 스티키를 활성화하기 위해 data-sticky-for= '값' 속성으로 브레이크 포인트를 설정해줄 수 있다 - 곧, 스티키는 설정된 브레이크포인트 너비보다 작을 때 해제된다. 또한, 스크롤 시 페이지와 스티키 요소 사이에 마진을 주기위해 data-margin-top= '값' 속성을 추가해줄 수도 있다. 나아가, data-sticky-wrap= "true" 속성을 사용해주면; 컨텐츠가 점핑하는 것을 방지한다!

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

Link with href Open with button

☞ .offcanvas-header 내부에서도 자바스크립트 기능을 트리거하는 해제 버튼을 추가해주어야 한다: data-bs-dismiss= "offcanvas"

* cf) 확장/축소되는 내비게이션 바를 .offcanvas 컴포넌트를 써서 오프캔버스 서랍으로 변환할 수도 있는데, Offcanvas 기본 스타일을 모두 확장하고, .navbar-expand-* 클래스를 사용하면; 동적이고 유연한 오프캔버스 내비게이션바 를 만들 수 있다. 반면, .navbar-expand-* 클래스를 제거하면; 항시 축소되어 있는 오프캔버스 내비게이션바 가 된다

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

                                        
                                            스크롤대상 컨테이너 { 
                                                position: relative; height: auto; margin-top: 0.5rem; overflow: scroll;
                                            }
                                        
                                    

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

░ 그리 만만치는 않지만, 순수 자바스크립트로 작성된 반응형 Sticky 요소 라이브러리인 Sticky-JS ↑ 및 전문가를 위해 설계된 매우 강력한 JavaScript 라이브러리인 z-Animation ↓ 과 결합된 Fancy 내비게이션바 , 스크롤스파이 가로/세로 내비게이션인 세로 스크롤 스파이 및 가로 스크롤 스파이 예제를 찬찬히 뜯어보면서.. 스크롤 스파이의 사용법을 익히십시오 - 오늘 숙제입니다 ㅡㅡ;

                                        
                                            <body>
                                                <div className="animateMe"></div>
                                                <h1>Hello GSAP!</h1>

                                                ..

                                                <!-- GSAP 스크립트 소스 -->
                                                <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>

                                                <!-- 사용자정의 스크립트 코드 -->
                                                <script src="./myCustomCode.js"></script>
                                                <script>
                                                    // use a script tag or an external JS file
                                                    document.addEventListener("DOMContentLoaded", (event) => {
                                                        gsap.registerPlugin(Flip) // 다른 플러그인들도 각각 같은 플러그인 이름으로 넣어주면 됩니다!
                                                        // gsap code here!
                                                    });
                                                </script>
                                            </body>
                                        
                                    

                                    
                                        --bs-fancynav-togglerbar-bg: #ffffff;
                                        --bs-fancynav-collapse-bg: #ffffff;
                                        --bs-fancynav-link-color: #000000;
                                    
                                

✓   그외에도 GSAP에는 다양한 플러그인이 포함되어 있는데, 필요하면; Demos & Starters 예제 샘플들을 살펴보십시오..

                                    
                                        <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/gsap.min.js"></script>

                                        <!-- 각 플러그인 스크립트 소스 -->
                                        <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/Flip.min.js"></script>
                                        <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/ScrollToPlugin.min.js"></script>
                                        <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/ScrollTrigger.min.js"></script>
                                        <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/Draggable.min.js"></script>
                                        <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/Observer.min.js"></script>
                                        <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/MotionPathPlugin.min.js"></script>
                                        <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/EaselPlugin.min.js"></script>
                                        <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/PixiPlugin.min.js"></script>
                                        <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/TextPlugin.min.js"></script>

                                        <script>
                                            // use a script tag or an external JS file
                                            document.addEventListener("DOMContentLoaded", (event) => {
                                                gsap.registerPlugin(Flip) // 다른 플러그인들도 각각 같은 플러그인 이름으로 넣어주면 됩니다!
                                                ..
                                                // gsap code here!
                                            });
                                        </script>