Bootstrap 5

☞ 폼 텍스트는 명시적으로 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) 샘플 예제 에서 가져온 것입니다..)

* cf) 자바스크립트 탭 플러그인이 초기화될 때, 모든 비활성 탭은 tabindex= "-1";로 설정되고, 현재 활성화된 탭만 키보드 포커스를 받게된다. 현재 활성화된 탭에 포커스가 있으면 커서 키가 이전/다음 탭을 활성화하고, Home과 End 키는 각각 첫 번째 탭과 마지막 탭을 활성화하게 된다. 그에 따라 탭 플러그인이 tabindex 순서를 변경하는데, 커서 키 상호작용과 관련하여 수평/수직 탭 목록을 구분하지는 않는다 ← 탭 목록의 방향에 관계없이 위쪽 및 왼쪽 커서는 모두 이전 탭으로 이동하고, 아래쪽 및 오른쪽 커서는 다음 탭으로 이동한다!

✓ 웹 전근성을 위하여 항상 사용자가 포커스가 있는 요소를 알 수 있도록 하고, 모든 뷰포트 크기에서 컨텐츠의 탭 배치 순서가 논리적으로 유지되도록 해야한다 ← 참고로, html DOM의 탭 탐색 순서는 키보드의 Tab(및 Shift+Tab) 키로 확인할 수 있다!

여기 마우스를 올리세요.. 그리고 클릭해보세요..

                                    
                                        a:focus {
                                            outline: 3px dotted gray; /* 외곽선 */
                                            outline-offset: 5px; /* 요소로부터 5px만큼 오프셋 거리를 준다 */
                                        }
                                    
                                

☞ 이 동작은 Css의 :focus, :focus-within, :focus-visible 등의 의사클래스를 써서 변경해줄 수 있다!

☞ 이러한 자동 포커스 맞추기는, 일반적으로는 사용자를 혼란스럽게 할 수 있기에 권장되지 않지만, <dialog> 대화상자(예컨대, 모달 대화상자 등) 안에서는 유용하게 사용될 수 있다 - 곧, 대화상자가 열릴 때 곧장 특정 포커서블 요소로 바로 초점을 옮겨주고자할 때이다!

* cf) 폼 컨트롤 요소에 주어지는 속성인 disabled 키워드는 폼 컨트롤에서 포커스와 탭을 비활성화하며, 클릭 이벤트 또한 받지 않는다(더하여, 해당 폼 컨트롤에 강조 색상이 설정되어 있어도 그레이 색상으로 재설정된다!). 한편, 모든 요소에 적용할 수 있는 전역 속성인 inert 키워드는 해당 요소 및 모든 중첩된 컨텐츠에서 포커스를 비활성화하며, 접근성 트리에서도 삭제한다 - 주로 오프스크린 및 숨겨진 컨텐츠 섹션(예컨대, 오프캔버스 서랍 등)에서 사용된다!

✓ 브라우저는 로드될 때, 포커스가 맞춰진 요소를 뷰 안으로 스크롤한다. 따라서, 숨겨진 요소에 포커스를 주는 것은 좋지 않다. 포커스가 주어질 때 자동으로 표시되지 않는, 오프스크린에서 렌더링되는 모든 영역은 비활성으로 만들어야 한다!

                                    
                                        <!-- Typed.js 스크립트 CDN 링크 -->
                                        <script src="https://unpkg.com/typed.js@3.0.0/dist/typed.umd.js"></script>
                                    
                                

☞ 기본 설정된 초기값은 다음과 같다: "startDelay":1000, "typeSpeed":100, "backSpeed":50, "backDelay":1000, "loop":true

* cf) 웹페이지 안에 직접 내용을 배치하는 위 방식과는 달리, 곧바로 스크립트에서 문자열 형태로 넣어주거나, 또는, 문자열의 배열 형태로 넣어줄 수도 있다: 타이핑 텍스트

✓ Css 애니메이션은 Javascript에서 초기화할 때 빌드된다. 그러나 다음과 같이 사용자 정의해줄 수도 있다:

                                    
                                        /* Cursor */
                                        .typed-cursor { .. }

                                        /* If fade out option is set */
                                        .typed-fade-out { .. }
                                    
                                

                                        
                                            <link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />

                                            <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
                                            <script>
                                                const quille= new Quill('#editor', {
                                                    theme: 'snow' // 'snow' 테마로 초기화 ← 부동 도구모음 테마인 'bubble'도 있음
                                                });
                                            </script>
                                        
                                    

                                    
                                        <div id="editor">
                                            마음껏 적어보세요.. 끝입니다, 간단하지요?
                                        </div>
                                    
                                

                                        
                                            <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">

                                            <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
                                        
                                    

                                    
                                        /* 기본 플랫피커 초기화 */
                                        const fp= flatpickr("#FlatpickrInput", {}); // flatpickr
                                    
                                

                                    
                                        /* 시간 피커 옵션 설정 */
                                        const fp1= flatpickr("#FlatpickrInput1", {
                                            enableTime: true, noCalendar: true, dateFormat: "H:i"
                                        });
                                    
                                

                                    
                                        /* 날짜 & 시간 피커 옵션 설정 */
                                        const fp2= document.querySelector(".myFlatpickrs");
                                        const fp3= flatpickr(fp2, {
                                            enableTime: true, dateFormat: "Y-m-d H:i"
                                        });
                                    
                                

                                        
                                            <link href="https://unpkg.com/dropzone@6.0.0-beta.1/dist/dropzone.css" rel="stylesheet" type="text/css" />

                                            <script src="https://unpkg.com/dropzone@6.0.0-beta.1/dist/dropzone-min.js"></script>
                                        
                                    

