Css 3) Study 2

Css 포지셔닝

░ 대부분의 경우, 어떤 요소의 컨테이닝 블록은 가장 가까운 블록레벨 부모요소의 컨텐츠 영역이 되지만, 반드시 그런 것만은 아니다. 예컨대, Css 포지셔닝을 사용하면 요소가 문서의 일반 흐름에서 동작하는 방식과 다른 관계를 설정할 수 있게 된다 - 곧, 특정 요소에 position 속성을 써서 문서의 일반 흐름에서 벗어난 다른 위치로 이동시킬 수 있는 것이다!

포지셔닝: 기본적으로 박스는 문서의 일반 흐름 순서대로 배치되는데(기본값인 static), 박스간 마진병합 현상이 일어난다 ← 여기서는 좌표값은 사용할 수 없고, 플로팅에 의한 좌우 배치만 가능하다!; 1. position: relative;는 문서의 일반 흐름대로 배치하되, 좌표값을 써서 일반 흐름상의 원래 위치로부터 (요소 자신을)상대적으로 (양수는 오른쪽 및 아래쪽 방향으로, 음수는 그 반대 방향으로)이동시키고, 다른 요소와 겹치도록 만들 수 있다; 2-1. position: absolute;는 요소를 문서의 기본 흐름에서 벗어나 (가장 가까운 컨테이닝 블록의 좌상단을 기준으로 하는)좌표값을 써서 배치한다 ← 이때, 특정 상위 부모요소에서 position: relative;로 설정해주면(곧, 컨테이닝 블록으로 지정해주면); 그 부모요소를 기준으로 하는 절대 위치에 자리잡게 되는 것이다!; 2-2. absolute는 부모 요소의 영역에 겹쳐서 배치되므로, 위쪽에 배치된 요소가 아래쪽 문단(위 문단이 빠진 자리로 올라가서 자리잡게 된다!)과 겹쳐지는 것을 막으려면; 위쪽 요소(예컨대 위 코드의 <h5>)에서 그에 맞게 적절한 패딩을 주어야 한다!; 3. position: fixed;는 화면 스크롤과 무관하게 뷰포트의 현재 위치에 고정한다 - 문서의 흐름과 무관하게 좌표값을 써서 원하는 위치에 배치하는데, 그 기준은 body가 된다

컨테이닝 블록

░ 요소의 크기와 위치는 의 영향을 받는 경우가 많다 - 예컨대, %를 사용한 width 및 height, padding과 margin 값, absolute 및 fixed 로 설정된 요소에서의 오프셋 값들은 자신의 컨테이닝 블록을 기준으로 하여 계산되는데, 이 컨테이닝 블록은 position 속성의 값에 따라 극명하게 달라지게 된다!

박스 좌표 설정하기: 박스 좌표는 자신을 품은 부모요소(곧, 컨테이닝 블록)의 좌상단 모서리를 기준점으로 삼아 top/right/bottom/left: 값; 속성으로 설정하는데, 부모요소 박스의 원점(= 좌상단 모서리)을 기준으로 상/우/하/좌로부터의 (양수는 박스 안쪽으로, 음수는 박스 바깥쪽으로의)오프셋 거리값 을 의미한다

컨테이닝 블록: 기본적으로(position이 static/relative/sticky 인 경우) 컨테이닝 블록은 가장 가까운 부모요소(inline-block, block, list-item 요소), 또는 가장 가까우면서 서식 맥락을 형성하는 조상요소(table, flex, grid, 혹은 블록 컨테이너 자기 자신)의 컨텐츠 영역 경계를 따라 형성된다:; position이 absolute인 경우; 컨테이닝 블록은 position 속성 값이 static이 아닌 가장 가까운 (fixed, absolute, relative, sticky로 설정된)부모요소의 내부 여백 영역이 되며(), position이 fixed인 경우; 컨테이닝 블록은 뷰포트나 웹페이지 영역이 된다()

스티키 고정: 요소에 position: sticky; 값을 주면; 해당 요소는 설정된 (뷰포트 기준)오프셋에 도달할 때까지는 일반 흐름으로 스크롤되다가, 설정된 오프셋 지점에 이르면 position: fixed; 값을 준 것처럼 그 위치에 고정된다 - 곧, 뷰포트가 해당 요소를 지나쳐가며 스크롤할 때에도 요소 자체는 설정된 오프셋 값에 맞춰 자기 자리를 고수하는 것이다!

Css 3) z-Index

░ Css에서 는 브라우저의 3차원 공간인 z축(x축: 가로, y축: 세로)을 기반으로 요소의 레이어 겹침 순서(곧, 어느 요소가 사용자의 눈에서 더 가까이 있는가)를 정하는데, 포지셔닝 기본값인 static 을 제외한 relative, absolute, fixed 에서 번호순으로 요소를 위로 겹쳐서 배치하게 된다

