Bootstrap 5) Study 2

버튼 작성하기

░ 필요하다면; 특정 요소에 html의 role= "button" 속성을 추가함으로써 기본 커서를 (버튼 요소 없이도)포인터로 변경하여 대화형임을 강조할 수 있다. 하지만, 원칙적으로 버튼에는 <button> 태그를 쓰는 것이 기본이고, 더 효율적이다!

버튼 작성의 기본: <button> 태그와 .btn 클래스: 1. 우선, html의 <button> 태그를 사용하는 경우에는 화면낭독기에 이 곳에 버튼이 있다는 것이 명확히 전달되고, 또한 이 버튼에는 컨텐츠를 포함할 수도 있기에 아이콘을 추가하거나 Css를 이용해 원하는 형태로 꾸미는 것도 가능해진다; 2. 부트스트랩 5)의 .btn 클래스는 기본적으로 <button> 태그에서 사용되도록 디자인되었지만, <a>나 <input> 태그에서도 사용할 수 있다 ← 참고로, 이하의 버튼들은 부트스트랩의 기본 규격과는 좀 다릅니다 - Css 사용자정의를 통해 색상과 모양 및 크기 등에 약간의 변형을 준 것이니 참고 바랍니다..

비활성 버튼: 1. <button>(및 <a>, <input>) 태그에서 사용하는 .disabled 클래스는 Css의 pointer-events: none;과 user-select: none; 속성이 적용되어 마우스 오버 및 활성 상태가 트리거되는 것을 막는다:; 2. <Button> 태그에서와는 달리, <a> 태그를 쓰는 버튼에서는 위 트리거 속성들이 지원되지 않으므로 추가적으로 role= "button" 속성이 필요하며, 또한 href 속성을 포함하지 말아야 한다: <a>

토글 버튼: 부트스트랩의 data-bs-toggle= "button" 속성은 버튼의 on/off 상태를 나타내는데, 미리 On 상태를 만들기 위해서는; .active 클래스와 함께 aria-pressed= "true" 속성도 추가해주어야 한다

닫기 버튼: 부트스트랩의 .btn-close 클래스는 닫기(x) 버튼을 만든다

버튼그룹과 버튼 툴바: 부트스트랩의 .btn-group 및 .btn-group-vertical 클래스는 일련의 버튼을 한 줄로 그룹화하거나 세로로 쌓는다. 나아가, .btn-toolbar 클래스는 .btn-group 및 .input-group 등의 여타 부트스트랩 클래스들을 조합하여 작은 툴바를 만든다

마우스 호버 효과

░ 사용자정의 스타일 .lift 효과 등..

마우스 호버 효과: .lift: 아래, 사용자정의 클래스 .lift는 hover 및 focus 시, 해당 요소를 들썩이는데, 이는 버튼 및 링크, 카드만아니라 여타 html 요소들에서도 또한 사용할 수 있다:

➥ Css 3) 아이콘 버튼

이 사용자정의 .btn-icon btn-transdark 클래스는 아이콘을 버튼으로 쓰면서 배경을 투명하게 한 것인데, 포커스가 주어지면 그림자 배경을 나타낸다:

☞ 이 예제의 아이콘 버튼은 투명 버튼과 오픈소스 아이콘의 사용법을 예시하기 위한 것일 뿐입니다 ← 관련 사용자정의 Css 설정은 너무 복잡하고 양도 많아 생략합니다 ㅡㅡ;

요소의 확대/축소 및 불투명도: Css의 zoom 속성은 마우스 호버 시 해당 요소를 확대/축소하는데, 기본값인 1 및 100% 이상은 확대되고, 이하는 축소된다:

➥ Css 3) 요소 기울이기

아래 사용자정의 클래스 .rotate-각도 및 .rotate-n-각도는 해당 각도만큼 요소를 기울인다:

                                    
                                        .rotate-15 { transform: rotate(15deg); }
                                        .rotate-n-15 { transform: rotate(-15deg); }
                                        /* 필요하다면; 같은 방식으로 더 추가해서 사용하면 됩니다 */

☞ 필요하다면; 마우스 호버 시에 기울어지도록 사용자 정의하여 사용하는 것도 간단하지만, 너무 지나친 움직임은 도리어 사용자의 시선을 혼란스럽게 하는 결과를 초래할 수도 있습니다!

