Bootstrap 5

[웹코딩 가이드] 홈

이제 지~난한(ㅡㅡ;) Bootstrap 5 강좌의 긴 여정을 시작합니다.. diagram-arrow-down

░ Web 표준은 html로 웹사이트 틀을 만들고, Css로 꾸며주고, Javascript로 동작시키는데.. 이것들은 각각 분리하여 작성되어야 나중에라도, 누구라도,, 알아보기 쉽고 유지 관리에도 도움이 된다!

☞ 이 Bootstrap 5) 강좌는 html 5) 및 Css 3)의 대략적인 기본은 갖추고, 직접 코딩하고 검색하면서 스스로 학습하고자 하는 분들(만!)을 대상으로 합니다 ㅡㅡ;

이미지/미디어 다루기

░ 부트스트랩에서 이미지는 기본적으로 반응형 으로 동작하며, max-width: 100%; height: auto;로 부모 요소를 꽉 채우게 된다!

이미지 삽입 및 배치
이미지 삽입 시 .img-fluid는 기본값이며, .img-thumbnail로 주면; 둥근 모서리를 가진 1픽셀 테두리(= border rounded 1px)로 이미지를 둘러싸준다
Fluid image Thumbnail image
가운데 정렬 이미지
1. <picture> & <source> 태그와 함께 사용할 때는; 이미지 관련 클래스를 <img> 태그에 넣어주어야 한다:
picture 이미지
2. 이미지에 설명글을 달아줄 때는, <figure>(& .figure) 요소 안에서 <img>(& .figure-img)의 위나 아래에 <figcaption>(& .figure-caption)으로 작성해주면 된다:
위쪽에 단 설명글
figure 이미지
아래쪽에 단 설명글
➥ Css 3) 이미지 쉬프트

가끔은, 이미지를 좌/우 사이드 방면으로 이동시켜야할 때가 있는데, 이미지의 부모 요소에서 .img-shifted shift-left/right 사용자정의 클래스를 추가해주면; 이미지가 컨테이너 바깥으로 빠져나가게 된다 

                                                    
                                                        
                                                    
                                                
                                                    
                                                        .bg-image { position: absolute; left: 0; bottom: 0; right: 0; top: 0; }
                                                        
                                                        .bg-cover {
                                                            background-repeat: no-repeat; background-position: center center; background-size: cover;
                                                            backface-visibility: hidden;
                                                        }
                                                        
                                                        .bg-contain {
                                                            background-repeat: no-repeat; background-position: center center; background-size: contain;
                                                            backface-visibility: hidden;
                                                        }
                                                        
                                                        .img-shifted { position: relative; overflow: hidden; }
                                                        .img-shifted.shift-left { width: 100%; float: right; }
                                                        .img-shifted.shift-right { width: 100%; }

☞ bg-cover 값을 줄지 bg-contain 값을 줄 지는 이미지의 크기에 맞춰 적절한 값으로 선택해주면 됩니다..

미디어 삽입하기
html 5)에서 미디어 삽입 시는; .media 요소 내부에 넣어주면 된다

Media 영역
유튜브 등의 동영상 삽입 시는; .ratio ratio-1x1/4x3/16x9/21x9(기본값: 1x1)로 넣어준다. 이는 <iframe>, <video>, <object> 등으로 삽입한 비디오나 슬라이드를 부모 요소의 너비에 따라 반응형으로 처리하는데, 스타일은 부모 요소의 .ratio 클래스로부터 자식 요소로 직접 적용된다

☞ 참고로, 이러한 비율 도우미는 <div>나 <img> 등 표준적인 html 태그에서도 사용할 수 있다!

Plyr 플레이어

░ 는 html 5) 비디오, 및 등을 재생해주는 인라인 미디어 플레이어이다

Plyr 플레이어 사용하기
Plyr 플레이어를 사용하기 위해서는; 먼저 Css 및 스크립트 소스를 필요로 한다
[ Plyr Player 소스 및 스크립트 ] 
                                        
                                            <head>
                                                ..

                                                <!-- Css 링크 -->
                                                <link href="https://cdn.plyr.io/3.8.4/plyr.css" rel="stylesheet" />            
                                            </head>

                                            <body>
                                                ..

                                                <video class="media js-player" playsinline controls data-poster="./_videos/포스터.png" data-plyr-config='{"title": "Example Title"}'>
                                                    <source src="./_videos/shoes.mp4" type="video/mp4" />
                                                    <track src="./_videos/자막.vtt" kind="subtitles" srclang="ko" label="한글 자막" />
                                                </video>

                                                ..

                                                <!-- 스크립트 불러오기 -->
                                                <script src="https://cdn.plyr.io/3.8.4/plyr.js"></script>

                                                <!-- 스크립트 생성 -->
                                                <script>
                                                    const player= new Plyr('.js-player')
                                                </script>
                                            </body>

