.text-primary -secondary -success -danger -warning -info

.bg-primary -secondary -success -danger -warning -info

.text-light & .bg-dark .text-dark & .bg-light

✓   이 강좌 사이트에서 보이는 색상들은 :root에서의 사용자정의 css를 통해 조금 연한 Solid 색상으로 재정의한 것입니다. 실제 부트스트랩의 기본 색상들은 좀 다르고, 더 진한 편입니다..

.text-body-emphasis .text-body(텍스트색) .text-body-secondary .text-body-tertiary

.bg-body(배경색) .bg-body-secondary .bg-body-tertiary

.bg-success .bg-success-subtle

.border border-success .border border-success-subtle

➥ 부트스트랩 v5.3)에서는 배경색만 설정하면(예컨대, .text-bg-색상); 텍스트는 그에 대비되는 색상으로 자동으로 맞추어진다:

.text-bg-primary .text-bg-secondary .text-bg-success

.text-primary & text-opacity-75 & text-opacity-50 & text-opacity-25

.bg-success & bg-opacity-75 & bg-opacity-50 & bg-opacity-25 & bg-opacity-10

➥ 배경색을 완전히 없애고자할 때는 .bg-transparent 클래스(= css의 transparent 키워드)를 쓸 수 있다 ← 이 투명 배경 클래스는 카드의 헤더 및 푸터에 기본 설정되어 있던 배경색을 없애줄 때 주로 사용된다!

➥ 부트스트랩에서 기본 제공하는 요소의 불투명도 값은 0/25/50/75/100 뿐이지만, 필요하다면; css 사용자정의로 .opacity-0/10/20/30/40/50/60/70/80/90/100 식으로 세분화하여 만들어 사용할 수 있다 ← 예컨대, .opacity-10 { opacity: 0.1; }: .opacity-10 .opacity-50 .opacity-90

➥ css 스타일로 값을 설정할 때는 font-size에 따라 line-height 값이 달라질 수 있도록 단위 없는 숫자 값을 사용하는 것이 좋다 ← 예컨대, font: 1.5/1.5;로 주면 font-size가 1.5 배로 커질 때, line-height 값도 1.5 높이로 되어 수직 중앙에 자리잡게 된다!

(* 여기는 블록 요소 p) .text-truncate 클래스는 (현재의 화면 너비를 벗어나는 영역서부터는) 자르고 나머지는 ...로 표시하는데, 블록 및 인라인-블록 요소에서만 작동된다!

☞ 참고로, .text-nowrap 시 부모요소에서 .overflow-auto로 설정해주면; 남의 영역을 침범하는 대신 (필요할 때만)스크롤바가 생겨난다 ← 위 코드의 <div>에서 .overflow-auto 클래스를 제거해보십시오..

blockquote .blockquote

.blockquote-footer (cite)

• html 5
• css 3
• Bootstrap 5

.border .border-start border-top .border border-start-0

➥ 먼저 테두리를 그리고(.border) 특정 방면을 제외하는(.border-*-0) 방식은 부트스트랩의 코딩 철학인 UI 타입과 스타일링의 분리 적용에 의한 결합을 잘 보여주고 있다!

.border rounded-1 & .rounded-3 & .rounded-5

.border border-1 & .border-3 & .border-5

.border border-success border-opacity-75 & .border-opacity-50 & .border-opacity-25

각 방면 박스 모서리: .rounded-top/end/bottom/start

크기별 박스 모서리: .rounded-0/1/2/3/4/5

etc..

.shadow-sm .shadow .shadow-lg

포커스링: .focus-ring .focus-ring focus-ring-success

☞ 포커스 링의 색상은 위와 같이 부트스트랩의 색상 유틸리티를 써서 변경해주면 된다!

➥ :root 레벨에서 css 변수를 써서 부트스트랩의 기본 포커스 링 스타일을 재정의해줄 수 있다:

                                    
                                        :root {
                                            --bs-focus-ring-width: 0.25rem;
                                            --bs-focus-ring-opacity: 0.25;
                                            --bs-focus-ring-color: rgb(4 91 193 / 0.25);
                                            /* .. */
                                        }
                                      
                                        .focus-ring:focus {
                                            outline: 0;
                                            box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color);
                                        }
                                    
                                

(* 아래 가로선은 부트스트랩 기본 <hr> 태그입니다 - 단, 부트스트랩 기본 모양과는 약간 다를 수도 있습니다..)

(* 아래 가로선들은 부트스트랩 클래스들로 스타일링한 <hr> 태그들입니다)

☞ 수직선에 font: 1.5/1.5; 값을 줌으로써, font-size와 line-height 값이 같아져 1.5 배 더 커진 수직선이 세로 중앙에 자리잡게 된다!

