Bootstrap 5) Layouts

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

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

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

Layouts

Bootstrap Start..

░ 여기서는 부트스트랩의 기본 철학을 먼저 살펴봅니다 - 잘 이해가 가지 않더라도, 한번 읽고 앞으로 나아가면 됩니다. 나중에 돌아와서 다시 읽어보면 좀 더 쉽게 와닿을겁니다..

부트스트랩의 기본 철학
부트스트랩은 크로스-브라우저를 위한 규격화 스타일인 부트스트랩 자체 재설정을 제외하고는, 모든 스타일 설정은 클래스를 선택자로 쓰고자 한다. 또한, 수정자 클래스는 복수의 속성, 혹은 복수의 값을 변경해야 하는 경우에만 사용해야 한다. 수정자가 항상 필요한 것은 아니므로, 불필요한 재정의를 한 것인지 확인하는 것이 좋다!
부트스트랩은 가능하면; 속도 및 접근성, 기능성의 측면에서 자바스크립트보다는 html 및 css로 구현하고자 하며, 따라서 자바스크립트는 html의 data- 속성을 써서 동작시킨다. 또한, 사용자정의 스타일보다는 우선적으로 부트스트랩 유틸리티를 사용할 것을 권장한다!
나아가, 부트스트랩은 브라우저에서 제공하는 일반적인 웹 요소의 기본 동작을 우선시한다. 예컨대, .btn 클래스는 모든 요소에 추가할 수 있지만, 대신에 (의미론적 측면과 브라우저에서 제공하는 기본 기능이라는 점에서)<button> 및 <a> 태그를 사용하고자 한다!

➥ 부트스트랩은 기본적으로 UI 타입과 스타일링을 분리하여 적용하는데, 그로 인해 각 UI 요소와 스타일링간의 다양한 조합이 가능해진다. 따라서, 컴포넌트는 기본 클래스 와 속성-값 쌍으로 구축되어야 한다 ← 예컨대, .btn은 모든 일반 스타일에 쓰이고, 부가적으로 .btn-primary로 색상을 입히는 방식이다: .btn btn-primary

부트스트랩의 html 규격 재조정
부트스트랩은 <body>의 기본 배경색을 background-color: #ffffff;로 초기화하고, 자체 폰트 스택을 지니면서 독자적인 css 규격 초기화(* 예: box-sizing: boder-box; 등)와 자체 폰트 규격(* 예: font-size: 1rem;, line-height: 1.5; 등)을 통해 크로스 브라우징 에 대처하며, 상황별 색상 설정 및 약간의 재정의된 태그들(<dl>, <pre>, <code>, <kbd> 등) 및 관련 클래스들(<pre> 태그에서의 .pre-scrollable, <blockquote> 태그에서의 .blockquote 등) 또한 지원한다
부트스트랩은 <body> 기본 글꼴 크기를 모든 브라우저의 기본값인 16px 크기를 고려하여 font-size: 1rem;(부트스트랩은 em 단위보다는 rem 단위를 쓸 것을 권한다!)으로 초기화하며, 또한 font-weight와 color, line-height도 자체 규격으로 재설정한다. 부트스트랩에서는 <h#>과 <p>, <li> 등에서의 margin-top은 제거되고 margin-bottom은 0.5rem(<h#>), 1rem(<p>, <li>에서) 등으로 주어 html 5 기본 규격과는 다소간 다른 요소간 간격을 유지한다. 한편, 부트스트랩에서는 <a> 태그의 기본 색상과 밑줄을 그대로 적용한다

➥ 부트스트랩의 반응형 폰트사이즈 메카니즘 은 margin과 padding, border-radius에다, box-shadow 같은 단위 값들까지 사용하여 대부분의 css 속성 재조정을 가능하게 한다. 이러한 메카니즘은 브라우저 뷰포트의 크기에 따라 자동으로 재조정되는데, 반응형 스케일링 동작을 가능하게 하기 위해 rem 단위와 뷰포트 단위가 혼합된 calc(); 함수로 컴파일된다!

부트스트랩의 효과 지원
부트스트랩은 모션 감소(prefers-reduced-motion) 미디어 기능에 대한 지원을 포함한다. 사용자가 모션 감소에 관한 설정을 지정할 수 있는 브라우저 환경에서, 부트스트랩의 대부분 트랜지션 효과(모달 대화상자의 여닫기, 또는 캐러셀의 슬라이딩 애니메이션 등)는 무시되고, 의미있는 애니메이션 속도(예컨대, 스피너 등)는 느려지게 된다 ← 곧, 이 기능을 지원하는 브라우저에서, 그리고 사용자가 명시적으로 이를 좋아하지 않는다고 표시하지 않는 한, 부트스트랩은 scroll-behavior 속성을 사용하여 부드러운 스크롤을 활성화한다!

➥ 부트스트랩은 또한, 다음과 같은 효과들을 기본적으로 지원한다: .shadow는 요소에 그림자 효과를 주며, .fade는 Alerts, Navs, Modal 등에서 흐릿하게 나타나고 사라지는 페이드 효과를 준다. .show/hide는 Alerts, Toasts, Modal, Collapase, List Group 등에서 요소를 드러내고 숨기는데 사용된다. 한편, .active/disabled는 Button, Link 등에서 활성/비활성 상태를 트리거한다