뱃지 달아주기

░ 뱃지는 버튼이나 링크의 일부분으로 사용되어 카운터를 제공할 수도 있고(예컨대, 게시글 개수 등..), 나아가 모든 컨텐츠에 추가 정보를 덧붙이는데(예컨대, 모자에 폼나게 별 4개 박은 장군, 가슴에 출렁이는 훈장들 ^^) 사용할 수도 있다!

뱃지 작성의 기본: 1. 기본적으로 뱃지의 배경색은 버튼의 배경색과 같은데, Bootstrap 5) 버전에서는 뱃지의 배경색만 설정하면(예컨대, .badge text-bg-secondary); 텍스트는 그에 대비되는 색상으로 자동으로 맞추어진다. 한편, 뱃지는 em 단위를 사용하므로 그 크기는 기본적으로 부모 요소의 글꼴 크기에 맞추어진다:; 2. 뱃지는 기본적으로 정원으로 그려지지만 .badge rounded-pill로 주면 내부 컨텐츠에 맞추어 최대한 둥글게 표시된다:

➥ Css 3) 기울어진 뱃지

아래, 사용자정의 클래스 .badge-rotate는 Css transform 등을 써서 이미지에 기울어진 뱃지를 달아준다:

목없는 부처님

                                    
                                        .badge-rotate {
                                            position: absolute; left: 0; top: 1.8rem;
                                            padding: 0.25rem; padding-left: 3rem; padding-right: 3rem;
                                            transform: rotate(-45deg) translate(-30%, -50%);
                                            z-index: 1;
                                        }

☞ 이 기울어진 뱃지는 배지를 요소의 맨 위에 고정시키기 위해 부모 래퍼에서 overflow-hidden과 position-relative 값을 주고, 내부 .badge에서 .badge-rotate 사용자정의 클래스를 부가한 것이다!

수평/수직선 긋기

░ 여기서는 부트스트랩의 수평선 및 수직선 관련 클래스들을 간략히 살펴봅니다..

가로선: <hr> 태그: 부트스트랩에서 <hr> 태그는 ( 브라우저 기본값과 유사하게)border-top 으로 스타일링되고, 불투명도는 opacity: 0.25;로 설정되며, (따로 지정하지 않은 경우)부모요소로부터 상속받은 색상을 사용한다 ← 부트스트랩의 <hr> 태그에서는 .text-색상, .border, .opacity-# 등의 클래스들 또한 사용할 수 있다!

➥ Css 3) 짧은 hr 태그 .hr-short_50

html 기본 태그인 <hr>을 사용자 정의하여, 아래와 같은 짧은 <hr> 가로선을 만들어쓸 수도 있다:

                                    
                                        hr.hr-short_50 { width: 50%; margin: 0 auto; opacity: 0.25; }

☞ margin: 0 auto;는 가로선을 수평 중앙에 배치한 것인데, 이 코드를 없애주면 앞에서부터 배치된다!

✓ 나아가, hr.hide { visibility: hidden; }와 같은 방식으로 사용자 정의하여 눈에 보이지 않는 구획선을 만들어쓸 수도 있다 ← 이는 보이지 않는 선에 상하 마진을 주어 간격을 넓혀주고자 할 때 유용하게 쓸 수 있다: <hr class="hide my-5">

수직선: .vr 클래스: 부트스트랩의 .vr 클래스는 width: 1px; 및 min-height: 1em; 값을 가지며, 부모 요소의 색상 및 불투명도를 상속받는다: ← 자신의 필요에 맞추어 선의 굵기 및 높이, 색상 등은 변경해줄 수 있다!

부트스트랩 색상

░ 부트스트랩 v5.3)의 에서 Css 색상 변수들은 :root로 전역 설정되며, 다크 색상모드에서도 또한 (기존 테마 색상들은 변경되지 않은 상태에서)그에 맞추어 자동 조정된다!