☞ 옵션도 함께 설정해줄 수 있다: const player= new Plyr('.js-player', { title: 'Example', });

html 5) Player
1. 유튜브와 비메오 플레이어의 경우, Plyr은 기본적으로 <iframe>을 사용하는데, plyr__video-embed 클래스 이름이 반응형 임베드로 만든다. autoplay, loop, playsinline (유튜브 전용) 등의 쿼리 매개변수를 URL에 추가할 수 있다 
                                    
                                        
                                        <div class="plyr__video-embed" id="player">
                                            <iframe src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
                                        </div>

☞ plyr__video-embed 클래스는 (가장 일반적인)16:9 비율로 시작하는데, Plyr 자체가 작동하면 사용자가 지정한 비율 설정 옵션이 작동된다!

2. 또는 data-plyr-provider 와 data-plyr-embed-id 라는 두 가지 필수 데이터 속성을 가진 표준 div를 선택할 수도 있다

☞ data-plyr-embed-id는 미디어 영상의 ID 혹은 URL일 수 있으며, WebVTT 자막 또한 지원한다

* cf) 한 페이지에 여러 영상을 임베드할 경우에는 각각 따로 생성해주어야 하는데, 아래와 같이 맵 배열을 이용하면 모두 순차적으로 생성된다 

                                    
                                        const players= Array.from(document.querySelectorAll('.js-player')).map((p) => new Plyr(p));

☞ 이 경우에는 당연히, 영상에서 ID 대신 클래스를 사용해야 한다!

░ 참고로, 최근들어 유튜브에서는 영상의 ID를 넣든, URL을 넣든 작동하지 않습니다 - 현재로서는 <a> 요소로 직접 링크하는 것만이 유일한 방법입니다. 아마도, 광고도 안보면서 꽁짜로 가져다 본다고 임베드 방식은 정책적으로 막아놓은 것으로 보입니다 ㅡㅡ; 양반네
Video-JS 플레이어 사용하기
플레이어는 Plyr Player의 (아직은.. 진행형인)리빌딩 버전이다 ← 2026.4.5일 현재, 계속 버전업이 진행중인 상태이니.. 그외의 상세 사용법은 공식 문서를 참조하십시오
[ VideoJS 소스 및 스크립트 ] 
                                        
                                            <!-- Css 링크 -->
                                            <link href="https://vjs.zencdn.net/8.23.8/video-js.css" rel="stylesheet" />

                                            <!-- 스크립트 불러오기 -->
                                            <script src="https://vjs.zencdn.net/8.23.8/video.min.js"></script>
html 5) Player

☞ data-setup="{}"은 기본 설정값으로 시작하지만, 여기에 모든 옵션들을 추가해줄 수 있다

Glightbox 사용하기
또한 Plyr Player와 비슷한 일을 하는데, 먼저 Css 및 스크립트 소스를 필요로 한다:
[ Glightbox 소스 및 스크립트 ] 
                                        
                                            <!-- Css 링크 -->
                                            <link href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" rel="stylesheet" />

                                            <!-- 스크립트 불러오기 -->
                                            <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
                                            <script type="text/javascript"> // 필요하다면; 여기서
                                                const lightbox= GLightbox({ }); // 옵션 설정하기
                                            </script>
GLightbox에는 plyr 플레이어가 내장되어 있으며, Plyr의 모든 옵션을 플레이어에 전달할 수 있다 ← 필요하다면; Github 예제 를 한번 살펴보시고, 소스 코드와 매뉴얼을 잘 숙지하여 사용해보십시오..
[ Glightbox 사용하기 ]

캐러셀 슬라이드

░ 캐러셀은 Css 3d 트랜스폼과 약간의 스크립트로 구축된, 이어진 컨텐츠들(이미지나 텍스트 등) 사이를 순환하는 슬라이드 쇼로서, 일반적으로 캐러셀은 종종 사용성 및 접근성 문제를 일으킬 수 있으며, 중첩 캐러셀은 지원하지 않는다!