부트스트랩의 z-index 개념
부트스트랩에서의 구성요소 상태는 일반적인 z-index 척도를 따르는데, 컴포넌트 내부와 오버레이 컴포넌트 구성요소의 두 가지 스케일이 있다:
1. 부트스트랩의 일부 컴포넌트는 테두리 속성의 변경 없이 이중 테두리를 막기 위해 오버래핑 요소로 구축되는데(예: 버튼 그룹, 입력 그룹, 페이지네이션 등), 이러한 구성요소는 0(초기값), 1(:hover), 2(active 및 .active), 3(:focus)의 z-index를 공유한다 ← 참고로, 부트스트랩 v5.3) 버전에서는 새로이 .z-n1/0/1/2/3의 음수 인덱스 유틸리티도 도입되었다!
2. 한편, 부트스트랩에는 일종의 오버레이 기능을 하는 몇 가지 컴포넌트들이 있는데, dropdown(1000)로부터 시작하여 sticky(1020), fixed(1030), offcanvas-backdrop(1040) & offcanvas(1045), modal-backdrop(1050) 및 modal(1055), popover(1070), tooltip(1080), toast(1090) 순으로 이어진다. 각 오버레이 컴포넌트는 공통 UI 원칙을 통해 사용자가 포커스를 주거나 가리킨 요소가 항상 표시되도록 하는 방식으로 자신의 z-index 값을 높이게 된다 ← 예컨대, Modal은 문서 자체의 차단이므로 이를 내비게이션 바 위에 위치시키게 된다!

디스플레이 .d-

░ 부트스트랩은 Mobile First 반응형이며, 기본 클래스로 구축되고 뷰포트가 커짐에 따라 클래스를 더하면서 확장되는데, 이러한 반응형 접근 방식은 뷰포트가 커짐에 따라 스타일을 추가하도록 하여 css 재정의를 줄이는 효과가 있다!

부트스트랩의 브레이크 포인트
부트스트랩의 모든 컨텐츠는 Mobile First를 빌딩 블록으로 하여 최소한의 스타일을 적용한 다음(즉, 이 스타일은 그 위의 모든 브레이크 포인트에 다 적용된다!), 점차적으로 위쪽으로 올라가면서 (사용자 지정 브레이크 포인트에 맞추어)적층 구조로 스타일을 쌓으면서 올라간다: 예컨대, .d-none은 min-width: 0;으로부터 시작하여 무한대까지 적용되는 반면, .d-md-none은 md 브레이크 포인트에서부터 적용이 시작되는 것이다:

부트스트랩의 브레이크포인트 구조

블록레벨 요소 대 인라인 요소간 전환
.d-[*-]inline은 블록레벨 요소를 인라인으로 배치하며, .d-[*-]block은 인라인 요소를 블록레벨로 배치한다:
div .d-inline
div .d-md-inline
span .d-md-block span .d-block

➥ 그외에도.. 프린트, 테이블, 그리드, 플렉스박스 등과 관련된 많은 .d- 클래스들이 있는데, 필요해지면; 부트스트랩 공식사이트로 가서 더 살펴보십시오..

프린트에서는 숨긴다
스크린에서는 숨기고, 프린트에서는 보인다
화면에서는 숨긴 채 시작하되 lg서부터 보이고, 프린터에서는 항상 보인다
Visible 대 invisible
.d- 클래스와는 좀 다르게, .visible은 요소를 보이고, .invisible은 (요소가 자리잡던 공간은 그대로 비워둔 채, 화면상으로만)요소를 숨긴다:

.invisible → ()

너비/높이, 간격

░ 부트스트랩에서는 블록레벨 요소의 마진에는 rem 단위를 사용할 것, 마진 사용 시 가능하면 .margin-top은 피할 것(css 마진병합 현상과의 충돌 문제!)을 권장한다!

너비/높이
1. 부트스트랩에서 너비는 .w-0/25/50/75/100, 높이는 .h-0/25/50/75/100 클래스로 설정한다. 한편, .w-auto 및 .h-auto는 안의 컨텐츠에 맞추어 너비나 높이가 자동 조절된다:
w-25
w-50
w-75
w-100
h-25
h-50
h-75
h-100
2. .mw-[*-]100, .mh-[*-]100은 최대 너비, 높이로 설정한다. 한편, .vw-[*-]100, .vh-[*-]100은 (뷰포트 기준)최대 너비, 높이로 설정하며, .min-vw-[*-]100, .min-vh-[*-]100은 (뷰포트 기준)최하 너비, 높이로 설정한다:
눈내린 불국사
마진/패딩
Bootstrap 5)의 마진/패딩: .p-|.m-[*-]1/2/3/4/5 4방향 패딩, 마진 ← *는 브레이크 포인트
  • .pt-|ps-|pb-|pe-[*-]1/2/3/4/5, .mt-|ms-|mb-|me-[*-]1/2/3/4/5는 각 방향별 패딩, 마진 ← top / start / bottom / end
  • .px-|.py-[*-]1/2/3/4/5, .mx-|.my-[*-]1/2/3/4/5 가로/세로 양방향 패딩, 마진

➥ 숫자 1/2/3/4/5 는 각각 0.25/0.5/1(기준 spacer)/1.5/3의 비율이 되는데, 숫자에 0 값을 주면; 해당 요소에 부트스트랩 기본 규격으로 주어져 있던 마진이나 패딩이 제거된다!

음수 마진
부트스트랩 5) 기본 제공 음수 마진: .mt|.ms|.mb|.me-[*-]n1/n2/n3/n4/n5

코드 1.

코드 2. 음수 마진 없음

코드 1. [여기는 음수 마진 없음]

코드 2. (음수 마진 있음: .mt-n10)

☞ 참고로, [코드 2]가 위로 올라가 자리잡으면; [코드 1]의 위치는 그만큼 물리적으로 아래로 밀려나게 된다!

