Css 3) 2

블록레벨 요소(예컨대, 이 문단 전체)는 부모요소의 너비 100%와 자체 내용물의 최대 높이를 차지하며, 인라인 요소(예컨대, 이 문단 내의 각 단어들)는 자체 내용물의 최대 높이와 최대 너비를 차지하게 된다:

                                    
                                        .divspan_ex {
                                            display: inline-block;
                                            height: 2.5em; padding: 8px; border: 1px solid gray;
                                        } .divspan_ex:hover { background-color: rgb(0 0 0 / 0.1); }
                                    
                                

(! 위 html 예제 코드에서 <p> 요소의 Css 설정(class="divspan_ex")을 없애주면 어떤 모습이 될까요?)

인라인 요소 옆에서 블록레벨 요소로 변신한 인라인 요소입니다 !

                                    
                                        .divspan_ex2 {
                                            display: block;
                                            height: 2.5em; padding: 4px; margin: 0;
                                        }
                                    
                                

한 단락 내부에 인라인 요소인 스판 영역이 있는데, 이 인라인 요소에 display: inline-block; 속성을 주니 블록레벨 요소에서만 작동하는 width, margin과 padding 및 text-align 속성이 작동하는군요..

                                    
                                        span.inline_In_block {
                                            display: inline-block; /* 인라인 요소에 inline-block 속성을 준다 */
                                            width: 120px; margin: 0.2em; padding: 5px;
                                            background-color: beige; border: 1px solid red; text-align: center;
                                        }
                                    
                                

                                        
                                            /* 외부값 설정: 흐름 레이아웃에서의 요소의 표시 유형 지정 */
                                            display: block [flow]; /* display: block flow; ← 다중 키워드 표기방식 */
                                            display: inline [flow]; /* display: inline flow; ← 다중 키워드 표기방식 */

                                            /* 내부값 설정: 요소 내부에서 컨텐츠가 배치되는 서식 컨텍스트 유형 정의 */
                                            display: [block] flex; /* display: block flex; */
                                            display: [block] grid; /* display: block grid; */

                                            /* inline-내부값 설정 */
                                            display: inline-flex; /* display: inline flex; */
                                            display: inline-grid; /* display: inline grid; */
                                        
                                    

                                        
                                            /* flow-root 설정: 블록 컨텍스트 박스를 생성하여 서식루트가 있는 위치를 정의한다 */
                                            display: block flow-root;
                                            display: inline flow-root;
                                            display: inline-block; /* display: inline flow-root ← 주변 컨텐츠와 함께 흐르는 블록 박스를 생성한다 */
                                        
                                    

visibility: hidden;

display: none;

➥ 요소에 display: none;으로 설정하면 접근성 트리에서 제거되고, 스크린리더기 등에서도 접근하지 않는다. 하지만, 숨겨져 있지만 보이는 요소의 aria-describedby나 aria-labelledby 속성으로 참조되는 요소는 보조기술에 노출된다 ← 관련 접근성 문제는, 더 필요하시면; WebAIM 문서를 참조하십시오..

➥ 컨텐츠와 패딩, 테두리에는 배경 이미지를 지정할 수 있지만(곧, 컨텐츠와 패딩, 테두리는 블록레벨 요소의 영역에 속한다), 마진은 단지 박스간 간격을 제어할 뿐이기에 배경 이미지가 적용되지 않는다(곧, 마진은 박스에 포함되지 않는다!). 한편, 외곽선(outline) 및 그림자(box-shadow)는 박스 테두리 바깥 마진 공간에서 덧칠되므로 역시 박스의 크기에는 전혀 영향을 미치지 않는다!

                                                    
                                                        .div_ex00 {
                                                            width: 400px; margin: 20px; padding: 20px;
                                                            border: 20px dotted gainsboro;
                                                        }
                                                        
                                                        .div_ex00:first-of-type {
                                                            background-color:yellowgreen;
                                                        
                                                            /* 이 부분은 Css 기본값이므로, 순수 html 문서에서는 적을 필요가 없다 */
                                                            box-sizing: content-box;
                                                        }
                                                        
                                                        .div_ex00:last-of-type {
                                                            background-color: blanchedalmond;
                                                        
                                                            /* 부트스트랩에서라면; border-box가 기본값으로 재정의되어 있으므로, 실제로 적을 필요는 없다! */
                                                            box-sizing: border-box;
                                                        }
                                                    
                                                