일반 문서에서의 쌓임맥락: 같은 부모요소 영역 내에서, 포지션이 지정되지 않은 요소는 포지션이 지정된 요소 이전에 우선적으로 렌더링된다; 한편, 포지션이 지정된 요소들끼리는; 일반 요소들과 마찬가지로, (주어진 포지션 값들과 무관하게)문서의 흐름상 순서대로 (아래, DIV #1 -> DIV #2 -> DIV #3 -> DIV #4)쌓이게 된다

요소의 겹침 순서: z-index 값이 지정되지 않은 경우(즉, 기본값인 0); 문서에 나오는 소스코드 순서대로 1, 2, 3, .. 순이 된다 - 곧, 나중에 작성된 요소가 먼저 작성된 요소를 덮는다; 반면, z-index 값을 음수로 주면; 일반 정적(Static) 요소의 밑으로 들어가게 된다; 1. 일반 흐름에서 z-index에 특정 값을 설정했는데 작동하지 않는다면; 요소의 position 값을 기본값인 static 이외의 값으로 설정해주어야 한다 ← 이는 가장 흔히 일어나는 z-index 관련 혼동이다!; 2. 플렉스박스나 그리드에서는 굳이 position: relative;를 추가해주지 않아도 플렉스나 그리드 항목의 z-index 값을 변경할 수 있다; 3. 부모요소에 position 설정(과 함께 z-index 값)을 설정해주면; 새로운 스택 컨텍스트가 생성되며, 이 안에서는 자식요소의 z-index 값을 -999 까지 설정해주더라도 여전히 부모요소보다 밑에 놓일 수는 없다 - 곧, 이 자식요소는 새로운 스택 컨텍스트의 일부이기에 결코 부모요소로부터 벗어날 수 없다!

스택 컨텍스트

░ 스택 컨텍스트란 하나 이상의 자식요소를 포함하는 상위요소를 말하는데, 내부 자식요소들은 소스 순서 규칙에 따라 쌓이고, z-index 값은 이 부모요소 내에서만 자신의 존재 의의가 있다!

쌓임 맥락 계층구조: 하나의 쌓임 맥락은 그 내부에 또 다른 쌓임 맥락을 포함할 수도 있고, 이는 전체 계층구조상의 쌓임 맥락에서는 통째로 하나의 묶음 단위로 움직이게 된다. 곧, 각각의 쌓임 맥락은 서로 독립적이어서, 어느 요소가 자기 영역 내에 자신의 컨텐츠를 쌓은 후에, 자신은 또 통째로 그 위 부모 컨테이너 영역의 쌓임 맥락 안에서 하나로 묶인 단일 단위로 작동하는 것이다 ← 나아가, html 문서 내 모든 요소가 쌓임 맥락을 생성하는 건 아니므로, 쌓임 맥락의 계층구조는 html 문서 계층구조의 부분 집합이 된다!; 1. 먼저, 맨 밑에 [부모요소] 컨테이너(<div class="container>)의 배경과 테두리가 깔리고, 내부 각 DIV 요소들은(모두 position 속성이 정의되어 있기에) 각각의 쌓임 맥락 속에서 문서의 일반 흐름 순으로(코드가 작성된 순서대로) 위로 겹쳐가며 표시된다; 2-1. [div #1-2]에 z-index: 2; 값을 주었다: 이제, [div #1-2]가 맨 위로 올라온다!; 2-2. [div #2-2]에 z-index: 3; 값을 주었다: 다시, [div #2-2]가 맨 위로 올라온다!; 3. [DIV #2]에 z-index: 1; 값을 주었다: 다시, [div #1-2]가 맨 위로 올라온다!

Css 오버플로

░ 박스는 display 속성값, 설정된 박스 크기 및 박스 안 컨텐츠에 따라 다르게 동작한다. 이러한 컨텐츠는 자식요소에 의해 만들어진 더 많은 수의 박스일 수도, 또는 일반 텍스트 컨텐츠일 수도 있지만, 어느 쪽이건 간에, 이러한 컨텐츠는 기본적으로 박스의 크기에 영향을 미치게 된다!

박스 넘침처리: overflow: 박스의 크기보다 컨텐츠의 내용이 너무 많을 때, 박스 바깥으로까지 컨텐츠가 넘쳐나는 가 발생하는데, 이는 컨텐츠 손실 방지를 위한 Css의 기본 메카니즘이 작동하여 모든 내용을 표시하고자 하는 때문이다! 컨테이너 박스 영역을 (블록레벨인)자식요소가 넘어서게 될 때 화면에 어떻게 나타낼 것인가? html은 기본적으로 자기 영역을 넘어서라도 넘치는 컨텐츠를 표시해준다(기본값인 visible)

오버플로우와 가변 박스

예컨대, 빈 <div> 요소는 (블록레벨 요소이기에)전체 너비를 차지하지만, 높이는 제로이다 - 여기에 텍스트 등 컨텐츠가 들어가야 비로소 그 크기가 결정되는 것이다. 반면, 블록레벨 요소에 너비 및 높이 를 설정해주면; (그 안에 어떤 내용이 들어가든 간에)박스 크기가 고정되는데, 이때 내부 컨텐츠가 박스 크기보다 더 커진다면; 박스 넘침^overflow 현상이 발생하게 된다!

1. 박스는 display 속성, 지정된 크기 및 내부 컨텐츠의 양에 따라 다르게 동작하여 레이아웃에 영향을 미치게 된다. 이에, 외부 크기 조정을 사용하여 이를 제어하거나 내부 크기 조정을 사용하여 컨텐츠 크기를 기반으로 브라우저가 결정하도록 할 수도 있다. 우선, 박스가 외부 크기 조정을 사용할 때, 박스 범위에서 추가할 수 있는 컨텐츠의 양에는 제한이 있음에 유의해야 한다. 이는 아래 "Box is overflow!"이라는 문장을 넘치게 만든다:

width: min-content;

Box is overflow!

                                    
                                        .box { /* box의 외부적 크기 설정: */
                                            width: 300px; // 이것이 내부 자식요소 컨텐츠의 크기를 제한한다 ← 넘치면; 오버플로우가 발생한다!
                                            padding: 1rem 2rem; border: 10px dotted cornflowerblue; font-size: 5rem;
                                        }

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

2. 아래 예제에서는 외부적으로 width와 height 값이 모두 지정되어 있고(width: 430px; height: 170px;), 이는 박스 내부의 모든 것에 엄격한 경계를 부여하여, 내부 이미지(400 x 116)가 박스보다 커져서 가시적으로 오버플로우하는 상황이 발생하지 않는 한 그대로 적용된다. 하지만, 내부 문장이 박스 크기를 초과하게 된다면?

☞ 이 문장이 박스를 넘쳐 오버플로우가 발생하는 경우, 체크해주세요: [width: max-content; height: max-content;]

                                    
                                        .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;
                                        }

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

3. 박스의 크기를 고정할 때, 안의 컨텐츠에 의해 오버플로우가 일어나는 문제를 피하려면; min|max-width/height: 값; 속성으로 컨텐츠 영역의 최소|최대 크기를 추가적으로 설정하여 컨텐츠의 양에 따라 신축적으로 박스의 너비/높이가 늘어나고 줄어들도록 해줄 수 있다. 이는 또한 화면의 크기 변화에 따라 이미지가 잘리거나 퍼지는 문제를 제거하고자할 때에도 이용된다!

가변 이미지: 이미지 등의 멀티미디어 요소들은 너비와 높이 값을 지정하지 않은 경우; 기본적으로 원본 크기대로 삽입된다. 예컨대, <img> 요소는 그 이미지 파일 고유의 너비와 높이를 갖고 있고, (따로 크기를 정해주지 않은 한)그 크기대로 웹문서에 나타난다. 따라서, 브라우저 창의 크기가 변할 때도 이미지의 너비는 바뀌지 않으므로 브라우저 크기를 줄이면 이미지의 일부가 잘리고, 늘리면 화질이 저하되는 문제가 생겨난다!

width: 100%;로 주면; 화면 너비에 맞추어 늘어나거나 줄어들지만, 원래 크기 이상으로 늘어나면 이 또한 화질이 저하된다 - 이에 이미지를 감싸고 있는 부모 요소만큼만 커지거나 작아지도록 max-width: 100%;로 지정해주는 것이 바로 가변 이미지다!

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

☞ 가변 이미지는 height에 auto 값을 주어 너비에 따라 높이가 자동 조절되도록 해주는 것이 좋다. 나아가, min-width 속성으로 축소되는 너비 값을 제한해줄 수도 있다!

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

플렉스 박스

░ 로 작동시키기 위해서는; 먼저, 해당 요소들을 플렉스 컨테이너로 묶어준 뒤 display: flex; 속성값을 주어 플렉스박스임을 선언해주어야한다

플렉스박스 선언 및 정의: 플렉스 박스로 작동시키기 위해서는; 먼저, 해당 요소들을 플렉스 컨테이너로 묶어준 뒤 display: flex;(또는, display: inline-flex;)로 플렉스박스임을 선언해주어야한다(이하, 가로쓰기 모드 기준임); 이어서, 플렉스박스 내부 각 아이템들을 배치할 방향 및 넘칠 시의 대처 방식을 지정해준다: flex-flow: flex-direction flex-wrap; ← flex-flow는 flex-direction: 값;과 flex-wrap: 값으로 나누어 각각 따로 설정해줄 수도 있다

아이템 공간배분: flex: flex-grow flex-shrink flex-basis; 속성은 플렉스 아이템간 공간 배분을 지정하는데, 각 옵션별로 따로 설정해줄 수도 있다; 1. 단위 없는 비례값인 flex: 1;(= flex-grow 옵션과 같다!)로 주면; 플렉스 컨테이너의 사용 가능한 공간은 3개가 되고, 각 아이템별로 1:1:1 의 비율로 분배된다 ← flex:의 두번째, 세번째 옵션은 기본값으로 설정된다!; 2. 위 플렉스박스 컨테이너 안 모든 아이템에 flex: 1;로 주고(일단은; 모든 아이템이 1씩 같은 크기로 설정된다), 그 아이템 중 하나에 flex: 2;와 같이 설정해줄 수도 있다 ← 이제 각 아이템의 사용 가능한 공간은 먼저 각각 1씩 똑같이 나누어진 뒤, 2 값으로 추가 설정해준 하나의 아이템은 2배로 늘어나서 총 4개의 공간이 1/1/2 비율로 배분된다; 3. flex 값 내에서 최소 크기 값을 지정해줄 수도 있다. 아래 예제에서는 모든 아이템들이 같은 1 씩 갖지만, 세번째 아이템에는 최소 400px 크기로 지정해주었다. 이제, (세번째 아이템이 먼저 최소 400px 만큼 차지한 다음)나머지 아이템들은 남는 공간만으로 똑같이 나누어 차지하게 된다

아이템 정렬

░ 플렉스박스는 아이템을 정렬하고 아이템 사이의 공간 배분을 위해 관련 속성들을 마련해 두었는데, 주축 방향을 대상으로 하는 경우는 justify-로 시작하고, 교차축 방향을 대상으로 하는 경우에는 align-으로 시작한다

플렉스박스 아이템 정렬: 플렉스박스에서는 주축 방향으로의 공간 배분 및 교차축 방향으로의 아이템 정렬 속성들을 설정해줄 수 있다. 공간을 분배하는 데에는 justify-content(주축 방향으로의 공간 배분) 속성과 align-content(주축 공간이 넘쳐서 교차축 방향으로 내려갈 때의 공간 배분) 속성을 쓸 수 있고, 교차축 방향으로의 아이템 정렬에는 align-items(모든 아이템 대상)와 align-self(특정 아이템 대상) 속성을 쓸 수 있다; 1. 주축 방향으로(flex-direction: row;) 아이템을 배치할 때는 justify-content 속성을 사용한다(기본값은 flex-start); 2. 플렉스 라인 내에서 교차축 방향으로 아이템을 배치할 때는 align-items 속성(아이템 배치의 수직 기준선)을 사용한다: align-items: stretch/flex-start/center/flex-end/baseline; ← 기본값인 stretch는 모든 아이템의 너비 및 높이를 (안의 내용물 양과 무관하게)동일하게 배분한다!; 3. 한편, 특정 아이템만을 대상으로 할 때는 align-self 속성(개별 아이템 배치의 수직 기준선)을 사용해주면 된다 ← 기본값인 stretch 는 해당 아이템의 높이 및 너비를 (안의 내용물 양과 무관하게)최대 크기로 확장한다!

플렉스박스 자동마진: 플렉스박스 그룹에서 한 항목을 분리하거나 그룹을 두 그룹으로 분리해야 하는 경우; 플렉스박스 자동 마진을 적용하여 이를 수행할 수 있다. 플렉스 아이템의 어느 한쪽 방향에 자동마진(auto 값)을 설정하면; 해당 아이템은 적용된 방향의 남은 공간 모두를 차지하면서 나머지 그룹을 밀어내어 그룹을 분할하게 된다

그리드 레이아웃

░ 는 2차원 컨텐츠용으로 설계된 레이아웃 방식으로서, 행과 열에 동시에 내용을 배치한다. 이 그리드 레이아웃은 웹페이지를 주요 영역들로 나누거나 html 기본 요소로 구축된 컨트롤 부분 간의 크기, 위치 및 레이어 등의 관계를 정의하는 데 매우 탁월하다!

그리드 선언 및 정의: 그리드는 웹페이지 디자인 요소들을 수평/수직으로 정렬하는 2차원 레이아웃으로서, 그리드 레이아웃을 구축할 때는 먼저 행과 열이 있는 그리드 컨테이너를 정의한 뒤, 해당 그리드 컨테이너 아래에 각각의 항목(= 아이템)들을 배치해주면 된다. 하나의 그리드는 Columns(= 열)과 Rows(= 행)으로 구성되며, 각 행과 행, 열과 열 사이에는 Gap (= 간격)이 존재한다; 1. 웹페이지를 그리드로 작동시키기 위해서는; 먼저 그리드 컨테이너에서 display: grid; 선언 이후 그리드 행(및 열), 갭 등을 작성해준다. 아래, 코드는 3개의 열 트랙과 2개의 행 트랙을 생성한다; 2. 그리드 컨테이너는 display: grid;가 적용된 html 요소로, 직속 하위요소들에 대한 그리드 맥락을 만들며, 그리드 아이템은 그리드 컨테이너 아래 직계 하위요소들(항목들)이다

그리드 라인: 각각의 세로선(열 라인)은 앞쪽에서부터 1 ~ 4(= 열 라인번호), 가로선(행 라인)은 위쪽에서부터 1 ~ 3(= 행 라인번호)까지 라인번호가 붙는다

그리드 컬럼 레이아웃: fr 단위: 그리드의 fr 단위는 플렉스박스에서의 auto 값과 유사하게, 먼저 항목이 배치된 이후에 공간이 분배된다. 또한, fr 단위는 사용가능한 공간을 공유하므로 고정 크기 단위와 함께 쓸 수도 있다

그리드 컬럼

░ 그리드 컬럼은 grid-template-columns 속성을 써서 px 등의 절대 크기 단위 외에도 Grid fr 단위, Css 키워드, Grid 함수 등을 결합하여 다양한 방식으로 작성해줄 수 있다

그리드 트랙: 그리드 트랙은 Css의 min/max/fit-content 키워드나 fit-content(최대크기); 함수를 사용하여 그 크기를 조정해줄 수도 있다

그리드 트랙: Css의 minmax(최소크기, 최대크기); 함수를 쓰면 트랙이 그리드 컨테이너에서 갭을 뺀 나머지 공간을 동일하게 공유하도록 할 수 있다

그리드 트랙: 1. Css의 repeat(반복횟수, 트랙세트); 함수와 auto-fill 및 auto-fit 키워드를 결합할 수도 있다: 아래 코드는 최소 200px, 최대 1fr 크기에 맞는 만큼의 트랙을 생성하는데, 그리드가 200px 트랙을 배치하고 남은 공간은 모두 균등하게 분배된다; 2. auto-fill 과 auto-fit 사이에는 미묘한 차이점이 존재한다. 곧, auto-fill 에서는 비워진 공간이 있는 반면, auto-fit 에서는 빈 공간 없이 꽉 채워진다 - 이는 남은 공간을 모두 차지하도록 트랙이 커짐을 의미한다

가변 그리드

░ 그리드에서 항목이 넘쳐나게 되면(예컨대, 다음 줄로 내려갈 때); 자동적으로 추가 그리드 선이 그려지면서 그리드가 확장되는데(= 암시적 그리드), 이렇게 자동 그리드로 생성되는 트랙은 기본값으로 auto 크기이며, 이는 일반적으로 컨텐츠를 담기에 충분히 크다는 것을 의미한다!

가변 그리드: 암시적 으로 생성되는 그리드 트랙은 기본적으로 크기가 자동 조정되지만, grid-auto-rows 및 grid-auto-columns 속성을 사용하여 '명시적'으로 그 크기를 조정해줄 수도 있다; 1. 위와 같이 행 높이를 고정된 값으로 주는 경우; 내부 컨텐츠가 늘어나는 경우 오버플로우가 발생할 수 있는데, 이를 방지하기 위하여 Css의 minmax(); 함수를 써서 grid-auto-rows: minmax(50px, auto);와 같은 식으로 트랙의 최소 크기, 최대 크기 를 설정해줄 수 있다; 2. Css의 repeat(); 함수를 써서 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 식으로 그리드 컨테이너에 들어갈 수 있는 만큼의 컬럼을 만들도록 요청할 수도 있다

그리드 배치/정렬

░ 그리드의 시작 라인과 끝 라인을 번호로 지정하여 이 라인을 따라 그리드 아이템을 배치해줄 수 있다. 나아가, 그리드 영역에 이름을 지정하여 해당 그리드에 셀을 할당해줄 수도 있다!

그리드 아이템 배치: 라인 기반 그리드 배치는 그리드 아이템의 라인, 범위 또는 자동설정(auto) 값을 제공하여 그리드 영역의 인라인 시작 및 끝 가장자리를 지정함으로써 그리드 컨테이너 내에서 그리드 항목의 크기와 위치를 지정한다:

그리드 아이템 정렬: 플렉스박스에서와 같이, 그리드에서도 justify-로 시작하는 속성은 인라인 축(곧, 문단이 진행되는 방향)으로 사용되며, align-으로 시작하는 속성은 블록 축(곧, 블록이 진행되는 방향)으로 사용된다:

그리드 레이아웃

░ 은 자신의 웹사이트에서 구현할 필요가 있는 일반적인 레이아웃 패턴에 대한 레시피를 모으는 것을 목표로 한다!

그리드 카드: 는 일반적으로 그룹 또는 컬렉션 내에 표시되며, 각 카드에는 제목, 이미지, 컨텐츠(및 바닥글)이 포함된다. 카드는 1차원 레이아웃임에도 Css 그리드 레이아웃을 사용하여 배치하는데, 그럼으로써 그리드 트랙에 대한 컨텐츠 크기 조정을 사용할 수 있게 된다!; 1. 단일 열 그리드 카드는 grid-template-rows 속성으로 다음과 같이 설정해줄 수 있다. 아래 Css 코드는 카드 제목행은 최대 크기(max-content)로 주어 늘어나는 것을 방지하고, 이미지 트랙은 (이미지의 높이인)200px 높이로 고정하며, 컨텐츠가 있는 맨 아래 행은 1fr로 주어 나머지 공간을 채우고 있다; 2. 다음은 그리드컬럼 카드 을 생성하는데, grid-template-columns 속성으로 그리드 컬럼들의 너비를 정의하고 gap 속성으로 카드간 간격을 준다

그리드 래퍼: 그리드 래퍼 패턴은 중앙 래퍼 내에서 그리드 내용을 정렬하는 동시에 항목이 분리되어 포함하는 요소 또는 페이지의 가장자리에 정렬되도록 하는 데 유용하다. 그리드에 배치된 항목은 가로 가운데의 max-width 래퍼 및 그리드의 바깥쪽 가장자리, 또는 둘 다에 정렬할 수 있어야 한다.

미디어 객체: 웹에서 흔히 볼 수 있는 형태인 (예컨대, 소셜 미디어 게시물 등)는 보통 이미지와 설명 텍스트로 나뉘어 모바일에서는 상/하 스택으로 쌓이고, 데스크탑에서는 좌/우 열로 나뉘어 배치되는데, 이 또한 그리드 레이아웃을 사용하여 배치한다

다단컬럼 레이아웃

░ 플렉스박스, 그리드, 다단컬럼 등은 기본적으로 반응형 레이아웃이며, 미디어쿼리나 뷰포트 메타태그 등은 반응형 레이아웃을 위한 것이다!

다단컬럼 레이아웃: Css 을 사용하기 위해서는; 먼저 다단 컨테이너 래퍼를 만들고, column-count: 개수;로 가변 너비의 개수 만큼의 컬럼을 생성하거나, column-width: 너비;로 고정된 너비 (가능한 개수만큼)의 컬럼(남는 공간은 각 컬럼별로 공평하게 배분된다!)을 생성해 준다. 추가적으로, column-gap 속성으로 컬럼간 간격을 설정해줄 수 있고, column-rule 속성으로 컬럼간 구분선을 그어줄 수 있다:

스패닝 컬럼: 컨텐츠를 다단 컬럼으로 만들면 컨텐츠가 나뉘어져 다음 컬럼으로 분할되는데, 규격에 있는 break-inside: avoid; 속성을 주어 다단 컬럼 컨텐츠가 깨지는 것을 막을 수 있다:

그리드 다단컬럼: 컬럼 항목들이 행과 열로 정렬되는 2차원 다단컬럼은 Grid 레이아웃으로 간단히 작성할 수 있다. 그리드 컨테이너에 설정되는 grid-template-columns 및 grid-template-rows 속성은 컬럼이 행과 열을 따라 분산되는 방식을 정의한다

플렉스박스 다단컬럼: 플렉스박스에서는; 단지 플렉스 컨테이너의 자식요소들에 flex: 1; 값을 주는 것만으로 플렉스 컨테이너 내부 자식요소들을 한 라인상에 위치하는, 또한 사용가능한 모든 공간이 균등하게 분배되는 플렉스 항목들로 분할된다

의사클래스 선택자

░ html 요소는 상호작용하거나 자식요소 중 하나가 특정 상태에 있을 수 있기에 다양한 상태로 존재하게 된다. 는 (해당 유형의 첫 번째 요소이거나 마우스 포인터로 가리키고 있는 등)특정 상태에 있는 요소를 의미하는데, 이 의사 클래스는 마치 해당 상태에 대한 스타일을 동적으로 DOM에 추가한 것처럼 동작한다!

요소 위치 의사클래스: 의사클래스 선택자 :는 html DOM에 클래스를 추가한 것처럼, 특정 상태(주로, 요소의 위치)에 있는 문서의 일부를 대상으로 하여 동작한다: div p:first-child { color: green; } ← 부모요소 <div> 아래(= 내부)에 있는 <p> 요소 중 첫번째 <p>

사용자 반응 의사클래스: 1. 일부 의사 클래스는 사용자가 요소와 상호작용할 때만 적용되는데, 대표적으로 요소에 마우스가 올라간 상태를 가리키는 요소:hover(예: 마우스 롤오버 효과를 만들 때)가 있다: 여기 마우스를 올려보세요..; 2. 요소:active는 요소와 활발하게 상호작용 중인 때를 가리키는데, 예컨대 마우스를 클릭한 채 아직 놓지않은 상태를 가리킨다:; 3. 요소:focus는 요소에 포커스가 주어진 상태(예: 입력 필드에 커서를 놓거나 TAB 키를 눌러 포커스를 이동했을 때, 테이블의 특정 셀에 커서를 놓거나 특정 요소에 마우스를 올렸을 때 등..)를 가리킨다. 예컨대, <button>과 같이 포커스를 받을 수 있는 요소의 경우; :focus 의사클래스를 써서 해당 상태에 반응할 수 있다. 나아가, 해당 요소의 자식요소가 :focus-within으로 포커스를 받으면 이에 반응할 수도 있다

➥ 입력폼 관련 의사클래스 선택자

입력폼에 관련된 의사클래스 선택자 몇가지 간략히 정리합니다. 좀 어려우니 이런게 있다 하면서 살짝씩 살펴보시고, 나중에 필요해지면; 더 깊이있게 공부하십시오..

입력폼 필드에서 해당 요소의 사용 가능/불가 상태(예컨대, <textarea> 필드를 게시판 입력 화면으로 사용할 때는 enabled, 단순히 회원 약관 등을 보여줄 때는 disabled)를 가리킨다:

                                                    
                                                        #imsi_form fieldset { margin-bottom:30px; width: 400px; }
                                                        #imsi_form input:disabled { background:#ddd; border:1px #ccc solid; }

체크박스나 라디오버튼에서 해당 요소의 현재 상태를 가리키는데, 요소:checked는 해당 요소가 선택된 때를 가리킨다: input[type="radio"] :checked{ .. }

* cf) :checked는 오직 true 또는 false 상태이지만, 체크박스는 체크되거나 체크되지 않은 채로 있는 중간 상태(:indeterminate 상태)도 가질 수 있다: 예컨대, 체크박스 그룹 내 모든 확인란을 선택하는 [모두 선택] 컨트롤이 있는 경우이다 - 곧, 사용자가 [모두 선택]에 체크한 이후 개별 확인란 중 하나를 [선택 취소]하는 경우; 이제 [모두 선택] 확인란은 다시 결정되지 않은 상태로 전환되어야 하는 것이다!