캐러셀 기본
캐레셀에서 슬라이드 크기를 자동으로 정규화하지는 않으므로, 컨텐츠 크기를 적절하게 조정하려면 추가 유틸리티나 사용자정의 스타일을 사용해야 한다. 색상 설정은 루트 요소, 부모 래퍼 혹은 컴포넌트 자체에서 data-bs-theme= "dark" 속성을 사용해주면 된다 ← 이는 Css의 filter 속성을 써서 기본값인 white 계열과 대비되는 색상으로 반전시킨다
캐러셀은 이전/다음 버튼과 표시자 도 지원하는데, 필요에 따라 추가하고 스타일링해주면 된다. 또한, 캐러셀은 기본적으로 터치스크린 기기에서의 좌/우 스와프를 지원하는데, 이 기능을 비활성화하려면; data-bs-touch= "false" 값을 추가해주면 된다. 캐러셀 아이템간 자동순환 시간 간격을 변경하려면; 개별 .carousel-item에서 data-bs-interval= "밀리초" 속성을 추가해주면 된다
자동 재생 슬라이드는 data-bs-ride= "carousel" 속성을 주면된다. 이 API를 지원하는 브라우저에서 웹페이지가 표시되지 않으면(예컨대, 브라우저 탭이 비활성화되거나 브라우저 창이 최소화된 경우) 캐러셀 순환이 중지된다 - 자동 재생은 마우스를 가져가면 일시 중지되는데, 이 동작은 pause 옵션으로 제어할 수 있다 ← ride 옵션을 data-bs-ride= "true"로 설정하면; 페이지 로드 시 자동으로 순환을 시작하지 않되, 첫번째 사용자 상호작용 후에 시작된다!

✓ 접근성을 위해서는 자동 재생 기능을 사용하지 않는 것이 좋지만, 꼭 필요하다면; 캐러셀을 멈추거나 일시 멈춤할 수 있는 추가 버튼을 명시적으로 제공하는 것이 좋다!

* cf) 성능상의 이유로 캐러셀은 캐러셀 생성자 메서드를 통해 수동으로 초기화해야 한다 - 스크립트에서 초기화하지 않으면; 일부 이벤트 리스너(특히, 터치나 스와프 등)는 사용자가 명시적으로 활성화하기 전에는 등록되지 않는다 ← 유일한 예외는 페이지 로드시 자동으로 초기화되는 data-bs-ride= "carousel" 속성을 지닌 자동재생 캐러셀이다!

캐러셀 슬라이드쇼
캐러셀 슬라이드 중의 하나는 반드시 .active 클래스를 지정해주어야 한다. 또한, 특히 단일 페이지에서 다수의 캐러셀을 사용하는 경우에, 선택적 컨트롤을 위해 고유한 id를 설정해주어야 한다. 컨트럴 및 표시자 요소들에는 캐러셀 요소의 id에 일치하는 data-bs-target= "대상요소", 또는 링크용 href= "#대상요소" 속성이 주어져야 한다

* cf) .carousel slide carousel-fade로 페이드 효과를 준 경우에는 캐러셀 컨텐츠(예컨대, 텍스트 전용 슬라이드)에 따르는 적절한 교차 페이딩을 위해 .bg-body 클래스나 일부 사용자정의 Css를 추가해주는 것도 좋다!

(* 이 예제는 에서 가져와 (약간 손질한)것인데, 나중에 한번 만들어보십시오 - 다른 샘플 예제들도 많으니 한번 찾아가서 살펴보십시오..)

Swiper 캐러셀

░ 은 하드웨어 가속 전환과 놀라운 기본 동작을 갖춘 가장 현대적인 모바일 터치 슬라이더로서, 모바일 웹 사이트, 모바일 웹 앱 등에서 유용하게 쓸 수 있는데, 일반 PC 환경에서도 또한 잘 작동된다!

스위퍼 캐러셀
스위퍼 캐러셀 플러그인을 사용하기 위해서는; 먼저, 다음과 같이 Swiper 관련 CDN 링크, Script 소스 및 초기화를 필요로 한다
[ Swiper 캐러셀 소스 및 스크립트 ] 
                                        
                                            <!-- Swiper Css CDN 링크 -->
                                            <link href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" rel="stylesheet" />

                                            <!-- Swiper 스크립트 소스 불러오기 -->
                                            <script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
                                            <script> /* 스위퍼 캐러셀 초기화 옵션들 */
                                                const swiper= new Swiper('.swiper', {
                                                    direction: 'vertical', loop: true,

                                                    // 이전, 이후 화살표 버튼이 필요하다면;
                                                    navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', },

                                                    // 페이지네이션이 필요하다면;
                                                    pagination: { el: '.swiper-pagination', },

                                                    // 스크롤바가 필요하다면;
                                                    scrollbar: { el: '.swiper-scrollbar', },
                                                });
                                            </script>