➥ 현재 웹문서 내 모든 요소에 box-sizing: border-box; 속성을 적용하고자 한다면; 아래와 같이 설정해주면 된다. 하지만, 이미 부트스트랩 등 대다수의 플랫폼들에서는 패딩이나 테두리로 인해 박스의 너비가 변하는 것을 방지하기 위해, 자체 규격으로 이 값을 border-box로 재설정하여 사용하는 것이 보통이다:

                                    
                                        html { box-sizing: border-box; }

                                        *, *::before, *::after { box-sizing: inherit; }
                                    
                                

☞ 이렇게 하면 여백이 요소의 최종 계산된 너비에 영향을 미치지 않도록 보장하지만, 드물게 구글 맵 등에서 문제가 발생할 경우가 있는데, 그런 경우에는 해당 요소에서 다음과 같이 재정의해줄 수 있다: .googlemap-widget { box-sizing: content-box; }

Css is awesome!

                                    
                                        .box { /* box의 외부적 크기 설정: */
                                            width: 300px; // 이것이 내부 자식요소 컨텐츠의 크기를 제한한다 ← 넘치면; 오버플로가 발생한다!
                                        }
                                    
                                

☞ 이렇게 오버플로되는 현상을 방지하는 방법 중 하나가, 위와 같이 외부적 크기 지정인 width 값을 min-content 로 주어 내부 컨텐츠의 양에 따라 박스 크기가 신축적으로 변경되도록 해주는 것이다: .box { width: min-content; }

• 박스 내/외부 크기 조정

• 화면표시
• html
• Css

☞ 이 문장이 박스를 넘쳐 오버플로가 발생하는 경우, 체크해주세요: 내부 크기 적용하기

                                                    
                                                        .box-demo { width: 430px; height: 230px; } /* 기본 설정된 외부 크기 */

                                                        .box-demo[data-sizing="intrinsic"] { /* 토글 버튼이 눌리면; */
                                                            width: max-content; height: max-content; /* 내부 컨텐츠 양에 따라 박스가 늘어난다! */
                                                        }

                                                        .box-layout {
                                                            display: grid; grid-template-columns: 1fr min-content; gap: 0.5rem;
                                                            width: max-content;
                                                        }
                                                    
                                                

☞ 박스에 외부 크기가 주어져 있지만, 내부 크기 조정을 통해 컨텐츠(와 박스)를 더 많이 제어할 수 있다. 곧, 이 요소가 외부 크기 조정을 사용하는 경우 요소의 경계를 오버플로하기 전까지 추가할 수 있는 콘텐츠의 양에 제한이 있지만, 내부 크기 조정 토글이 켜져 있는 경우에는 그렇지 않다(곧, 내부 컨텐츠를 오버플로 없이 채울 수 있도록 박스가 커진다!)

* cf) 이 예제에서는 외부적으로 width와 height 값이 모두 지정되어 있고, 이는 박스 내부의 모든 것에 엄격한 경계를 부여하여, 컨텐츠가 박스보다 커져서 가시적으로 오버플로하는 상황이 발생하지 않는 한 그대로 적용된다. 하지만, 내부 문장이 박스 크기를 초과한다면; 위 토글 버튼을 눌러보십시오..