현재 플레이스홀더 텍스트를 표시중인 <input> 또는 <textarea> 요소를 나타낸다:

                                                    
                                                        input:placeholder-shown {
                                                            color: red; font-style: italic; background-color: rgb(225, 225, 215);
                                                            border-color: rgb(197, 176, 13);
                                                            text-overflow: ellipsis;
                                                        }

:valid와 :invalid는 유효한 필드가 되기 위해 일치해야 하는 패턴이 있는 이메일 필드와 같은 컨텍스트에 유용하다:

                                                    
                                                        #email_validis:valid { color: green; }
                                                        #email_validis:invalid { color: red; }

:required는 필수입력 필드에 사용할 수 있고, 필수가 아닌 필드는 :optional로 선택할 수 있다 ← html 폼 양식의 required 속성으로 해당 필드를 필수 입력필드로 지정할 수 있다!

:in-range는 숫자 입력필드에 min, max 값이 있고 그 값이 해당 범위 내에 있는 경우; 숫자 범위의 유효성검사 상태를 가리킨다:

                                                    
                                                        #number_validis:in-range {
                                                            background: rgb(198, 197, 194);
                                                        } .number_info { font-size: 0.8rem; font-style: italic; }

요소 특정 의사클래스: 요소:not(x) { .. }는 해당 요소 중 x를 제외한 나머지 요소들만 선택한다:; 요소:is(x, y, z) { .. }는 해당 요소에서 x, y, z를 선택한다:; 요소:empty{ .. } 의사클래스는 자식요소가 없는 '빈' 요소(자식요소는 html 요소나 텍스트 노드, 또는 공백일 수도 있다!)를 선택한다:; 요소:target{ .. } 의사클래스는 앵커의 목적지 요소를 선택하는데, 이는 웹사이트의 주요 컨텐츠와 같이 앵커를 통해 특별히 연결되었을 수 있는 영역을 강조하는 데 매우 유용하게 쓰일 수 있다