☞ 필요하다면; 스위퍼 컨테이너의 크기도 조정해줄 필요가 있다: .swiper { width: 600px; height: 300px; }

☞ 앞/뒤 버튼 모양은 이 웹사이트를 위해 추가한 사용자정의 Css를 사용한 것이기에, 스위퍼 캐러셀의 버튼 모습과는 살~짝 다릅니다

☞ 더 긴 말 안하니.. 스위퍼 캐러셀 옵션 설정에 관한 세부 사항들은 공식 사이트로 가서 살펴보십시오 ㅡㅡ;

Big Picture 갤러리

░ 는 이미지, iframe, 인라인 컨텐츠 및 비디오를 YouTube, Vimeo 및 자체 호스팅 비디오로 선택적으로 자동 재생해준다

빅픽쳐 갤러리
빅 픽쳐 플러그인을 사용하기 위해서는; 먼저 Big Picture 플러그인을 위한 스크립트 소스 및 초기화를 필요로 한다
[ BicPicture 스크립트 소스 ] 
                                        
                                            <script src="vendors/bigpicture/BigPicture.js"></script>

                                            또는, <script src="https://cdn.jsdelivr.net/npm/bigpicture@2.6.4/dist/BigPicture.min.js"></script>
1. Big Picture 플러그인은 썸네일을 표시할 수 있으며 클릭하면 원본 이미지가 팝업되는데, 라이트 박스 이미지는 무엇이든 래핑하여 작동된다 ← <img> 요소는 data-bigpicture= 속성을 지닌 <a> 요소 내부에 배치하여야 한다!
크게 보기
[크게 보기]

☞ 버튼이 필요하지 않다면; 위 코드와 같은 그리드 배치도 필요없고, 그저 <a><img src="" /></a> 요소만으로 충분합니다!

2. data-bigpicture=와 data-bp= 속성을 쓰면 쉽게 라이트박스 이미지 갤러리를 만들 수 있다. 부모요소에서 갤러리 id 를 설정하고, <a> 요소에서 data-bigpicture= 속성을 써서 id 를, data-bp= 속성을 사용하여 이미지 원본을 전달해주면 된다
3. YouTube 및 Vimeo 동영상은 data-bigpicture= 속성을 통해 동영상 id 를 제공하기만 하면 Big Picture 플러그인과 함께 사용할 수 있다

░ 참고로, 최근들어 유튜브에서는 영상의 ID를 넣든, URL을 넣든 작동하지 않습니다 - 현재로서는 <a> 요소로 직접 링크하는 것만이 유일한 방법입니다. 아마도, 광고도 안보면서 꽁짜로 가져다 본다고 임베드 방식은 정책적으로 막아놓은 것으로 보입니다 ㅡㅡ; 양반네

Rellax 스크롤링

░ 플러그인은 배경 이미지, 비디오 및 인라인 요소에 대해 부드러운 시차 스크롤링 효과를 준다

패럴랙스 백그라운드
백그라운드 시차 스크롤링 효과는 부모(또는, 형제) 요소에서 Rellax의 data-parallax 속성과 함께 사용자정의 .bg-holder 클래스를 사용하는데, html 5 비디오나 유튜브 비디오 배경 또한 같은 방식으로 사용할 수 있다

패럴랙스 백그라운드 이미지

                                                    
                                                        
                                                    
                                                
                                                    
                                                        .bg-holder {
                                                            position: absolute; top: 0; left: 0; width: 100%; min-height: 100%;
                                                            background-size: cover; background-position: center; background-repeat: no-repeat;
                                                            overflow: hidden;
                                                            z-index: 0;
                                                        } .bg-holder .bg-video {
                                                            display: block;
                                                            position: absolute; top: 0; left: 0; height: 100%; min-width: 100%;
                                                            object-fit: cover;
                                                            z-index: -1;
                                                        } .bg-holder .bg-youtube {
                                                            position: absolute !important;
                                                            top: 0; left: 0; height: 100%; width: 100%;
                                                        }

Parallax Video Background

부드러운 시차 스크롤링
패럴랙스 스크롤을 사용하기 위해서는 먼저 CDN 링크 및 초기화를 필요로 한다
[ Parallax 스크립트 CDN 링크 ] 
                                        
                                            <!-- Parallax 스크립트 및 초기화 -->
                                            <script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>
                                            <script>
                                                var rellaxInit= function rellaxInit() { // 패럴랙스 초기화
                                                    return window.Rellax && new window.Rellax('[data-parallax]', {})
                                                }
                                            </script>