➥ 스타일시트에서 body { width: 960px; margin: 0 auto; }와 같이 설정해주면; 해당 박스(여기서는, 웹문서 전체)는 브라우저 크기에 맞추어 가변적인 크기로 항시 중앙에 위치하게 되는데, 브라우저가 박스 크기보다 작아지는 경우에 대비하고자 한다면; max-width: 960px; 식으로 스타일을 추가하여 스크롤바가 생기는 대신 컨텐츠가 밑으로 내려가도록 해주면 된다!

                                        
                                            img { width: 100%; max-width: 100%; min-width: 75%; height: auto; }
                                        
                                    

➥ 값 은 12시 방향부터 출발하여 상 우 하 좌, 상 좌우 하, 상하 좌우 식으로 줄 수 있고, 값의 단위는 px(= 절대 크기), %(= 부모 요소에 대한 비율), em(= 부모요소 기준) 및 rem(= body 기준) 등을 쓸 수 있으며, auto (기본값)는 남는 공간 모두를 차지하면서 적절하게 자동 배치된다(예컨대, Flex 박스에서의 자동 마진)

☞ 위 코드의 <div> 박스는 최대 크기 600px (max-width: 600px;), 상하 마진 0 & 좌우 마진 auto (margin: 0 auto;)로 되어 화면의 가로 정 중앙에 위치하게 된다!

➥ 박스는 가변적이되 그에 무관하게 마진이나 패딩은 고정되어 있도록 하고자 한다면; Css의 calc(); 함수를 사용할 수도 있다: div { margin: calc(100% - 25px) calc(100% - 100px); } ← 박스 상하쪽으로 25px 만큼씩의 여백을 주고, 좌우쪽으로 100px 만큼씩의 여백을 준다!

Static 컨테이닝 블록

컨테이닝 블록 3)

                                    
                                        #ex_position-div { /* 부모 div 박스 position: relative; */
                                            position: relative; height: 200px;
                                        } #ex_position-div div { /* 내부 div 박스들 position: absolute; */
                                            position: absolute; width: 150px; height: 90px;
                                        }
                                                                        
                                        #ex_position-div div:nth-child(1) { left: 0px; top: 0px; }
                                        #ex_position-div div:nth-child(2) { left: 50px; top: 50px; }
                                        #ex_position-div div:nth-child(3) { right: 0; top: 0; }
                                        #ex_position-div div:nth-child(4) { right: 0; bottom: 0; }
                                    
                                

☞ 위 코드에서, position: absolute;로 지정된 자식 div 요소들의 좌표는 position: relative;로 지정되어 있는 부모 div 요소의 좌상단 꼭지점을 기준으로 한다 ← 곧, position: absolute;로 지정된 요소는 가장 가까운 (fixed, absolute, relative, sticky로 설정된)부모요소를 자신의 컨테이닝 블록으로 하게 된다!

☞ position: relative; top: 30px; left: 30px;는 (요소 자체가 윈래 나타나야 할 위치에서 상대적으로)위로부터 30px, 좌측으로부터 30px 떨어져서 배치된다

☞ position: absolute;는 요소를 문서의 기본 흐름에서 벗어나 (가장 가까운 부모요소의 좌상단을 기준으로 하는)좌표값을 써서 배치한다. 이때, 상위 부모요소에서 position: relative;로 설정해주면; 그 부모요소를 기준으로 하는 절대 위치에 자리잡게 되는 것이다!

➥ 특정 요소에 position: relative; 값을 추가하면; position: absolute; 값을 가진 모든 자식요소의 컨테이닝 블록이 된다. 이는, 자식요소에 position: absolute; 값이 적용되는 경우; 기존의 상위 부모요소 대신 이 relative 요소 아래로 재배치됨을 의미한다 ← 이러한 특성은, 일반 흐름에서 요소를 완전히 제거하고, 대신 컨테이닝 블록의 가장자리(좌상단 모서리)로부터의 오프셋을 사용하여 요소를 배치할 때(예컨대, 화면 밖에 숨어 있지만, 버튼을 클릭하여 나타나고 사라지는 패널창 등)에 유용하게 사용된다!