* cf) 다음과 같이, Dropzone에 옵션을 추가해줄 수도 있다

                                    
                                        <form action="/target" class="dropzone" id="my-dropzone"></form>

                                        <script>
                                            Dropzone.options.myDropzone= { // id명은 camelCase 방식으로 작성해주어야 한다!
                                                // 설정하려는 옵션들..
                                            }
                                        </script>
                                    
                                

☞ 스크립트에서는 html에서의 id명(id= "my-dropzone")을 (-이 있다면; 제거하고)camelCase 방식으로 변경해주어야 한다!

                                        
                                            <script src="vendors/countup/countUp.umd.js"></script>                                    
                                        
                                    

0

                                    
                                        var countupInit = function countupInit() {
                                            if (window.countUp) {
                                                var countups = document.querySelectorAll('[data-countup]');
                                                countups.forEach(function (node) {
                                                    var _utils$getData = utils.getData(node, 'countup'),
                                                        endValue = _utils$getData.endValue,
                                                        options = _objectWithoutProperties(_utils$getData, _excluded);
                                            
                                                    var playCountUpTriggerd = false;
                                            
                                                    var countUP = function countUP() {
                                                        if (utils.isElementIntoView(node) && !playCountUpTriggerd) {
                                                            var countUp = new window.countUp.CountUp(node, endValue, _objectSpread({
                                                                duration: 3,
                                                                useEasing: false
                                                            }, options));
                                                
                                                            if (!countUp.error) {
                                                                countUp.start();
                                                            } else {
                                                                console.error(countUp.error);
                                                            }
                                                
                                                            playCountUpTriggerd = true;
                                                        }
                                                    };
                                            
                                                    countUP();
                                                        window.addEventListener('scroll', function () {
                                                        return countUP();
                                                    });
                                                });
                                            }
                                        };                                                          
                                    
                                

                                        
                                            <script src="plugins/listjs.js"></script>

                                            <script>
                                                .. 테이블 작성 코드
                                            </script>
                                        
                                    

░ 여기서는 간단한 기본 예만 들었지만.. 그밖에 검색, 정렬, 필터 등의 다양한 고급 사용법들은 공식 사이트로 가서 살펴보십시오 ㅡㅡ;

                                    
                                        const modal= new bootstrap.Modal('#myModal')
                                        const dropdown= new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
                                    
                                

* cf) Bootstrap 5) 버전에서부터 모든 자바스크립트 플러그인의 data- 속성은 기존의 data-*에서 data-bs-*로 이름이 변경되었는데, 옵션 이름은 camalCase 방식에서 kebab-case 방식으로 변경해주어야 한다! 한편, 부트스트랩에서 드롭다운, 팝오버 및 툴팁 등은 Popper 플러그인을 사용한다!

                                    
                                        const myModal= document.querySelector('#myModal')
    
                                        myModal.addEventListener('show.bs.modal', event => {
                                            if (!data) {
                                                return event.preventDefault() // stops modal from being shown
                                            }
                                        })
                                    
                                

☞ 모든 동사 형태 이벤트는 preventDefault(); 메서드를 제공하는데, 이는 작업이 시작되기 전에 실행을 중지하는 기능을 제공한다 ← 이벤트 핸들러에서 false 를 반환하면 자동으로 호출된다!

                                    
                                        const modal= new bootstrap.Modal('#myModal')
                                        const dropdown= new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
                                        const offcanvas= bootstrap.Offcanvas.getInstance('#myOffcanvas')
                                        const alert= bootstrap.Alert.getOrCreateInstance('#myAlert')
                                    
                                

☞ 모든 플러그인 생성자는 DOM 요소 또는 적절한 Css 선택자를 첫번째 인수로 받을 수 있는데, 부트스트랩은 단일 요소만 지원하므로 플러그인 요소들은 querySelector(); 메서드로 찾을 수 있다!

                                    
                                        const myCollapseEl= document.querySelector('#myCollapse')

                                        myCollapseEl.addEventListener('shown.bs.collapse', event => {
                                            // Action to execute once the collapsible area is expanded
                                        })
                                    
                                

                                    
                                        const myCarouselEl= document.querySelector('#myCarousel')
                                        const carousel= bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

                                        myCarouselEl.addEventListener('slid.bs.carousel', event => {
                                            carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
                                        })

                                        carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
                                        carousel.to('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!
                                    
                                

                                    
                                        const bsButton= new bootstrap.Button('#myButton');
                                
                                        // 모든 버튼을 토글한다
                                        document.querySelectorAll('.btn').forEach(buttonElement => {
                                            const button= bootstrap.Button.getOrCreateInstance(buttonElement)
                                            button.toggle()
                                        });
                                    
                                

░ 스크립트 API는 Javascript를 모르는 상태에서는 이해하기에 어렵고, 또 당장 쓸 일도 없을 터이니.. 대충, 대충,, 보시고 나중에 Javascript를 배우게 된다면; 그때 한번 다시 살펴보십시오 ㅡㅡ;