☞ 참고로, type= "button"은 자체 기능은 없고, 단지 스크립트로 연결해주는 역할만 수행한다!

button .btn a .btn

☞ 보통 <a> 태그가 새 페이지나 섹션을 여는 대신 (컨텐츠 축소 등의)페이지 내 기능을 트리거하는데 사용될 때 .btn 클래스를 쓸 수 있는데, 이 경우 role= "button" 속성을 통해 스크린리더기 등에 그 의미를 충분히 전달해주어야 한다!

button .btn btn-* .btn btn-primary btn-sm

button .btn btn-outline-* .btn btn-outline-primary btn-lg

☞ 이 경우, 위 코드의 title= "disabled" 속성 또한 작동되지 않는다!

☞ 단, 여전히 (위 코드처럼)href 속성을 유지해야만 하는 경우에는; (키보드 입력을 받지 않도록)tabindex= "-1"과 aria-disabled= "true" 속성 또한 필요로 한다!

░ 부트스트랩은 억지로 외우려 애쓰지 말고 그냥 이런게 있다 하면서 자연스레 눈에 익혀가면 됩니다 - 대충 기능과 주의점들만 알아뒀다 필요해지면 그때 소스 찾아서 붙여넣고 자신의 요구에 맞게 수정하여 쓰면 됩니다. 부트스트랩은 모든 기능들이 마치 레고 블록과 같아서 이것, 저것,, 여기, 저기,, 막 갇다붙여도 그럭저럭, 말 잘 알아듣는 똑똑한 장난감입니다 - 다만, 원칙없이 마구 갇다 붙였다가는 나중에 코드 수정하거나 할 때 작성한 본인도 한~참 헤맬 수 있습니다 ^^

☞ 위 <button>에서의 .position-relative 및 <span>에서의 position-absolute top-0 start-100 translate-middle는 버튼 내 뱃지의 위치를 지정해주기 위한 것이다!

➥ 뱃지는 유용한 시각적 정보를 제공하지만, 이것이 스크린리더기 등에는 혼란을 줄 수도 있다. 따라서, 컨텍스트가 명확하지 않은 경우, 숨겨진 텍스트를 통해 부가적으로 정보를 제공해주는 것이 좋다: <span class="visually-hidden"> 뱃지 설명.. </span>

ul .dropdown-menu dropdown-menu-end

div .dropdown dropup/dropend/dropstart

➥ 드롭다운 래퍼 <div>에 주어지는 .dropdown dropup/dropend/dropstart는 드롭다운 목록을 래퍼 전체의 위쪽/뒤쪽/앞쪽 (아래쪽은 기본값임!) 방향으로 펼치는데, 드롭다운 메뉴를 펼치려는 방향의 공간 여분이 드롭다운의 크기보다 작다면; 반대 방향으로 펼쳐진다!

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

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

Jumbotron 작성 예)

(* 이 전체화면 점보트론 예제는 Bootstrap 5) 샘플 예제 에서 가져와(약간 손질한)것입니다. 다른 샘플 예제들도 많으니 한번 찾아가서 살펴보십시오..)

Media 영역

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

➥ Plyr 플레이어 는 유튜브 동영상 및 비메오 비디오 등을 재생해주는 인라인 미디어 플레이어이다. 한편, Big Picture 갤러리 는 이미지, iframe, 인라인 컨텐츠 및 비디오를 YouTube, Vimeo 및 자체 호스팅 비디오로 선택적으로 자동 재생해준다!

2. 이어서, html 문서 내에서 Svg 아이콘을 직접 작성해주거나( ), 갖고 있는 Svg 아이콘을 일반적인 이미지처럼 <img> 요소로 참조하거나( ) 할 수 있는데, width 및 height 등의 속성도 함께 사용할 수 있다:

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

➥ 아이콘에 쓰이는 Svg 이미지는 다음과 같은 css 스타일을 설정해주는 것이 일반적이다:

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

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

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

░ 한번 사용한, 또는 나중에 써먹을 일이 있을듯한 아이콘은 한 곳에 담아서 보관해두면 나중에 찾아쓰기에 좀 편해집니다 - 자신의 아이콘 보관함 하나 만들어서 담아두세요..

➥ <a> 요소에서 아이콘의 크기와 색은 자동으로 지정되어 배치되는데, 필요하다면; 밑줄은 사용자정의 오프셋 및 색상으로 스타일링해줄 수 있고, 아이콘의 크기는 연결된 텍스트의 글꼴 크기와 일치하도록 1em 으로 자동 조절된다!

소소한 이야기

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

소소한 이야기

☞ <a> 요소에서의 .icon-link icon-link-hover와 내부 <i> 요소에서의 .bi 클래스는 마우스 호버 시 아이콘을 수평으로 움직인다!