Position: fixed;

                                    
                                        /* ---------------------
                                            .h5-fixed {
                                                position: fixed; top: 0px; right: 120px; background-color: transparent;
                                            }
                                        */
                                    
                                

☞ 위 Css의 주석을 풀어주고 스타일시트에 추가하여 결과를 확인해보십시오..

➥ 이는 컨텐츠가 스크롤될 때도, 항상 화면의 같은 위치에서 떠다니는 탐색 메뉴창, 메시지창, 광고창 등을 만드는 데 유용하게 사용된다. 예컨대, 웹페이지 탐색 시 상단 내비게이션바나 하단 바닥글, 좌우측 사이드바 등이 고정되어 있는 경우를 흔히 접하게 되는데, 이러한 각 방면 고정바는 position: fixed; 속성과 박스 좌표, 너비(및 높이) 값을 써서 만들게 된다:

각 방면 고정바 만들기 ⇢ 전체화면 고정바 만들기 ⇢

☞ 위 코드에서는 <div> 요소보다 <i> 및 두 <p> 요소가 나중에 작성되었습니다 - 곧, z-index가 없는 경우, 나중에 작성된 요소가 위로 올라옵니다!

☞ 자식요소에 (static 이외의)position 값을 주어야 한다는 말의 요점은, 자식요소의 z-index 값은 자식요소의 '직계' 부모요소에게만 의미가 있다는 것이다!

➥ 문서의 일반 흐름에서와는 다른 쌓임 순서를 적용하고자 한다면; 먼저 부모요소 내부 자식요소에서 (static 및 auto 외의)position 값을 설정해주고 z-index 값도 지정해주어야 한다. 곧, z-index는 position이 설정된 요소에 대해서만 자신의 존재 의의가 있다!

스택 컨텍스트 이해하기

➥ 참고로, 스택 컨텍스트를 위해 반드시 z-index 및 position 속성을 써야만 하는 것은 아니다. (none 값 이외의)transform, filter, clip-path 등을 사용할 때도 스택 컨텍스트가 형성된다. 또한, 자식요소에서 1 이하의 opacity 값을 설정해줄 때도 (사실상의)스택 컨텍스트가 형성된다!

☞ 결과적으로, 스크롤 설정된 박스의 내용은 그 자체의 미니 레이아웃이 되는데, 이는 박스의 모든 내용을 포함하되, 또한 페이지의 다른 항목과 겹치지 않도록 하기 위한 것이다 ← 참고로, 오버플로가 효력을 가지려면; 반드시 부모 컨테이너 박스의 높이(height 또는 max-height)가 설정되어 있어야 한다!

➥ 박스 내부 컨텐츠가 부모 박스에 설정된 크기를 벗어나게 되면; 내부 컨텐츠가 부모박스 바깥으로까지 넘쳐나는 오버플로가 발생하게 되는데, 이에 대처하는 overflow 값이 visible 이외의 다른 값으로 설정되면; 블록서식 컨텍스트 가 형성되며, 이 오버플로에 대처하여 박스에 설정되는 스크롤바는 기본적으로 패딩 영역에 자리잡게 되는데.. 이는 또한 전체 박스의 크기에도 영향을 미치게 되므로 유의할 필요가 있다!

                                                
                                                    [role][aria-labelledby][tabindex] { overflow: auto; }
                                                    [role][aria-labelledby][tabindex]::focus { outline: 0.1em solid blue; }
                                                
                                            

플렉스 컨테이너 div { display: flex; }