➥ Bootstrap에서 5단계의 각 방향별 음수 마진을 기본 제공하지만, 필요하다면; 그 이상의 사용자정의 음수 마진도 직접 만들어 쓸 수 있다: 

                                    
                                        /* 음수 마진의 확장 */
                                        .mt-n10 { margin-top: -6rem; }
                                        .mt-n15 { margin-top: -9rem; }
형제요소간 자동 마진
형제요소간 앞/뒤 자동 마진에는 플렉스박스의 .me-auto 및 .ms-auto 유틸리티 클래스를 사용할 수 있다:
.me-auto
Flex item 2
Flex item 3
Flex item 1
Flex item 2
.ms-auto
수평/수직 센터링
수평/수직 정중앙 배치를 위한 .mx/my-auto 클래스는 너비(width)가 설정되어 있는 블록레벨 요소 자신에 대해 사용할 수 있다:

(너비를 지닌 블록레벨 요소 p 자신)
.mx-auto & .my-auto

☞ 위 코드에서 p .mx-auto my-auto는 너비(style="width: 400px;)를 지닌 <p> 요소 자신을 (자신의 부모요소 기준)수평/수직 중앙에 놓고, p .text-center는 <p> 내부 컨텐츠를 수평 중앙으로 배치시키는 것이다!

포지셔닝

░ Css 박스모델 포지셔닝 관련 상세 설명은 본 강좌의 부분을 참조하십시오..

포지셔닝
Web 문서에서 모든 요소는 기본적으로 작성된 순서대로 배치되지만(.position-static), 필요에 따라 다르게 배치해줄 수 있다: .position-relative는 문서의 흐름대로 배치하되, 좌표값을 써서 (요소 자신이 배치될)시작 지점을 변경해줄 수 있다. .position-absolute는 (문서의 흐름과 무관하게)<body> 기준 좌표값을 써서 원하는 위치에 배치할 수 있다. 한편, .position-fixed는 (화면 스크롤과 무관하게) 뷰포트의 현재 위치에 고정한다.

포지셔닝 좌표값 설정

상하단 고정바
.fixed[-*]-top/bottom은 뷰포트의 상/하단에 (가장자리서 가장자리까지)요소를 배치하며, .sticky[-*]-top/bottom은 뷰포트의 상/하단에 (가장자리서 가장자리까지)요소를 (스크롤한 이후에)배치한다:

Fixed 고정바

Sticky 고정바

➥ 이러한 부트스트랩 고정바는 정상적인 DOM의 흐름으로부터 가져오는 것이기에 다른 요소와 겹치는 것을 방지하기 위해 사용자 정의 css가 필요할 수도 있다 ← 예컨대, 톱 내비게이션 메뉴바를 가리지 않기 위한 <body> 태그 최상단에서의 패딩 설정 등..

✓   순수 자바스크립트로 작성된 반응형 라이브러리를 이용하면; 웹사이트에서 (추가적인 Css 없이도)Sticky 요소를 쉽게 고정시킬 수 있다!

플로팅
.float-*-start/end 클래스는 요소를 좌/우로 플로팅한다. 플로팅 해제는 (다음에 나오는 요소에서).float-*-none을 써서 (직전 요소의 플로팅을)해제하거나, 부모요소에서 .clearfix 클래스를 써서 (내부 자식요소에서 사용된 플로팅을)해제해주거나 할 수 있다:

(* 플로팅이 해제되었나요?)

☞ 플로팅된 요소는 인라인 요소일지라도 블록 박스가 된다 ← 곧, display: inline-block;을 선언한 것과 같다!

그리드 시스템

░ 부트스트랩은 화면 가운데 고정된 960px 12컬럼 컨테이너를 기본 지원하는데, 이 컨테이너는 브라우저 해상도에 맞추어 반응형으로 동작한다!

그리드 시스템
부트스트랩에서 Container는 화면 가운데 고정된 반응형으로 동작하면서 Row나 Col과는 달리, 독자적으로 다른 요소들(예컨대, <h1> 등)이나 컨텐츠를 포함할 수 있다. 반면에, Row는 단지 Col만 포함할 수 있고, Col은 오직 Row 안에서만 존재한다:
[ 컨테이너 구조 ]

☞ 참고로, 전체 너비 단일 컬럼에는 .row 및 .col 없이 .container만 사용해도 된다!

➥ 컨테이너(.container)는 부트스트랩의 가장 기본적인 레이아웃 요소로서, (컨텐츠를 포함하고, 패딩을 주는 등)페이지 레이아웃을 제어하면서 또한 컨텐츠들을 좌우로 정렬하는 데에도 사용된다 ← 컨테이너는 좌우 각각 15px(= 0.75rem)씩의 패딩을 가지면서 Row의 음수 마진(좌/우 각각 -15px)에 대비한다!

1. Row는 언제나 컨테이너 안에 배치되어야 하며, 오로지 Col 단위만 포함할 수 있다. 또한, Row는 기본적으로 플렉스박스 속성을 가지며, 플렉스 박스의 속성들을 사용할 수 있다 - 곧, Col의 크기를 균등하게 배분하거나 Col간 간격(= Gutter)을 변경하는 클래스들이 있다
2. Col은 플렉스박스의 자식 요소들로서 Row와 동일한 높이값을 갖게 되며, 덕분에 부트스트랩의 컬럼은 자동 레이아웃을 이용할 수 있게 된다. 또한, 컨테이너와 마찬가지로, 각 Col간에는 30px(= 1.5rem)의 갭이 있는데, 각 컬럼은 기본적으로 좌우 15px(= 0.75rem)씩의 패딩값으로 음수 마진에 대비하도록 설계되어 있다 ← 나아가, 컬럼은 자신의 내부에 또 다른 Row(와 Col)을 포함할 수도 있다!

➥ 부트스트랩의 그리드 및 내비게이션 바는 기본적으로 Mobile First 반응형으로 설계되어 있기에, 확장 클래스로 덮어 씌우지 않는 한 개별 요소들이 상하로 쌓이는 적층 구조로 된다. 곧, 브레이크 포인트보다 작아지면; 적층 구조로 변경되며, 12 컬럼을 넘으면 자동으로 다음 행으로 넘어가서 좌우 및 상하로 쌓이게 된다(반응형에 대응하는 컬럼 래핑). 그로 인해 추가적인 css 작성이나 미디어쿼리 없이도 반응형으로 동작시킬 수 있게 된다!

그리드 레이아웃

░ 부트스트랩은 화면 가운데 고정된 960px 12컬럼 컨테이너를 기본 지원하는데, 이 컨테이너는 브라우저 해상도에 맞추어 반응형으로 동작한다!

그리드 컨테이너
부트스트랩에서 .container는 각 브레이크 포인트에 반응하면서 각각의 최대 크기(max-width)로 변경되는 고정 너비 12컬럼 컨테이너이며, .container-fluid는 항시적으로 width: 100%;가 유지되는 전체 너비 12컬럼 컨테이너이다
.col
.col
.col
.col-6
.col
.col

☞ 컬럼 수를 적지 않으면 모두 같은 크기의 컬럼으로 나뉘어지며, 하나의 컬럼에서만 개수를 지정하면 나머지 컬럼들은 같은 비율로 자동 조정된다:

.col-md-2
.col-md-5
.col-md-5

☞ .col-md-#는 md 브레이크 포인트서부터 #만큼의 크기를 차지한다 ← 곧, md 브레이크 포인트 이전까지는 적층구조로 쌓이게 된다!

.col-sm-12 col-lg-8

☞ 하나의 Col 안에서 이중 브레이크 포인트 설정 시, 예컨대 col-sm-12 col-lg-8과 같이 주어지면; sm에서는 12 컬럼, lg에서는 8 컬럼을 사용한다 ← 곧, 더 큰 브레이크 포인트는 화면 너비가 커질 때 작은 브레이크 포인트의 레이아웃을 덮는다!

Col: .col-sm-3
Col: .col-sm-9 (Row 중첩)
Row: .col-8 .col-sm-6
Row: .col-4 .col-sm-6
컬럼 자동 축소/확장: .col-auto shrink 대 .col grow
특정 Col에서 .col-auto를 쓰면 안에 있는 컨텐츠의 양에 따라 마치 <span> 값처럼 너비가 자동 조절된다:
.col col-lg-3
.col col-auto (여긴 좀 길군요 ~)
.col col-lg-3
.col-3
.col grow (자동 확장)
.col-3
.col-auto shrink (자동 축소)
컬럼 레이아웃: Row
개별 Col이 아니라 Row에서 컨텐츠와 레이아웃을 위한 최적의 컬럼 개수를 지정해줄 수도 있다:
.col
.col
.col
.col

☞ Row에 3개의 컬럼이 배치되고 남는 컬럼은 다음 행으로 내려간다!

.col
.col
.col
.col

☞ 전체 너비 Col 적층구조로부터 시작하여 sm 브레이크 포인트에서는 Row 내 Col이 2 개로 되며(나머지 2개의 Col은 아래 행으로 내려가서 재배치된다!), md 브레이크 포인트에서는 Col 4 개가 하나의 Row 행에서 나란히 배치된다

[Row 내부의 컬럼 1] .col
[Row 내부의 컬럼 2] .col
[Row 내부의 컬럼 3] .col
[Row 내부의 컬럼 4] .col

☞ .row-cols-auto는 Row에 자연스런 너비를 설정해준다. 곧, 한 행에 Col 4개를 다 채울 수 있다면; 다 채우고, 아니라면; 남는 Col은 다음 행으로 래핑하는 것이다!

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

컬럼 배치/이동

░

컬럼 이동 배치
1. 특정 Col에서 .offset[-*]-# 클래스를 추가해주면; 앞쪽에 # 컬럼 단위만큼 비운 지점에서부터 해당 Col이 배치된다:
.col-md-4
.col-md-4 offset-md-4
2. 마진 유틸리티인 .me-auto나 .ms-auto 클래스를 써서 컬럼 오프셋을 설정할 수도 있다:
.col-md-4 me-md-auto
.col-md-4
.col-md-4
.col-md-4 ms-md-auto

☞ 위 코드의 .col-md-4 ms-md-auto는 md 브레이크 포인트에 도달하게 되면; 앞쪽 형제 Col(들)을 앞쪽으로 밀어낸다!

컬럼 수평/수직 센터링
그리드시스템에서는, 부모 요소인 Row에서만 .mx-auto로 주면; 내부 자식 요소인 Col들은(플렉스박스로 작동되기에) 자연스레 정중앙에 배치된다:
자식 요소인 col 자동 배치
자식 요소인 col 자동 배치
.col my-auto
& div .mx-auto

☞ 카드(.card) 내부 자식요소들(위 <h5>와 <h6>)은 기본적으로 적층 구조로 쌓인다!

➥ 부트스트랩의 .w-100 클래스

Row 안에서 <div class="w-100"></div>이라는 작은 트릭을 써서 새 줄을 나눌 위치를 삽입하면 여러 줄에 걸쳐있는 동일한 구조의 컬럼 열을 만들 수 있다:

.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

➥ 이는 요소간 줄 간격을 주거나(예컨대, <div class="w-100 my-3"></div>), 특정 요소 내에서 빈 여백 행을 주는 용도로도 쓸 수 있다!

컬럼 Gap 설정

░ Gap Gutters는 컬럼의 수평 패딩(컬럼간 정렬을 위한 좌/우 패딩과 음수 마진 등)에 의해 생성된 컨텐츠간 간격인데, 1.5rem(= 24px)으로 시작한다 ← 이는 그리드를 패딩과 마진 스페이서 크기(= 1rem)에 (반응형으로)일치시킬 수 있도록 한다!

컬럼간 갭 설정 및 제거
.g-*-#(갭 설정)나 .gx-*-# 및 .gy-*-#(각각 수평, 수직 갭 설정) 클래스를 사용할 수 있다. 한편, .g-0는 설정된 갭을 제거하는데, Row의 모든 음수 마진과 (직계 하위 요소들의)수평 패딩을 모두 제거한다:

(* 컬럼간에 갭이 존재한다)

Custom column padding
Custom column padding

(* 컬럼간 갭을 제거하였다!)

Custom column padding
Custom column padding

☞ 더 큰 수평 여백에 의해 원치않는 오버플로가 발생하지 않도록, 컨테이너 안에서 여백을 늘려주어야 하는 경우가 있을 수 있다. 위 코드의 Row에서의 .gx-5에 대응한 Container에서의 .px-4가 그렇고, 또는 Container에서 .overflow-hidden 클래스를 주어도 좋다: <div class="container text-center overflow-hidden"></div>

➥ 갭의 오버플로에 대처하기

1. 아래는 Row의 좌/우 음수 마진 합계(-30px)가 Col간 좌/우 갭 합계(30px)를 흡수하는 완충 역할을 할 수 있기에, Container에서의 .overflow-hidden은 필요하지 않다!

Custom column padding
Custom column padding

2. 혹시나 모를 오버플로를 막기 위해 Row에서 .g-0 값을 줌으로써 갭을 없애줄 수 있다:

.col-sm-6 .col-md-8
.col-6 .col-md-4

☞ 참고로, 바깥의 컨테이닝 블록인 .container 자체를 없애고, Row에서 .g-0 값을 줌으로써 완벽히 빈 공간없는 디자인을 만들 수도 있다!

Flexbox layouts

░ Css 플렉스박스 관련 상세 설명은 본 강좌의 부분을 참조하십시오..

플렉스박스 선언과 정의
부트스트랩에서 .d-[*-]flex는 플렉스박스임을 선언하는데, css의 flexbox 속성과 마찬가지로 (아이템을 행 라인에 나란히 배치하는).flex-row 및 (아이템이 넘쳐나도 다음 행으로 내려가지 않는).flex-nowrap이 기본값이다. 한편, .d-[*-]inline-flex는 인라인 플렉스박스로 선언한다
.d-flex flex-row는 플렉스 아이템을 가로로 배치하는데, .d-flex flex-row-reverse는 뒤쪽서부터 배치하면서 앞으로 나아간다. 또한, .d-flex flex-column은 플렉스 아이템을 세로로 배치하는데, .d-flex flex-column-reverse는 밑에서부터 배치하면서 위로 올라가게 된다:
.d-flex
플렉스 2
플렉스 3
.d-flex flex-row-reverse
플렉스 2
플렉스 3

☞ 이상은(이하로도) .d-flex flex-row(기본값)를 기준으로 한 것인데, .d-flex flex-column에서 어떻게 될지는 그냥 머리로만 유추해보십시오 ← 시작점은 같되, 가로 끝에서 세로 끝으로 종착점 방향이 바뀌는만치 다른 모든 속성값들이 움직이는 방향도 그에 맞추어 정확하게 90도만큼씩 달라지게 됩니다!

.d-flex

.d-flex
플렉스박스 2
플렉스박스 3
플렉스박스 4
플렉스박스 5

☞ 여기서는 한 행에 모든 아이템을 배치하되, 공간이 부족하면; 아이템이 아래로 늘어난다!

.d-flex flex-wrap

.d-flex flex-wrap
플렉스박스 2 - wrap
플렉스박스 3 - wrap
플렉스박스 4 - wrap
플렉스박스 5 - wrap

☞ 여기서는 한 행에 채울만큼의 개수만 채우고 공간이 모자라게 되면; 나머지 아이템은 아래로 래핑된다!

플렉스박스 아이템 정렬
부트스트랩의 플렉스박스 아이템 정렬:
  • .justify-content-start/center/end/between/around/evenly 아이템 가로 배치 기준점 ← 기준축 방향으로
  • .align-content-start/end/center/between/around/stretch (아이템이 넘쳐서 다음 줄로 내려갈 때)아이템 세로 정렬 기준점 ← 교차축 방향으로
  • .align-items-stretch/start/end/center/baseline 아이템 세로 배치 기준점 ← 교차축 방향으로
  • .align-self-stretch/start/end/center/baseline (개별 아이템의)세로 배치 기준점 ← 교차축 방향으로
.align-self-start
.align-self-center
.align-self-end
align-self-stretch
아이템 밀어내기 .me/ms-auto
.me/ms-auto는 나머지 아이템들을 뒤/앞으로 밀어내고, .mb/mt-auto는 나머지 아이템들을 아래/위로 밀어낸다:
.me-auto
Flex item
Flex item
Flex item
Flex item
.ms-auto

아이템 공간배분

░ 화면 너비를 변경해가면서 각 아이템들간 공간 배분이 어떻게 변동되는지 확인해보십시오..

아이템 공간배분 .flex-fill
(형제 요소들과의 관계에서)사용 가능한 남는 영역 전부를 차지한다. 곧, 형제 요소들의 컨텐츠를 다 채워준 뒤, 남는 영역은 모두 자신이 차지한다:
.flex-fill
아이템 2
아이템 3

☞ 모두의 컨텐츠를 채우기에 모자라면; 모두 똑같은 크기의 영역으로 배분된다!

아이템 공간배분 .flex-grow-0/1
주변 아이템을 채운 뒤 남는 공간이 있으면; 어떻게 할 것인인가?
.flex-*-grow-0 (기본값: 자기 컨텐츠만큼만 채운다)
2nd
3rd
.flex-*-grow-1 (남는 공간을 자기가 차지한다)
2nd
3rd
아이템 공간배분 .flex-shrink-1/0
주변 아이템을 챙겨주다 자신을 위한 공간이 부족해진다면; 어떻게 할 것인가?
.w-100
.flex-shrink-1 (기본값: 자신을 줄여간다 - 곧, 자신을 밑으로 늘이게 된다!)
.w-100 (나머지 아이템을 줄여간다 - 곧, 나머지 아이템들을 밑으로 늘이게 된다!)
.flex-shrink-0 (자기 너비는 그대로 유지하면서..)
192x192 이미지
이미지는 항시 자신의 공간을 유지하고(.flex-shrink-0), 남는 공간은 모두 내가 차지한다(.flex-grow-1)

Stack 레이아웃

░ Stack은 부트스트랩의 플렉스박스 유틸리티로 구축되어 사용자 컴포넌트를 쉽고 빠르게 만들 수 있도록 도와준다!

스택 .vstack 및 .hstack
.vstack은 수직 레이아웃을 만들고(각 아이템들은 전체 너비를 차지한다), .hstack은 수평 레이아웃을 만든다(각 아이템들은 수평 중앙에서 컨텐츠만큼의 너비를 차지한다)
[ .hstack 및 .vstack 정의 ] 
                                        
                                            .hstack {
                                                display: flex; flex-direction: row; align-items: center; align-self: stretch;
                                            }
    
                                            .vstack {
                                                display: flex; flex-direction: column; align-self: stretch;
                                                flex: 1 1 auto;
                                            }

☞ 아이템간 간격을 주려면; .gap-[*-]# 클래스를 더해주면 된다!

➥ 그리드(.d-grid)나 플렉스박스(.d-flex)에서 각 아이템간 간격을 줄 때, (하위 요소들에서 개별적으로 마진 유틸리티를 쓰는 대신에)부모요소에서 .gap-0/1/2/3/4/5 클래스를 쓰는 것이 보다 간편할 수 있다. .gap-#은 아이템간 간격을 설정하는데, 주변 가장자리는 열외로 하고 각 아이템 사이에만 여백을 준다. 한편, .row/column-gap-#으로 수직/수평 각 방향으로 설정해줄 수도 있다 ← 이 .gap 클래스는 기본적으로 반응형이다!

카드 작성 기본

░ 부트스트랩의 카드는 기본적으로 플렉스박스로 작동하면서, 다양한 변형과 옵션이 있는 유연하고 확장가능한 컨텐츠 컨테이너이다!

카드 작성의 기본
부트스트랩 카드는 .card 클래스로 작성하는데, 이 카드는 내부 요소들은 세로로 배치되고(.d-flex flex-column) 부모요소의 너비를 가득 채우면서 마진은 0 으로 설정된다. 아래는 가장 기본적인 카드 박스(.card) 형태이다:
카드 header
카드 제목
- 부제목

카드 텍스트 및 링크 등..

카드 footer
[ 카드 작성의 기본 ]

☞ .card border-5 border-grey rounded-3는 카드 테두리(& 색상, 둥근 모서리)를 설정해준 것이며, .w-75 mx-auto는 카드의 크기를 지정하고 가로 정중앙에 배치해준 것이다

카드 색상 설정
1. 카드 박스(.card)에서 설정해준 배경색 및 텍스트 색상은 카드 전체(card-header, card-body, card-footer 모두)로 확장된다:
Header
카드박스 색상

- 이 카드박스 색상은 카드 전체로 확장된다!

Footer

☞ .card-header 및 .card-footer에서 .bg-transparent 클래스를 더하여 (부트스트랩에서)카드에 기본 설정해준 배경색을 없애줄 수 있다. 하지만, 위와 같이 .card에서 자체 설정한 배경색(.card text-bg-secondary)에는 적용되지 않는다 ← 이는, 부트스트랩에 기본 설정된 색상이 덮여지는 때문이다!

Header
.card-body text-body-secondary

.card-text

.card-text text-success

Footer

☞ 단, 위에서처럼, 카드 내부에서 달리 설정해줄 수 있다!

2. 카드, 뱃지 등에서는 .text-bg-색상 클래스로 배경색을 설정해줄 수 있는데, 이 경우 텍스트색은 배경색에 대비되는 색으로 자동 설정된다:
카드 헤더

뱃지, 카드에서의 배경색 설정

카드 푸터
카드 내 이미지 배치
카드에 이미지를 배치할 때, .card-body 바깥에서는; .card-img-top/bottom 클래스로 위/아래에 이미지를 넣어주면 된다:
상단 카드 이미지
Card body
하단 카드 이미지
남산부석정사각
Card title

md 브레이크 포인트에서 카드 이미지를 꽉 채우기 위해 .row g-0(그리드 여백 제거)와 .col-md-* 클래스를 사용하였다

최근 업데이트: 3일 전

☞ md 브레이크 포인트에서 카드 이미지를 꽉 채우기 위해 .row g-0(그리드 여백 제거)와 .col-md-* 클래스를 사용하였다!

* cf) 부트스트랩의 그리드 시스템을 쓰면; .card-body 내부에서 좌 또는 우측으로 이미지를 배치해줄 수 있다!