링크 스타일 의사클래스: A 링크 상태표시 의사클래스 선택자를 써서 링크 스타일을 지정해주는데, 먼저 링크가 존재할 수 있는 다양한 상태에 대한 이해가 요구된다: a:link는 텍스트 링크(파란색 밑줄), a:visited는 방문한 링크(자주색), a:focus는 Tab 키 등으로 이동하여 포커스가 주어진 링크(초점이 맞춰져 윤곽선이 표시된 때), a:hover는 마우스 커서가 올라온 때(손모양 포인터), a:active는 클릭한 순간(빨간색)인데.. 스타일 설정 시 반드시 이 순서를 지켜주어야 한다!

문서 위치지정 선택자

░ 문서 위치지정 선택자는 문서 구조상의 부모-자식간, 형제간 관계를 가리키는데, 원칙적으로 child는 자식 요소를 의미하며(손자 요소는 이에 해당되지 않는다!), type은 형제 관계에 있는 요소를 의미한다

위치지정 선택자: :first-child는 (부모요소 아래)첫번째 형제요소(= 장남), :last-child는 (부모요소 아래)마지막 형제요소(= 막내)를 가리킨다. 한편, :only-child는 형제가 없는 요소(= 독자)를 가리킨다; :first-of-type은 같은 요소 타입에서 처음에 위치한 요소를 가리키며, :last-of-type은 같은 요소 타입에서 마지막에 위치한 요소를 가리킨다. 한편, :only-of-type은 (다른 자식요소들과는 무관하게)해당 타입의 요소로는 유일할 때를 가리킨다:

순서지정 선택자: :nth-child(n)는 (자식 대상)n 번째 요소를 선택하며, :nth-of-type(n)는 (타입 대상)n 번째(모두 1 부터 센다) 요소를 선택한다. 반면, :nth-last-child(n) 및 :nth-last-of-type(n)는 뒤에서부터 n 번째(1 부터 센다) 요소를 선택한다:; n 대신 an + b 도 사용할 수 있다. 예컨대, 2n + 1은 홀수번째가 된다 ← 여기서 n 는 0부터 시작한다!

가상요소 선택자

░ 는 기존 요소에 클래스를 적용하는 것이 아니라, DOM에 완전히 새로운 html 요소를 마크업에 추가한 것처럼 작동한다!

가상요소 선택자: 가상요소 선택자는 지정한 요소의 앞이나 뒤 공간에 텍스트나 이미지 요소를 생성하는데, 다른 선택자와는 달리 content 속성을 사용할 수 있다(사용해야만 한다!) - 곧, 가상요소 선택자 ::before 및 ::after는 content 속성을 정의하는 경우에만 요소 내에 하위 요소를 만든다!; 가상요소는 보통 불릿 기호, 버튼의 그림자 효과나 아이콘, 캐릭터 이미지 등을 만들 때, 또는 레이아웃상의 가로/세로 선을 그어줄 때, 자동 번호 매기기 등의 경우에 태그 대신 사용된다