• flex-direction: row;(기본값)는 가로 방향으로(이것이 주축이 된다!) 아이템이 배치되며, column은 세로 방향으로(이것이 주축이 된다!) 아이템이 배치된다 ← 한편, row-reverse 및 column-reverse 는 각각 역순으로 배치된다
• flex-wrap: nowrap;(기본값)은 아이템이 넘쳐나도 아래로 내려가지 않으며, wrap 은 아이템이 넘치면 밑으로 내려가서 배치된다

                                        
                                            .flex-container { /* 플렉스 컨테이너 */
                                                display: flex; /* 플렉스박스 선언 */
                                                width: 200px; height: 400px;

                                                /* flex-flow: row nowrap; ← 기본값 */
                                                flex-direction: column; /* 세로 방향으로 아이템을 배치한다 */
                                                flex-wrap: wrap; /* 아이템이 넘칠 때; 다음 줄로 내려간다 */
                                            }
                                        
                                    

                                        
                                            .flex-item { /* 기본값: 0 1 auto */
                                                flex-grow: 0; /* 공간이 남으면; (아이템 크기를)확대할 것인가? ← 기본값 No */
                                                flex-shrink: 1; /* 공간이 모자라면; (아이템 크기를)축소할 것인가? ← 기본값 Yes */
                                                flex-basis: auto; /* 플렉스 아이템의 초기 너비(및 높이) 값 ← 기본값 auto */
                                            } 
                                        
                                    

( * 플렉스 컨테이너에 항목을 표시하는 데 필요한 공간보다 더 많은 공간이 있다고 가정할 경우; 최대 컨텐츠 크기에서 항목이 처음에 정렬된 후 공간을 채우기 위해 확대되지 않는다 - 이는 flex 속성의 기본값이 initial(= flex: 0 1 auto;)인 때문이다)

                                    
                                        .flexbox_container { display: flex; gap: 1rem; }
                                        .flexbox_container div { flex: 1; }
                                        .flexbox_container div:nth-of-type(3) { flex: 2; }
                                    
                                

플렉스박스) 고정 바닥글 ⇢

                                        
                                            .flex-container { /* 플렉스 컨테이너 ← 아래 옵션 값들은 모두 기본값이다! */
                                                display: flex; /* 플렉스박스 선언 */
                                                justify-content: flex-start; /* 주축(row라면; 가로, column이라면; 세로) 방향으로의 아이템 배치 기준점 */
                                                align-content: stretch; /* (아이템이 넘칠 때)교차축 방향으로의 아이템 배치 기준점 */
                                                align-items: stretch; /* 교차축 방향으로의 아이템 배치 수직 기준선 */
                                            } .flex-container .item1 { /* 플렉스 컨테이너 내 개별 아이템 .item1 */
                                                align-self: stretch; /* 개별 아이템 대상 교차축 방향으로의 아이템 배치 수직 기준선 */
                                            } 
                                        
                                    

☞ 참고로, flex-direction: column;인 경우라면; justify-content가 해당 열에서 상하 방향으로 작동한다!

➥ justify-content와 align-content 값을 한번에 설정해줄 수도 있는데, place-content: 교차축값 주축값; 속성을 사용하면 된다: .flex-container { place-content: center flex-end; } ← 값을 하나만 주면; 같은 값으로 교차축과 주축 모두에 적용된다

➥ 플렉스박스에서의 수직/수평 센터링:

                                    
                                        .container_boxing1 {
                                            display: flex; gap: 1rem;
                                        } .container_boxing1 :nth-child(1) { margin-inline-end: auto; }
                                    
                                

☞ .container_boxing1 :nth-child(2) { margin-inline-end: auto; }로 바꿔주면; [아이템 2] 이후부터 뒤로 밀려나게 된다!

                                    
                                        .container_boxing2 {
                                            display: flex; gap: 1rem;
                                        } .container_boxing2 :nth-child(3) { margin-inline-start: auto; }
                                    
                                

☞ .container_boxing2 :nth-child(2) { margin-inline-start: auto; }로 바꿔주면; [아이템 2] 이전부터 앞으로 밀려나게 된다!