카드 고급

░

카드 컬럼
부트스트랩의 그리드 시스템과 .row-cols-*-# 클래스를 사용하여 한 행에 표시할 카드 개수를 제어할 수 있다:
Card title

카드 본문..

Card title

카드 본문..

Card title

카드 본문..

Card title

카드 본문..

☞ 참고로, 각 카드에 있는 .h-100 클래스는 각 카드의 높이를 똑같이 맞추기 위한 것이다!

➥ 스크롤링 카드

사용자정의 클래스 .card-scrollable은 .card-body 요소의 최대 높이를 설정하고 카드 안의 내용이 그 높이를 넘어가는 경우 카드 본체의 내용을 스크롤할 수 있도록 설정되어 있다:

스크롤링 카드

.card-body에서.. style="max-height: 8rem;"

¶ 사용자 정의 스크롤 가능 카드를 사용하면; .card-body 요소의 최대 높이를 설정하고 카드 안의 내용이 그 높이를 넘어가는 경우 카드 본체의 내용을 스크롤할 수 있다!

¶ 또는, 인라인 css 또는 다른 카드에 대한 css 재정의를 사용하여 카드 본체의 최대 높이를 설정할 수도 있다!

* 카드 본문 안에 커서를 놓고 스크롤하십시오! 

                                                    
                                                        
                                                    
                                                
                                                    
                                                        .card-scrollable .card-body {
                                                            max-height: 45rem; overflow-y: auto;
                                                        }