부트스트랩의 색상 파레트: .text-body와 .bg-body 클래스는 <body> 기본 텍스트색과 배경색을 나타내며, .text-reset 클래스는 현재 요소의 텍스트 색상을 부모요소의 색상으로 되돌린다; 1. 부트스트랩 v5.3)의 신규 색상 파레트에는 기존의 테마 색상들에다 -secondary(연한 색상 for color와 bg), -tertiary(더 연한 색상 for color와 bg), -emphasis(더 진한 텍스트 for color) 등이 추가되었다; 2. 부트스트랩 v5.3)의 신규 색상 파레트에서 배경색과 테두리 색상에는 -subtle(연한 색상 for bg와 border) 색상 변수가 추가되었다

텍스트색 및 배경색의 불투명도: 텍스트의 불투명도를 설정하는 .text-opacity-25/50/75, 배경색의 불투명도를 설정하는 .bg-opacity-25/50/75는 모두 색상 클래스와 함께 조합하여 사용해야 한다!

요소의 불투명도: 요소의 불투명도는 .opacity-0/25/50/75/100 클래스로 설정한다: .opacity-25 .opacity-50 .opacity-75

➥ Css 3) 사라진 텍스트 색상 되살리기

기존의 .text-muted(흐릿~한 텍스트)와 .text-black-50, .text-white-50은 부트스트랩 v5.3) 버전에서 제거되었다! 대신에 텍스트 색상에다 .text-opacity-# 클래스를 덧붙여서 사용하면 된다

하지만, 편의상 필요하다면; 아래와 같이 Css 사용자정의를 통해 .text-muted, .text-black-50, .text-white-50 등 Bootstrap 5)에 와서 사라진 기존의 텍스트 색상을 되살려 쓸 수도 있다:

.text-muted

.text-white-50 bg-dark

.text-black-50 bg-light

                                    
                                        .text-muted { color: #999999 !important; }
                                        .text-white-50 { color: rgb(255 255 255 / 0.5) !important; }
                                        .text-black-50 { color: rgb(0 0 0 / 0.5) !important; }

그라디언트 배경: 배경색과 함께 다음과 같은 사용자정의 .bg-gradients 클래스를 만들어 추가해주면 배경에 자신만의 그라디언트를 더해줄 수 있다:

➥ 부트스트랩의 다크 색상모드

부트스트랩 v5.3) 기본 배경 색상모드는 Light Mode인데, Dark Mode 또한 지원한다. Dark 모드는 data-bs-theme= "dark" 속성을 써서 html 요소나 특정 컴포넌트 등에 대하여 전역적으로 적용하거나 전환할 수 있다

예컨대, <html> 요소에서 <html data-bs-theme= "dark">로 설정해주면; 현재 웹문서 전체를 대상으로 Dark 모드가 적용되고, 해당 웹문서에서 특정한 속성이 적용된 구성요소 이외의 모든 컴포넌트와 요소에는 Dark 모드가 적용된다!

타이포그래피

░ 여기서는 부트스트랩 v5.3)의 텍스트, 글꼴 관련 클래스들을 간략히 살펴봅니다..

텍스트 타이포그래피: 1. 아래 예제 코드를 보면서 .display-1/2/3/4/5/6 대 .fs-1/2/3/4/5/6간 차이를 눈으로 새겨두시면 됩니다; 2. 마찬가지로, <h#> 태그들과 .lead 클래스, <body> 기본 텍스트, <small> 태그간 글자의 크기 및 굵기 차이를 눈으로 새겨두시면 됩니다; 3. 그밖에, 다음과 같은 텍스트 관련 클래스들이 있습니다:

➥ Css 3) 사용자정의 .mark, .small 클래스

html 기본 태그인 <mark>, <small>과 같은 규격으로 정의한 사용자정의 클래스를 만들어쓸 수도 있다: mark 태그 대 .mark 클래스, small 태그 대 .small 클래스

                                    
                                        /* 사용자정의 small, mark 클래스 추가 */
                                        small, .small { font-size: 0.875em; }
                                        mark, .mark { padding: 0.2em; background-color: #fcf8e3; }

☞ 이 사용자정의 클래스는 html 태그의 글꼴 스타일과 일치시키되, 간결하게 <small class="mark">작은 형광문자</small>와 같은 방식으로 쓰고자할 때 매우 유용하다: 작은 형광문자

이렇게 사용자정의 클래스로 만들면; <div>, <p>와 같은 블록레벨 요소에서도 사용할 수 있게 된다!

패러그래프

░ 여기서는 부트스트랩 v5.3)의 문단 관련 클래스들을 간략히 살펴봅니다..