스트립트 초기화는 스크립트 정의를 통한 방식과 html에서 data- 속성을 이용하는 방식이 있다
[ 스트립트 초기화 ] 
                                        
                                            /* 1. 스크립트 정의를 통한 초기화 */
                                            jarallax(document.querySelectorAll('.jarallax'), {
                                                speed: 0.2,
                                            }
[ html 코드 작성 예: Background Image Parallax ]

data-rellax-speed(양수 및 음수 가능) 속성을 사용하여 .rellax 요소의 속도를 기본값(-2)이 아닌 다른 값으로 설정해줄 수 있다
시차 요소를 중앙에 배치하는 센터링을 구현하는데는 전역 옵션이나 특정 요소에서 설정해줄 수 있다
수평 패럴렉스는 기본적으로 비활성화되어 있지만, horizontal: true 값을 전달하여 활성화할 수 있다 ← 이 기능은 파노라마 스타일의 웹사이트에서 사용하기 적당한데, 수직 스크롤링과 동시에 작동하므로 이를 원하지 않는다면; vertical: false 값도 함께 전달해주면 된다! 
                                                
                                                    var rellax= new Rellax('.rellax', {
                                                        horizontal: true; vertical: false
                                                    });
기본적으로 패럴랙스 요소의 위치는 <body>의 스크롤 지점을 통해 결정되는데, 래퍼에 설정 블록의 속성을 전달하여 Rellax가 대신 해당 요소를 감시하도록 할 수 있다: 
                                                
                                                    //Set wrapper to .custom-element instead of the body
                                                    var rellax= new Rellax('.rellax', {
                                                        wrapper: '.custom-element'
                                                    });

A-OS Animation

░ 을 쓰면; 웹문서의 어느 곳에서든 스크롤 애니메이션을 적용할 수 있다!

A-OS 시작하기
A-OS Animation을 사용하기 위해서는; 먼저, Css 및 스크립트 CDN 링크와 초기화가 필요하다. 이어서, data-aos= "애니메이션"으로 원하는 애니메이션을 지정하고, 여타 옵션들을 추가해줄 수 있다
[ A-os CDN 링크, 스크립트 소스 및 초기화 ] 
                                        
                                            <!-- Aos Css CDN 링크 -->
                                            <link href="https://unpkg.com/aos@next/dist/aos.css" rel="stylesheet" />

                                            <!-- Aos 스크립트 및 초기화 -->
                                            <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
                                            <script>
                                                AOS.init(); // Aos 초기화
                                            </script>
                                        
                                    
                                        
                                            /* A-OS 옵션들 */
                                            data-aos= "fade" // 애니메이션 종류
                                            data-aos-delay= "1000" // 시작 전 대기시간
                                            data-aos-duration= "1000" // 시작 이후 지속 시간 ← 단위: 0 ~ 3000 밀리초, 단계는 50씩
                                            data-aos-easing= "Easing" // 이징 종류
                                            data-aos-offset= "200" // 원래 트리거 지점으로부터의 거리 ← 단위: px
                                            data-aos-once= "false" // 스크롤 중 애니메이션을 한번만 발생시킬 것인지?
                                            data-aos-mirror= "true" // 스크롤 중 요소들이 애니메이션에서 사라져야 하는지?
➥ A-OS 애니메이션

A-OS는 매우 멋진 움직임들을 보여주지만, 그 사용법은 지극히 단순합니다 - 그저 아무 요소에서건 data-aos= "애니메이션명" 및 data-aos-옵션명= "값" 코드를 넣어주기만 하면 됩니다 ^^

(* 아래로 아~주 천천히 스크롤해보세요..)

(* 아래로 아~주 천천히 스크롤해보세요..)

(* 아래로 아~주 천천히 스크롤해보세요..)

(* 아래로 아~주 천천히 스크롤해보세요..)

← 기본값: ease

(* 아래로 아~주 천천히 스크롤해보세요..)

(* 아래로 아~주 천천히 스크롤해보세요..)

* cf) 특정 요소를 대상으로 하여 설정할 수도 있다 - 곧, 실제 오프셋이 아니라 애니메이션을 트리거하는 데 사용되는 data-aos-anchor="앵커" 속성인데, 이는 한 요소에서 애니메이션을 트리거하고, 스크롤하면서 다른 요소로 이동할 수 있어 고정된 요소 애니메이션에 유용하다: <div data-aos="fade" data-aos-anchor=".other-element"></div>