➥ 그리드 레이아웃에서의 justify-self 및 justify-items 속성은 인라인 축에서 작동하여 그리드 영역 내의 해당 축에 항목을 정렬하는 작업을 수행한다. 반면, 플렉스박스의 아이템은 주축에서 하나의 그룹으로 작동하고, 따라서 해당 그룹에서 개별 항목을 따로 분리한다는 개념이 없다. 그리하여 플렉스박스에서는 자동 마진을 써서 이 단점을 메꾸는 것이다!

☞ Grid Cell은 Table의 셀로, 행/열 Grid Track은 각각 Table의 행/열로 생각하면 된다. 한편, Grid Area는 여러 행, 또는 여러 열을 포괄하는 영역이 된다. Grid Line에서 맨 앞쪽 세로선(1)부터 맨 끝 세로선(4)까지의 영역은 각각의 행 트랙이 되며, 맨 위 가로선(1)부터 맨 아래 가로선(3)까지의 영역은 각각의 열 트랙이 된다

➥ Grid Gap은 행/열 트랙들 사이의 간격 으로서, 일반 트랙처럼 작동하여 크기 조정에 활용된다 - 컨텐츠를 배치할 수는 없지만, 그리드 항목이 갭에 걸쳐지게 할 수는 있다!

                                    
                                        gap: 값; /* 행과 열 트랙간 간격 ← 단위는 px 및 % */
                                        row-gap: 행 트랙간 간격; column-gap: 열 트랙간 간격;
                                    
                                

                                    
                                        .grid-container {
                                            display: grid; /* 그리드 선언 */
                                            grid-template-columns: 2fr 1fr 1fr 100px;
                                            gap: 12px; /* 행과 열 모두에 갭 설정 */
                                        }
                                    
                                

☞ 첫 4개의 컬럼이 하나의 행 트랙에 배치되고(고정 단위로 주어진 100px이 먼저 결정되고, 남은 공간으로 2:1:1 비율로 나눈다), 나머지 컬럼들은 자동으로 다음 줄로 내려간다!

                                                    
                                                        :root { --var-keycol: auto; }
                                                        
                                                        .gridkeyword-container {
                                                            display: grid;
                                                            grid-template-columns: repeat(3, var(--var-keycol));
                                                            grid-template-rows: 150px auto;
                                                            gap: 10px;
                                                        }
                                                    
                                                

                                                    
                                                        const key_switcher= document.querySelector(".gridkeyword-switcher")
                                                        const key_root= document.documentElement
                                                        
                                                        key_switcher.addEventListener("change", function (e) {
                                                            key_root.style.setProperty("--var-keycol", e.target.value)
                                                        });
                                                    
                                                

                                    
                                        .container { /* 같은 크기의 12컬럼 그리드 트랙 */
                                            display: grid;
                                            grid-template-columns: minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr);
                                        }
                                    
                                

그리드 트랙: repeat() 함수

➥ 아래처럼, repeat()와 minmax() 함수를 함께 결합하여 쓸 수도 있는데, 이는 트랙 리스트의 반복되는 패턴을 나타내는 다수의 열 및 행을 보다 간결한 형식으로 작성할 수 있도록 해준다:

                                    
                                        .container_12 { /* 같은 크기의 12컬럼 그리드 트랙 */
                                            display: grid;
                                            grid-template-columns: repeat(12, minmax(0, 1fr)); /* minmax(0, 1fr)을 12번 반복 */
                                        }

                                        .container_6 { /* 6컬럼 그리드 트랙 */
                                            display: grid;
                                            grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /* 200px [1fr 2fr] [1fr 2fr] 200px */
                                        }
                                    
                                

기본 Grid 프레임워크 ⇢