☞ 여기서는.. 공간을 줄이기 위해, 이 예제 카드의 최대 높이를 인라인 css(style="max-height: 8rem")로 설정해주었지만, 실제 사용 시는 위 사용자정의 css를 적절한 높이로 수정하여 사용하면 됩니다..

➥ 이미지 오버레이 카드

사용자정의 클래스 .card-img-overlay는 이미지를 카드 배경으로 넣고 그 위에 카드 텍스트를 겹치는데.. 이미지에 따라 추가 스타일이나 유틸리티가 필요할 수도, 그렇지 않을 수도 있다:

오버레이 카드 이미지

경주 남산 천동탑 

                                                    
                                                        
                                                    
                                                
                                                    
                                                        .card-img, .card-img-top, .card-img-bottom { width: 100%; }
                                                        
                                                        .card-img-overlay {
                                                            position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* 카드 전체 */
                                                            padding: 1rem; border-radius: 0.33rem;
                                                        }

* cf) 이 사용자정의 오버레이 카드는 배경 이미지를 텍스트 오버레이가 있는 카드 이미지로 사용하는데, 이미지 오버레이 시 카드 내부 컨텐츠가 이미지보다 높아서는 안된다 - 아니라면; 컨텐츠가 이미지 외부로까지 펼쳐지게 된다!