메이슨리 레이아웃

░ 는 필터링과 정렬을 위한 그리드 기반 레이아웃 라이브러리로서, 사용 가능한 수직 공간의 최적 위치에 요소를 배치해주는데, 이는 포트폴리오 페이지 및 이미지 갤러리 등에서 놀랍도록 잘 작동된다!

메이슨리 레이아웃
부트스트랩에서 Masonry 필터를 사용하려면; 먼저, 아래 CDN 링크를 넣어주고, 그리드나 카드의 .row 래퍼에서 data-masonry= '{"percentPosition":true}' 속성을 더해주면 부트스트랩의 반응형 그리드 시스템 및 카드 컴포넌트와 메이슨리의 포지셔닝이 결합된다
[ 부트스트랩과 메이슨리의 결합을 위한 CDN 링크 ] 
                                        
                                            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
                                            <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>

* cf) Css 3)에서 은 한 축은 일반적인 엄격한 Grid 레이아웃(대부분 열)을 사용하고, 다른 축은 Masonry 레이아웃을 사용하는데, Masonry 축에서는 짧은 항목 뒤에 틈이 남는 엄격한 그리드를 고수하는 대신 다음 행의 항목이 위로 올라가 틈을 완전히 채우게 된다! 

                                    
                                        .Masonry-grid { /* 일반적인 Masonry 레이아웃 */
                                            display: grid;
                                            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* 그리드 축 */
                                            grid-template-rows: masonry; /* 메이슨리 축 */
                                            gap: 10px;
                                        }

☞ 일반적인 Masonry 레이아웃에서 이 컨테이너의 자식요소들은 일반 그리드 레이아웃 자동배치와 마찬가지로 행을 따라 항목별로 배치되지만, 새 행으로 이동하면; 항목이 Masonry 알고리즘에 따라 표시된다. 곧, 항목은 가장 많은 공간이 있는 열에 로드되어 엄격한 행 트랙 없이 빽빽하게 채워진 레이아웃을 만들게 되는 것이다!

메이슨리 필터링
메이슨리 레이아웃은 멀티 컬럼, 동적 그리드 레이아웃을 만들 수 있는 자바스크립트 플러그인인 를 사용하여 만들어졌는데, 이는 완벽히 갭 없는 레이아웃을 허용하는 첫 번째 스크립트이다!
메이슨리 필터링을 사용하기 위해서는; 먼저 Isotope 스크립트 코드를 불러와야 한다. 이어서 data-isotope= 속성을 추가하여 컴포넌트를 초기화하고, layoutMode=, itemSelector= 등의 속성으로 다양한 설정을 해줄 수 있다. 한편, data-filter= 속성으로 모든 요소들을 필터링할 수 있다:
[ Masonry Filter CDN 링크 ] 
                                        
                                            <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>

Isotope는 유사한 자식 아이템들을 지닌 컨테이너 요소에서 작동하며, 각 항목들의 크기 조정은 Css로 설정한다 

                                                
                                                    
                                                
                                            
                                                
                                                    .grid-item { width: 25%; }
                                                    .grid-item--width2 { width: 50%; }

Isotope(); 생성자는 컨테이너 요소와 Options 두 인수를 받는다: 

                                                
                                                    var elem = document.querySelector('.grid');
                                                    var iso = new Isotope(elem, { // 컨테이너 요소 elem
                                                        itemSelector: '.grid-item',
                                                        layoutMode: 'fitRows'
                                                    });

자바스크립트 없이 html만으로 Isotope를 초기화 할 수도 있다 - 컨테이너 요소에 data-isotope= 속성을 추가하고, 옵션은 해당 값에서 설정해줄 수 있다 

                                                
                                                    <div class="grid" data-isotope='{"itemSelector": ".grid-item", "layoutMode": "fitRows" }'></div>

* cf) html에 설정된 옵션은 유효한 JSON이어야 한다 - 예컨대, 키는 "itemSelector"와 같이 큰따옴표로 묶어야한다 ← Html 속성인 data-isotope=는 작은 따옴표를 쓰지만 JSON은 큰 따옴표를 사용한다!

SVGs 아이콘

░ 부트스트랩은 향상된 접근성 및 벡터 지원 이라는 측면에서 을 선호하는데, 부트스트랩의 아이콘은 모두 Svg 아이콘입니다!