☞ 대부분의 사용자지정 구성요소에는 position: relative;가 없으므로 링크가 부모요소 외부로까지 늘어나지 않도록 .position-relative 클래스를 추가해줄 필요가 있다!

☞ 참고로, 확장 링크에는 다중 링크나 탭 타겟은 권장되지 않는다 - 단, 필요한 경우에는 .position 및 .z-index가 도움이 될 수 있다!

이 확장 링크는 카드 내부임에도 <p> 태그에 transform 속성값이 적용되었기에 <p> 태그 내부에서만 작동한다!

☞ 이 확장 링크는 카드 내부임에도 불구하고, <p> 태그에 transform 속성이 적용되었기에 오직 <p> 태그 내부에서만 작동한다!

➥ 접근성을 위해서는 자동 재생 기능을 사용하지 않는 것이 좋지만, 꼭 필요하다면; 캐러셀을 멈추거나 일시 멈춤할 수 있는 추가 버튼을 명시적으로 제공하는 것이 좋다 ← 일반적으로 캐러셀은 종종 사용성 및 접근성 문제를 일으킬 수 있으며, 중첩 캐러셀은 지원하지 않는다!

(* 이 캐러셀 슬라이드 예제는 부트스트랩 공식사이트에서 가져와서(약간 손질한) Bootstrap 5) 샘플 예제 입니다 - 필요하면; 찾아가서 더 살펴보십시오..)

➥ Swiper 캐러셀 은 하드웨어 가속 전환과 놀라운 기본 동작을 갖춘 가장 현대적인 무료 모바일 터치 슬라이더로서, 모바일 웹 사이트, 모바일 웹 앱 및 모바일 네이티브/하이브리드 앱에서 유용하게 사용되는데, 일반 PC 환경에서도 또한 잘 작동된다!

이 링크는 부모 요소에 .pe-none 클래스가 주어져 있기에 클릭할 수 없다. 하지만, 이 링크에서 다시 .pe-auto 클래스를 넣어주었기에 클릭이 가능해진다!

➥ .pe-none 클래스를 주어도 키보드로는 여전히 초점을 맞출 수 있고 실행할 수 있다. 키보드 기능까지 완전히 방지하려면; (키보드 포커스를 받는 것을 방지하기 위해)tabindex= "-1" 속성과 (보조기술에 이 사실을 전달하기 위해)aria-disabled= "true" 속성도 추가해주어야 한다 ← 좀 더 간단하게는, 폼에서는 disabled 속성을 추가함으로써 가능하고, 링크에서는 href 속성을 제거하여 비대화형 앵커로 만들면 된다!

위험! .visually-hidden 클래스는 시각적으로는 숨기되, 스크린 리더기에서는 액세스할 수 있도록 해준다!

☞ 곧, 위 코드의 위험! 부분은 화면상 보이지 않지만, 스크린리더기가 이 코드를 만나면; (시각이 없는)사용자에게 그 내용을 읽어주는 것이다!

.visually-hidden-focusable 클래스는 다시 (시력이 있는 키보드 사용자의 경우)초점이 맞춰지면 시각적으로 표시해준다!

☞ 곧, 키보드 사용자가 위 <a> 요소에 초점을 맞추면; href= "#content" 앵커에 연결된 목적지로 이동하여 내용을 보여주는 것이다!

➥ .visually-hidden-focusable 클래스는 독립형 클래스로서 .visually-hidden 클래스와 조합하여 사용해서는 안된다! 한편, 이들 클래스는 컨테이너에도 적용할 수 있다 - 곧, 컨테이너 내부에 포함된 자식요소가 포커스를 받으면; 컨테이너가 표시되도록 하는 것이다!

☞ 접근성을 위해서 각각의 로더에는 role= "status" 및 <span class="visually-hidden">..</span> 코드를 포함시켜주는 것이 좋다!

➥ 부트스트랩 5.3)에서는 더 이상 html 5)의 <progress> 태그를 사용하지 않는다. 대신에, 너비를 조정하기 위한 css와 약간의 속성들을 써서 프로그레스바를 나타낸다. 너비를 지정하기 위한 간편 유틸리티가 새로 도입되었고(.w-), 높이는 .progress에서만 설정하면 내부 프로그레스 바는 그에 맞춰 자동으로 변경된다!

➥ ProgressBar.js 플러그인을 사용하면 반응형의 스타일리시한 웹용 진행률 표시기를 쉽게 만들 수 있는데, 애니메이션은 모바일 장치에서도 잘 작동된다. 한편, Counter.js 는 카운터 애니메이션을 신속히 만들 수 있는 순수 Javascript 라이브러로서 카운트 UP 및 DOWN을 쉽게 만들 수 있다!

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

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

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

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

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

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

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