Table 작성 기본

░ 부트스트랩의 Table은 (타사 위젯을 사용하는)Opt-in으로서, <table> 태그 안에서 .table로 지정해준 다음, 선택적 수정자 클래스 및 사용자 지정 스타일로 확장하게 된다!

테이블 작성하기
1. 테이블의 색상은 table 전체나 각 row마다, 또는 개별 셀마다 각각 설정해줄 수도 있다. 한편, 부트스트랩에서 모든 테이블 스타일은 상속되지 않는다 - 곧, 중첩된 테이블은 독자적으로 스타일을 지정해줄 수 있다:
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

☞ .table table-hover는 (tbody를 대상으로)마우스 hover 상태를 표시한다. 반면, (tr이나 셀에서 설정하는).table-active는 활성 상태를 표시한다

* cf 1) .table table-striped 클래스는 테이블 행에 얼룩말 줄무늬를 추가한다. 반면, .table table-striped-columns 클래스는 테이블 열에 얼룩말 줄무늬를 추가한다

* cf 2) .table table-bordered border-primary는 border-Primary 색상으로 테이블 테두리를 그려주고, .table table-borderless는 테이블의 테두리를 없애준다. 한편, .table table-sm은 작은 테이블을 만든다

2. 테이블 제목을 나타내는 <caption> .. </caption> 태그는 (어디에 놓여지든 간에)기본적으로 bottom에 배치되는데, .table caption-top 클래스로 상단에 배치해줄 수 있다:
* 테이블 캡션
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
footer footer footer footer