부트스트랩의 Svg 아이콘
부트스트랩의 Svg 아이콘을 사용하려면; 먼저, <header> 안에서 부트스트랩 아이콘을 사용하기 위한 CDN 링크를 넣어주어야 한다
[ 부트스트랩 아이콘 CDN 링크 ]
1. 이어서, html 문서 내에서 Svg 아이콘을 직접 작성해주거나 ( ), 갖고 있는 Svg 아이콘을 일반적인 이미지처럼 <img> 요소로 참조하거나 ( Bootstrap logo ) 할 수 있는데, width 및 height 등의 속성도 함께 사용할 수 있다

☞ <img> 요소에서 Svg를 사용하는 경우 스크린 리더기가 Svg를 이미지로 알리지 않거나 완전히 건너뛸 수 있는데, 이 문제는 <img> 요소에 role= "img" 및 적절한 aria-label= ".." 속성을 추가해주면 된다!

2. 순전히 장식용인 아이콘 ( ) 에는 aria-hidden= "true" 속성을 추가해서 보조기술로부터 숨겨주어야 하며, role= "img" 및 aria-label 속성으로 그 의미를 보조기술에 알려주어야 한다 ← 그렇지 않은 경우에는; 적절한 방법으로 대체 텍스트를 제공해주어야 한다!

☞ Svg는 IE 및 Edge에서 기본적으로 포커스를 받는데, 이 문제는 Svg 요소에 focusable= "false" 속성을 추가해주면 된다!

* cf) 아이콘에 쓰이는 Svg 이미지는 다음과 같은 Css 스타일을 설정해주는 것이 일반적이다 

                                    
                                        svg {
                                            fill: currentColor; /* 색상 기본값 */
                                        } a > svg, button > svg { pointer-events: none; /* 포인터 반응: No */ }

☞ currentColor 키워드는 color 속성의 계산된 동적 값이다 - 예컨대, currentColor 를 정의하는 요소에 정의된 색상값이 없는 경우; 대신 상위 부모요소의 색상을 물려받게 된다!

부트스트랩의 아이콘 폰트
모든 아이콘에 대한 클래스를 가진 아이콘 폰트 또한 부트스트랩 아이콘에 포함되는데, 필요할 때 html 문서에서 클래스 이름으로 참조하면 된다. 더 필요하다면; 부트스트랩 유틸리티나 인라인 스타일로 글꼴 크기나 색상 등 또한 원하는 대로 스타일링해주면 된다:

☞ 참고로, 아이콘 크기 조정 시는 width: 1em;(또는, height: 1em;) 식으로 사용하는 것이 편합니다!

✓ 부트스트랩의 아이콘을 사용하려면; 일단, 부트스트랩 아이콘 페이지에 방문하여 예컨대, 아이콘을 클릭하면; 스타일을 적용한 몇 가지 아이콘 모양들 예시와 함께 아이콘 폰트 및 인라인 Svg 코드가 옆에 나타나니.. 어느 것이건, 그저 원하는 코드 복사하여 자신의 웹문서에 붙여넣으면 됩니다..

오픈소스 아이콘

░ 부트스트랩에서 기본 제공하는 SVGs 아이콘 외에도 다양한 오픈소스 아이콘 제공 사이트들이 있는데, 이러한 오픈소스 아이콘들은 <body> 안에서 사용하려는 아이콘 이름을 <i>나 <span> 태그 등으로 (각 사이트에서 제공하는 방식에 맞추어)추가해주면; 외부 오픈소스 아이콘을 웹문서에 불러들여 사용할 수 있다

오픈소스 아이콘
은 스크립트 파일을 CDN으로 불러와서 초기화 설정을 해준 이후에 <i>나 <span> 태그를 써서 사용할 수 있는데, 에 표시된 이름으로 불러들여 쓰거나(), 또는 다운로드하여 <img> 태그로 삽입해줄(feather) 수도 있다:
[ Feather 아이콘 CDN 링크 및 초기화] 
                                        
                                            <body>
                                                <!-- 아이콘 이름으로 불러온다: -->
                                                <i data-feather="feather"></i>

                                                <!-- 아이콘을 다운로드하여 img 태그로 삽입해준다 ← Feather 아이콘의 기본 사이징은 24x24(px) 크기임! -->
                                                <img src="./_img/feather.svg" alt="feather" title="feather">

                                                <!-- 색상과 크기 설정: -->
                                                <i class="text-success" data-feather="activity" width="32px" height="32px"></i>

                                                ..

                                                <!-- Feather 아이콘 v4.29.0 CDN 링크 및 초기화 -->
                                                <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
                                                <script>
                                                    feather.replace(); // feather 아이콘 초기화
                                                </script>
                                            </body>