플레이스 홀더 가상요소: 가상요소 선택자 요소::placeholder는 <input>나 <textarea> 요소 내의 사전 입력 텍스트를 나타내는데, 이 플레이스 홀더 텍스트는 사용자가 <input> 요소에 컨텐츠를 입력하기 시작하면 사라지게 된다

백드롭 가상요소: <dialog>나 <video>와 같이 풀스크린 모드로 표시되는 요소가 있는 경우; 가상요소 선택자 ::backdrop을 써서 배경(해당 요소와 페이지의 나머지 부분 사이의 공간) 스타일을 지정해줄 수 있다:

WebVTT 큐 가상요소: 가상요소 선택자 요소::cue는 <video> 요소의 자막인 WebVTT 큐를 스타일링하는데, ::cue(요소)로 캡션 내 특정 요소의 스타일을 지정해줄 수도 있다:

Marker 가상요소

░ Css 레이아웃 모델에서 Marker는 각 목록 항목과 연결된 마커 상자로 표시되는데, 마커 상자는 일반적으로 불릿 기호를 포함하는 컨테이너이다. 예컨대, <li> 요소 전체가 아닌 마커 상자만의 스타일을 지정하고자 할 때, ::marker 가상요소 선택자를 사용한다!

Marker 가상요소: 가상요소 선택자 ::marker는 목록 리스트의 글머리 기호(나 숫자), <summary> 요소의 화살표 스타일을 지정할 수 있다 ← 참고로, ::marker 가상요소는 ::before 의사클래스를 사용하여 삽입한 요소보다 앞에 위치한다!