☞ 행 및 셀에서의 .table-active 클래스는 활성 상태를 표시한다!

* cf 1) .table table-색상은 색상 테이블을 만드는데, (<thead>, <tbody>, <tfoot>)각 그룹별, 행 및 셀별로 각각 설정해줄 수도 있다!

* cf 2) .table-group-divider 클래스는 테이블 그룹들 사이에 두꺼운 테두리를 만든다 ← Bootstrap v5.3) 버전에서는 (예정되어 있지만)아직 구분선의 색상은 지원하지 않는다!

➥ 반응형 테이블

반응형 테이블은 .table table-responsive로 래핑함으로써 모든 뷰포트에서 쉽게 가로 스크롤을 가능하게 한다. 곧, .table-responsive는 항시 반응형으로 동작하여 가로로 스크롤된다. 한편, .table-responsive-*로 특정 브레이크포인트를 설정해주면; 해당 지점서부터는 반응형 작동을 멈추게 된다!

➥ 반응형 테이블은 overflow-y: hidden; 속성을 사용하여 테이블의 아래쪽이나 위쪽 가장자리를 벗어나는 모든 컨텐츠를 잘라내게 되고, 이는 드롭다운 메뉴나 타사 위젯을 잘라낼 수도 있다!

html 5) Table 작성