문단 수평정렬: .text-start/center/end: 1. 이는 기본적인 문단 수평정렬인데(Css 3에서의 .text-left/center/right), 뷰포트에 따라 따라 반응하는 .text-*-start/center/end 클래스를 사용할 수도 있다 ← 참고로, 부트스트랩 5) 버전에서는 left/right 속성명은 제거되었습니다 - 대신, start/end 속성명을 사용하십시오(여타, 同); 2. 텍스트 수직 정렬을 설정하는 .align- 클래스(기본값: .align-baseline)는 인라인, 인라인블록, 인라인 테이블 및 테이블 셀 요소에만 영향을 미친다 ← 인라인이 아닌 컨텐츠에는 플렉스박스를 사용해야 한다!

줄 높이: .lh-sm/base/lg: html 문서 기본, 또는 부트스트랩에서 재설정한 기본값인 .lh-base 클래스의 line-height 값은 대략 1.5 정도이다

텍스트 자르기, 래핑 및 오버플로: 1. .text-truncate 클래스는 현재의 화면 너비를 벗어나는 영역서부터는 자르고, 나머지는 ...로 표시한다 ← 이 클래스는 블록레벨 요소 및 인라인-블록 요소에서만 작동된다!; 2. html에서는 기본적으로 텍스트가 길어지면 자동 줄바꿈하여 다음 줄로 내려간다(기본값인 .text-wrap). 하지만, 해당 요소에 .text-nowrap 클래스를 주면; (텍스트가 길어져서 다른 영역을 침범하더라도)자동 줄바꿈을 하지 않는다

블록쿼터: Bootstrap 5)에서 <blockquote> 태그(및 .blockquote 클래스)는 마진이 margin: 0 0 1rem;(= 상/좌우/하)으로 재설정되었고, <address> 태그는 이탤릭체에서 브라우저 기본 스타일로 재정의되고 line-height 또한 상속되며, margin-bottom: 1rem;이 추가되었다

리스트 스타일

░ 여기서는 부트스트랩 v5.3)의 리스트 관련 클래스들을 간략히 살펴봅니다..

목록 리스트: Bootstrap 5)에서는 <ul> 및 <ol>, <dl>의 margin-top은 제거되고, margin-bottom: 1rem;으로 재설정되며(내부의 중첩된 목록에서는 margin-bottom도 제거된다), 앞쪽 패딩 또한 재설정된다; 1. <ul> 및 <ol>에서 .list-unstyled 클래스를 주면; 앞에 붙는 불릿을 없애고 앞쪽 마진도 없애준다:; 2. <ul> 및 <ol>에서 .list-inline 클래스를 주고, 각 <li>에서 .list-inline-item 클래스를 주면; 가로로 펼쳐지는 인라인 리스트를 만들 수 있다:

사전목록 리스트: Bootstrap 5)에서는 <dl> 리스트에서 (html 5에서와는 좀 다르게)<dt>는 굵게 표시되고, <dd>는 margin-left: 0; margin-bottom: 0.5rem;으로 재설정된다. 한편, 가로 사전목록은 Bootstrap 5)의 그리드시스템을 써서 작성할 수 있다

박스 스타일

░ 부트스트랩 이전 버전들 속성명에서 방향을 의미하는 left/right는 Bootstrap 5) 버전에 와서 start/end로 바뀌었습니다. 이는, 최근의 Css 쓰기모드를 고려한 새로운 작명 방식인데, 부트스트랩 이전 버전들만 아니라 Css의 속성명과도 좀 상이해진 점이 있으니 우선적으로 기억해두십시오..

박스 테두리 스타일: .border: 1. 박스 테두리는 .border 클래스로 그려주는데, 여기서 특정 방면만 제외하고자 할 때는; .border에 덧붙여 .border border-top/bottom/start/end-0 식으로 사용해주면 된다:; 2. 박스 둥근 모서리는 .border에 덧붙여 .border rounded 방식으로 그려주는데.. .border rounded-1/2/3/4/5 클래스로 그 둥글기의 정도를 지정해주거나 또는, .border rounded-pill/circle 클래스를 사용할 수도 있다:; 3. 박스 굵은 테두리는 .border border-lg (부트스트랩 기본 굵은 테두리) 및 .border border-1/2/3/4/5 방식으로 그려줄 수 있다:

➥ Css 3) 방향별 굵은 테두리

부트스트랩에서 기본적으로 지원하는 굵은 테두리는 박스 4방면 모두 에 함께 적용되지만, 필요하다면; 아래, .border-*-lg와 같은 사용자정의 스타일을 작성하여 각 방향별 굵은 테두리를 만들어 쓸 수도 있다:

                                    
                                        /* Css 사용자정의 굵은 테두리 */
                                        .border-lg { border-width: 0.25rem; }
                                        .border-top-lg { border-top-width: 0.25rem; }
                                        .border-end-lg { border-right-width: 0.25rem; }
                                        .border-bottom-lg { border-bottom-width: 0.25rem; }
                                        .border-start-lg { border-left-width: 0.25rem; }

포커스 링 스타일: .focus-ring: .focus-ring은 포커스가 주어진 상태(:focus)의 기본 윤곽선을 제거하고 보다 광범위하게 사용자 정의할 수 있는 박스 모양으로 대체하는데, 모든 요소 및 컴포넌트에 대해 사용할 수 있다

Table 작성 기본

░ 부트스트랩의 Table은 (타사 위젯을 사용하는)Opt-in으로서, <table> 태그 안에서 .table로 지정해준 다음(.table table-sm은 작은 테이블), 선택적 수정자 클래스 및 사용자 지정 스타일로 확장하게 된다. 한편, 테이블 스타일은 상속되지 않는다 - 곧, 중첩된 테이블은 독자적으로 스타일을 지정해줄 수 있다

테이블 작성하기: 1. .table table-bordered는 테이블에 테두리를 그려주며, 반대로, .table table-borderless는 테이블의 테두리를 없애준다; 2. .table table-색상은 테이블에 색상을 넣어준다 ← 테이블 색상은 (<thead>, <tbody>, <tfoot>)각 그룹별, 행이나 열, 셀별로 각각 설정해줄 수도 있다!; 3. .table table-striped는 테이블 행에 구분을 위한 줄무늬를 추가하며, .table table-striped-columns 클래스는 테이블 열에 구분을 위한 줄무늬를 추가한다

#	도시	국립공원	사찰
1	경주시	남산	삼불사
2	경주시	남산	상선암
3	경주시	남산	천우사
4	경주시	남산	관음사
5	경주시	남산	백운암

테이블 제목: 테이블 제목을 나타내는 <caption> 태그는 (어디에 놓여지든 간에)기본적으로 바닥행에 배치되는데, .table caption-top 클래스로 상단에 배치해줄 수도 있다

* 테이블 캡션
#	도시	산	사찰
1	경주시	남산	상선암
2	경주시	남산	백운암
3	남산 용장	천우사 & 관음사
footer	footer	footer	footer

사용자 상호작용

░ 부트스트랩 v5.3)의 사용자 상호작용 관련

사용자 상호작용 방지하기: 부트스트랩의 .text-decoration-none 클래스는 <a> 태그의 링크 밑줄을 제거한다(소소한 이야기). 한편, .pe-none 클래스는 <a> 요소의 링크 밑줄만 아니라, 포인터(마우스, 스타일러스펜, 터치 등)과의 상호작용마저도 방지한다: 소소한 이야기

숨겨진 대화형 컨텐츠: 1. 시각적으로는 숨기되, 스크린리더기 등에는 알려야 하는 컨텐츠에는 .visually-hidden 클래스를 사용할 수 있는데, 이는 추가적인 시각 정보나 단서를 (예컨대, 색상을 통해 무언가를 알리고자 하는데)볼 수 없는 사용자에게 그 의도를 전달해야할 때 유용하다; 2. 시각적으로 숨겨진 대화형 컨텐츠의 경우, .visually-hidden-focusable 클래스를 사용할 수 있는데, 포커스가 주어지면 컨트롤이 표시된다

텍스트 선택방식: .user-select-all/none 클래스는 사용자가 텍스트 단락에서 클릭할 때 컨텐츠가 선택되는 방식을 설정한다:

플레이스홀더/스피너보더

░ 플레이스 홀더와 스피너 보더는 컴포넌트 또는 페이지에서 무언가가 로딩 중임을 표시한다

플레이스 홀더: 플레이스 홀더는 .placeholder 클래스로 작성한다. 플레이스 홀더의 높이는 기본적으로 부모 요소의 크기를 기반으로 하지만, .placeholder-lg/sm/xs 클래스로 변경해줄 수도 있다; 1. 플레이스 홀더의 너비는 그리드 컬럼이나 .w- 유틸리티 클래스, 또는 인라인 스타일을 통해 변경해줄 수 있고, 색상은 기본적으로 currentColor를 사용하는데, .bg-색상 클래스로 변경해줄 수도 있다:; 2. 플레이스 홀더에 애니메이션을 적용하려면; .placeholder 바깥에서 .placeholder-glow/wave 클래스로 래핑해주면 된다:

스피너 보더: 부트스트랩에서 스피너 보더는 스크립트 없이 단지 html과 Css로만 작성하는데, rem 단위 사이즈 및 display: inline-flex;로 빌드된다; 1. 스피너 보더의 형태에는 .spinner-border 및 .spinner-grow가 있고, .spinner-*-sm/lg 클래스를 써서 크기를 설정해줄 수도 있다:; 2. 스피너 보더의 색상은 기본적으로 currentColor(부모요소의 색상)으로 빌드되는데, .text-색상 및 .text-bg-색상 클래스를 써서 변경해줄 수도 있다:

Loaders.css

░ 플러그인 라이브러리는 웹페이지 로딩 시, 움직이는 짧고 작은 애니메이션을 보여주는 순수 Css 로딩 애니메이션이다 ← 프리로더 예 1 , 프리로더 예 2

프리로더 애니메이션: 먼저, loaders.css 소스 링크를 필요로 하며, 이어서 <body> 바로 다음에 컨테이너 요소를 만들어 애니메이션 종류를 지정해준다. 다음, 컨테이너 요소 안에 필요한만큼 적절한 수의 빈 <div> 블록을 만들어주면 된다 ← 그 개수에 따라 모양 및 움직임이 미세하게 달라진다! Css 로딩 애니메이션

프로그레스 바

░ 프로그레스 바는 프로젝트의 현재 진척 정도를 표시한다

프로그레스 바: 부트스트랩 5)에서는 더 이상 html의 <progress> 태그를 사용하지 않는다. 대신에, 프로그레스 바는 두 개의 html 요소와 너비 설정을 위한 Css, 약간의 추가적인 속성들로 구성된다. 프로그레스 바를 쌓고, 거기에 애니메이션을 적용하고, 그 위에 텍스트 레이블을 배치해줄 수 있다; 1. 프로그레스 바의 높이 및 값 범위를 나타내기 위해 .progress를 래퍼로 사용하는데, 이 래퍼는 role= "progressbar" 속성과 접근을 위한 label 및 접근 가능하게 만드는 aria 속성들(aria-label, aria-labelledby)을 필요로 한다. 그 내부에서 바와 레이블을 위해 .progress-bar를 배치하는데, 색상 및 너비는 인라인 스타일이나 유틸리티 클래스, 또는 사용자정의 Css를 사용하여 설정할 수 있다:; 2. 프로그레스바의 모양은 .progress-bar 클래스에 .progress-bar-striped 및 .progress-bar-animated 등을 덧붙여서 설정해줄 수 있다:; 3. 다중/누적 프로그레스바를 위해서는 래퍼로 .progress-stacked 클래스를 사용하는데, 멀티 진행률 표시기에서의 너비는 .progress-bar가 아닌 .progress에서 설정해주어야 한다:

Progressbar.js

░ 플러그인을 사용하면 반응형의 스타일리시한 웹용 진행률 표시기를 쉽게 만들 수 있는데, 애니메이션은 모바일 장치에서도 잘 작동된다!

프로그레스 바: Progress Bar에서는 Line, Circle 및 SemiCircle 등 몇 가지 모양을 기본 제공하는데, 먼저, 스크립트 소스를 불러들여야 한다

Bootstrap 5

버튼 및 뱃지, 선

Typography

상태 표시