아코디언 마커: 아코디언에서 ::marker 가상요소는 <summary> 요소의 닫힌 상태 및 열린 상태에서의 기호 모양, 텍스트 색상 등을 변경해줄 수 있다

문단/텍스트 가상요소

░ 가상요소 선택자에는 원칙적으로 :: 기호를 쓰도록 규정되어 있지만, 모든 브라우저에서 이전 웹페이지들과의 호환성을 위하여 : 또한 지원한다!

문단 첫 글자: 가상요소 선택자 요소::first-letter는 지정한 (블록)요소의 첫 글자 를 지정하여 선택한다. 이 위 제목을 작성한 코드: <dt class="dropcap">문단 첫 글자</dt> ← 첫 글자가 더 커졌나요?

문단 첫 줄: 가상요소 선택자 요소::first-line은 지정한 (블록)요소의 첫 줄 을 지정하여 선택한다:

선택한 영역: 가상요소 선택자 요소::selection은 사용자가 드래그한 영역을 지정하여 선택한다

Css 3) 포지셔닝

Css 3) 플렉스박스

Css 3) 그리드

Css 3) 레이아웃

Css 3) 선택자 고급

Css 포지셔닝

여기 있지롱 ~

h5

h5

Position: fixed;

컨테이닝 블록

Sticky 고정