░ 은 행/열 로 구성된 데이터 집합으로서 표 형식의 데이터인데, 열/행이라는 형식 면에서는 Microsoft Excel을 생각하면 됩니다 - 모양 면에서는, 마이크로소프트 Word나 한컴의 Hwp에서 '표 작성'하는 것과 같군요..

Table 작성의 기본
1. <table> 태그 안에서 <tr> 태그로 각 행을 만들고, <th>(제목 셀: 셀 중앙에 굵게 표시된다) 및 <td> 태그로 셀을 만들어 그 안에 내용을 넣어준다. <table> 태그에는 border 속성으로 표 테두리선을 표시해줄 수도 있다 ← 이 경우, 내부 셀들의 테두리도 기본 셀간 마진 및 기본 1px 실선으로 함께 표시된다!
<td>나 <th> 태그(가로 행) 안에서는 colspan="개수" 속성으로 열 방향으로, rowspan="개수" 속성으로 행 방향으로 열 및 행을 합쳐줄 수 있다 ← 제목이 길어 축약이 필요하다면; 제목 행인 <th> 태그에서 abbr 속성을 사용하면 된다!
<colgroup>(과 <col>) 태그(세로 열)는 열 스타일을 정의하는데, <caption> 태그 뒤, <tr> 및 <td> 태그 전에 사용되어 <col> 태그를 넣은 순서대로 한 열에 있는 모든 셀에 같은 스타일을 적용하는데, 하나의 <col>만 넣으면 첫번째 열에만 적용되며, <col> 태그의 span 속성을 이용해 둘 이상의 열을 함께 묶어줄 수도 있다 ← 단, <thead>와 <tfoot>는 제외한 <tbody>에만 적용된다!
2. 표에 제목을 달아주려면; <table> 태그 시작 부분에 작성해주면 된다. 나아가, <table> 태그 안에서 <thead>/<tbody>/<tfoot>로 테이블을 구성하면 화면 낭독기 등에 표의 구조를 알려줄 수 있으며, css를 써서 서로 다른 스타일을 적용시키거나 스크립트를 써서 본문 부분만 스크롤되도록 하는 등의 활용이 가능해진다!
화면 낭독기에서 표를 읽어줄 때 도움이 되도록 표 설명을 별도의 문장으로 작성한 후 <table> 태그에서 aria-describedby 속성을 추가해 연결해줄 수 있다. 또는, <figure> 태그로 <table> 태그를 둘러싼 뒤 <figcaption> 태그로 <table> 태그의 바깥쪽 바로 위나 밑에 표 설명을 배치할 수도 있다!

➥ <tbody> 등의 테이블 구조는 항상 테이블에 포함되어 있다고 간주해야 한다 - 곧, html 코드에서 명시적으로 지정하지 않더라도, 브라우저에서는 이를 암묵적으로 포함시킨다 ← 이 문제는 자바스크립트로 html DOM 테이블을 다룰 때 반드시 고려해야만 하는 부분이다!

테이블 작성 기본 예

테이블에서 셀의 너비나 높이는 표의 크기 및 셀 안의 내용에 맞추어 자동 설정된다 ← 하지만, css의 width, height, padding 속성을 써서 셀의 너비와 높이, 여백을 수동으로 지정해줄 수도 있다!

  • caption-side: top/bottom; // 캡션의 배치위치 - 캡션은 <table> 바로 아래서 쓰여 표 위(top)나 아래(bottom) 중앙에 표 제목을 달아준다 ← 캡션은 접근성을 위해 달아주는 것이 좋지만, 외관상 문제가 된다면; css를 써서 보이지않게 해줄 수도 있다!
  • border-collapse: separate/collapse; // css로 표의 테두리를 표시하는 경우 표 테두리와 셀 테두리를 각각 지정하게 되는데, 이 때 collapse 값을 넣어서 표와 셀의 테두리간 겹치는 부분을 하나로 합쳐줄 수 있다
  • border-spacing: 수평거리[ 수직거리]; // 테이블 테두리와 셀 테두리가 분리되어 있는 경우; 인접한 셀 테두리간 거리를 지정한다 ← 수평/수직 같은 값으로 하나만 주거나 수평거리 수직거리 각각 줄 수도 있다
  • empty-cells: show/hide; // 빈 셀의 테두리를 그리지 않고 비워줄 때 사용한다
  • text-align: left/center/right; // 셀 안에서 내용물의 수평 정렬을 지정한다
  • vertical-align: top/middle/bottom/baseline; // 셀 안에서 내용물의 수직 정렬을 지정한다 ← baseline은 셀의 기준선에 내용의 기준선을 맞춘다
  • table-layout: fixed; // 셀의 너비를 고정한다

➥ 테이블과 셀의 크기가 주어진 상태에서 <table> 태그에 fixed 속성을 주면; 셀의 너비가 고정되는 반면, 셀 너비보다 긴 내용은 셀 바깥으로 밀려나게 된다 ← 하지만, css를 써서 word-break: break-all;(셀 너비보다 긴 내용도 셀 안에 표시한다) 속성과 height: auto; 속성을 함께 지정해주어 셀 내용을 다 표시하도록 해줄 수도 있다!

wave