• grid-column: 시작번호/끝번호; 그리드 열의 시작번호/끝번호 ← 끝번호 생략시는; auto
• grid-row: 시작번호/끝번호; 그리드 행의 시작번호/끝번호 ← 끝번호 생략시는; auto
• grid-column/row-start: 시작번호; 시작번호 지정
• grid-column/row-end: 끝번호; 끝번호 지정

라인기반 그리드 배치 예)

➥ grid-template-areas 속성은 이름붙은 그리드 영역을 지정하여 그리드에 셀을 할당한다. 그리드로 이뤄진 전체 셀을 채워야 하며, 여러 셀을 합칠 때는; 해당 이름을 반복하여 적어주면 된다:

이름지정 그리드 배치 예)

• justify-content 및 align-content는 트랙 주변이나 트랙 사이의 그리드 컨테이너에 추가 공간을 분배한다
• justify-self 및 align-self는 그리드 아이템에 적용되어 해당 항목이 배치된 그리드 영역 내에서 이동한다
• justify-items 및 align-items는 항목의 모든 justify-self 속성을 설정하기 위해 그리드 컨테이너에 적용된다

Grid 아이템 정렬 예)

➥ 그리드 수직/수평 센터링: place-items: center;

그리드) 고정 바닥글 ⇢

                                        
                                            .card {
                                                display: grid; /* 그리드 컨테이너 선언 */
                                                grid-template-rows: max-content 200px 1fr; /* 3행: header, img, div(및 footer) */
                                            }
                                        
                                    

                                        
                                            .cards {
                                                display: grid;
                                                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                                                gap: 20px; /* 카드간 간격 */
                                            }
                                        
                                    

그리드 카드 작성 예)

✓   플렉스박스를 사용하여 각 카드를 배치할 수도 있는데, 이 경우 각 카드 행의 크기가 카드 컨테이너가 아닌 각 행의 flex 속성으로 설정된다. 또한, flex 항목의 크기가 부모 컨테이너가 아닌 자식요소에서 정의된다 ← 어느 것을 사용할 지 여부는 그리드 카드에서와 같이 컨테이너에서 트랙을 다루는 것을 선호하는지, 아니면; 각 카드들에 부가적인 설정을 더하여 다룰 필요성이 있는지에 달려있을 뿐이다!

                                                    
                                                        .list-group_badges {
                                                            list-style: none;
                                                            border: 1px solid #ccc; border-radius: 0.5em;
                                                            width: 20em; margin: 0; padding: 0;
                                                        }

                                                        .list-group_badges li {
                                                            border-top: 1px solid #ccc; padding: 0.8em;
                                                            display: flex; justify-content: space-between; /* 리스트 내용과 뱃지를 양쪽 끝으로 붙인다 */
                                                            align-items: center; /* 내용물을 교차축 방향 중앙에 배치한다 */
                                                        } .list-group_badges li:first-child { border-top: 0; }

                                                        .list-group_badges .badge {
                                                            background-color: rebeccapurple; border-radius: 10em;
                                                            font-weight: bold; font-size: 80%; color: #fff;
                                                            min-width: 1.5em; padding: 0.25em; text-align: center;
                                                        }
                                                    
                                                

➥ 참고로, 부트스트랩의 <button> 및 유틸리티 클래스를 이용하면; 버튼 내 뱃지의 위치를 쉽게 변경해줄 수 있다(본 부트스트랩 강좌의 뱃지 달아주기 부분 참조 요)

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

그리드 래퍼 패턴)

미디어 객체의 일반 패턴)

스패닝 컬럼 예)

➥ Css 조각화 ^fragment는 컨텐츠가 여러 페이지, 영역 또는 열에서 끊어졌을 때 표시되는 방식을 정의한다. 이러한 단편화는 인라인 상자가 여러 줄로 줄 바꿈될 때, 또는 블록레벨 박스가 열 레이아웃 컨테이너 내에서 둘 이상의 열에 걸쳐 있거나 인쇄할 때 페이지 나누기에 걸쳐 있는 경우에도 발생한다!