☞ 다른 오픈소스 아이콘들도 마찬가지로.. (해당 사이트에서 제공하는 방식에 맞추어)필요한 Css 링크나 Script 정의를 넣어준 뒤 사용하면 됩니다!

또한, Feather 아이콘과 같은 방식으로 사용한다. 먼저, CDN 링크와 스크립트 파일을 불러온 이후에 <i>나 <span> 태그를 써서 이용할 수 있다
[ 아이콘 CDN 링크 및 초기화 ] 
                                        
                                            <head>
                                                <!-- Fontawesome 아이콘 CDN 링크 -->
                                                <link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
                                            </head>

                                            <body>
                                                <span class='fab fa-facebook'></span>

                                                ..

                                                <!-- Fontawesome 스크립트 정의 파일 -->
                                                <script src="./vendors/fontawesome/all.min.js"></script>
                                            </body>
은 .fill-색상 및 .stroke-색상 클래스로 SVG 색을 채워줄 수 있다. 한편, 아이콘 크기 변경은 간단히 svg 요소의 width와 height 속성을 사용하면 된다
diagram-arrow-down diagram-arrow-down design-tool-pen-station design-tool-pen-station

✓ 한번 사용한, 또는 나중에 써먹을 일이 있을듯한 아이콘은 한 곳에 담아서 보관해두면 나중에 찾아쓰기에 좀 편해집니다 - 자신의 아이콘 보관함 하나 만들어서 (코드를)담아두세요: 경주남산 로고

☞ 물론, 위 data-feather= "activity" 아이콘의 색상이나 크기 값들은 실제 코딩 시 수정하여 쓰시면 됩니다

░ 그 외에도, 및 , 등 무료(또는, 유료)로 아이콘 및 일러스트, 이미지 등을 제공하는 다양한 사이트들이 많이 있으니 한번 살펴보십시오 ← 참고로, 원하는 특정 아이콘(및 일러스터) 모양을 찾고자 한다면; 에 들러보십시오..

아이콘 링크

░ 부트스트랩의 는 사용하고자 하는 <a> 태그 안에서 텍스트 앞 또는 뒤에 <i> 태그로 .bi-아이콘이름으로 넣어주는 것만으로 충분하다!

아이콘 붙은 링크
<a> 요소에서 아이콘의 크기와 색은 자동으로 지정되어 배치되는데, 필요하다면; 밑줄은 사용자정의 오프셋 및 색상으로 스타일링해줄 수 있고, 아이콘의 크기는 연결된 텍스트의 글꼴 크기와 일치하도록 1em 으로 자동 조절된다: 소소한 이야기
1. 아이콘의 크기, 배치 및 색상은 자동으로 조정되는데, 아이콘 모양을 변경하려면; Css의 font-size 및 color 속성을 사용할 수 있다:
2. 부트스트랩의 .icon-link(및 .icon-link-hover) 클래스는 인라인 flexbox 스타일 및 .gap 기본값을 써서 기본 링크 스타일을 수정하고, 아이콘과 텍스트의 쌍을 빠르게 정렬해준다:

소소한 이야기 소소한 이야기

* cf) Css 변수로 부트스트랩 기본 아이콘 링크의 스타일을 수정해줄 수 있다: --bs-link-* 및 --bs-icon-link-* Css 변수를 수정하면; 부트스트랩의 기본 모양을 변경할 수 있고, --bs-icon-link-transform Css 변수의 호버 변환을 재정의해줄 수도 있다

소소한 이야기

☞ <a> 요소에서의 .icon-link icon-link-hover와 내부 <i> 요소에서의 .bi 클래스는 마우스 호버 시 아이콘을 수평으로 움직인다 ← 참고로, style= "--bs-link-hover-color-rgb: 25, 135, 84;" 코드는 부트스트랩 기본 링크 호버 시의 색상을 변경해준 것입니다!

➥ Css 3) 아이콘 링크

아래, 사용자정의 .linkIconA 클래스는 Css의 background 속성을 써서 만들어본 아이콘 붙은 링크입니다: 소소한 이야기로 가기 

                                    
                                        
                                    
                                
                                    
                                        a.linkIconA {
                                            background: url("./_img/external-link.svg") no-repeat 100% 0;
                                            background-size: 16px 16px;
                                            padding: 2px 16px 16px 4px; margin-right: 4px;
                                        }
wave