코딩 입문하기

Css 3) 시작하기

Css 3) z-Index

[DIV #4]

[DIV #5]

일반 문서의 쌓임 맥락

[DIV #1]

[DIV #2]

[DIV #3]

[DIV #4]

[DIV #5]

스택 컨텍스트

[DIV #1] position: relative;

div #1-2 position: absolute;

[DIV #2] position: relative;

DIV #2-2 position: absolute;

[DIV #1] position: relative;

div #1-2 position: absolute; z-index: 2;

[DIV #2] position: relative;

DIV #2-2 position: absolute;

[DIV #1] position: relative;

div #1-2 position: absolute; z-index: 2;

[DIV #2] position: relative;

DIV #2-2 position: absolute; z-index: 3;

[DIV #1] position: relative;

div #1-2 position: absolute; z-index: 2;

[DIV #2] position: relative; z-index: 1;

DIV #2-2 position: absolute; z-index: 3;

Css 오버플로

플렉스 박스

플렉스박스의 Order 속성

아이템 정렬

그리드 레이아웃

그리드 컬럼

가변 그리드

그리드 가변 행높이

그리드 가변 열너비

그리드 자동배치 조정하기

그리드 배치/정렬

그리드 레이아웃

그리드 래퍼

그리드 미디어객체

다단컬럼 레이아웃

다단컬럼 기본

컨텐츠 1

컨텐츠 2

컨텐츠 3

컨텐츠 2

컨텐츠 3

컨텐츠 2

컨텐츠 3

컨텐츠 2

컨텐츠 3

의사클래스 선택자

:enabled/disabled

:checked

:placeholder-shown

:valid/invalid, :required/optional

:in-range

A 링크 스타일

문서 위치지정 선택자

:first/last-child, :only-child

:first/last-of-type, :only-of-type

문서 위치지정 선택자

가상요소 선택자

리스트 불릿 색상 변경하기

* cf) .style-check2

Marker 가상요소

`:first/last-child`, `:only-child`

`:first/last-of-type`, `:only-of-type`

* cf) `.style-check2`