2024-06-13

Writerside/topics/Flexbox.md

@@ -10,7 +10,31 @@ div {
 ```
 
 요소들을 flexbox로 레이아웃될 때 그 상자들은 두 개의 축을 따라 배치됩니다.
-* 기본 축 (main axis) 은 flex item이 배치되고 있는 방향으로 진행하는 축입니다(예: 페이지를 가로지르는 행 또는 페이지 밑으로 쌓이는 열). 이 기본 축의 시작과 끝을 일컬어 main start과 main end라고 합니다.
+
+![Flex](CSS_Flex.svg)
+
+* 주축 (main axis) 은 flex item이 배치되고 있는 방향으로 진행하는 축입니다. 이 기본 축의 시작과 끝을 일컬어 main start과 main end라고 합니다.
 * 교차축 (cross axis) 은 flex item이 내부에 배치되는 방향에 직각을 이루는 축입니다. 이 축의 시작과 끝을 일컬어 cross start과 cross end라고 합니다.
-* display: flex이 설정된 부모 요소(우리 예제에서 <section>이 해당)를 일컬어 flex container (flex container) 라고 합니다.
-* flex container 내부에 flexbox로 레이아웃되는 항목을 일컬어 flex item (flex items) 이라고 합니다(우리 예제에서 <article> 요소가 해당됩니다).
+* `display: flex`이 설정된 부모 요소를 일컬어 플렉스 컨테이너 (flex container) 라고 합니다.
+* 플렉스 컨테이너 내부에 flexbox로 레이아웃되는 항목을 일컬어 플렉스 아이템 (flex items) 이라고 합니다.
+
+## 플렉스 컨테이너
+
+* `flex-direction` : 주축의 방향을 지정합니다.
+  * row | row-reverse | column | column-reverse
+* `flex-wrap` : 플렉스 아이템 요소들이 영역을 벗어났을 때, 줄 바꿈할지 여부를 지정합니다.
+  * wrap | nowrap | wrap-reverse
+* `flex-flow` = `flex-direction` + `flex-wrap`
+* `align-items` : 모든 직계 자식에 대한 정렬 방식을 지정합니다.
+  * normal | flex-start | flex-end | center | start | end | self-start | self-end | baseline | stretch | safe | unsafe
+* `justify-content` : 주축을 기준으로 플렉스 아이템을 어떻게 정렬할 것인지를 지정합니다.
+  * start | end | flex-start | flex-end | center | left | right | normal | baseline | space-between | space-around | space-evenly | stretch | safe | unsafe
+
+## 플랙스 아이템
+
+* `flex` = `flex-grow` + `flex-shrink` + `flex-basis`
+* `flex-grow` : 플레스 컨테이너 내부에서 할당 가능한 공간의 정도를 비례값으로 지정합니다.
+* `flex-shrink` : 플레스 컨테이너 내부에서 크기가 넘칠 때, 얼마만큼 공간을 줄이지를 비례값으로 지정합니다.
+* `flex-basis` : 플렉스 아이템의 초기 크기를 지정합니다.
+* `align-self` : 각각의 플렉스 아이템에 대한 정렬 방식을 개별적으로 지정합니다.
+* `order` : 플렉스 아이템의 순서를 지정합니다. 기본값은 0입니다. 낮은 순위의 아이템이 먼저 표시됩니다.

Writerside/topics/Floating.md

@@ -1,3 +1,4 @@
 # Floating
 
-Start typing here...
+* `float` : left | right | none | inline-start | inline-end
+* `clear` : left | right | both

Writerside/topics/Grid.md

@@ -1,3 +1,24 @@
 # Grid
 
-Start typing here...
+그리드는 수평선과 수직선으로 이루어진 이차원 레이아웃 시스템입니다. 
+
+* columns
+* rows
+* gutters
+
+컨테이너 요소의 `display: grid`를 지정하면 직계 자식 요소는 모두 그리드 아이템이 됩니다.
+
+
+## 그리드 컨테이너
+
+* `grid-template-columns` : 칼럼의 크기를 원하는 갯수만큼 지정합니다. 절대 크기, 상대 크기, 그리고 *fr*단위를 사용할 수 있습니다.
+* `grid-template-rows`
+* `gap` = `row-gap` + `column-gap` = `grid-gap` : 트랙 사이의 간격을 지정합니다.
+* `grid-auto-rows`, `grid-auto-columns` : 템플릿에 정의한 셀의 갯수보다 아이템이 많은 경우에는 암시적으로 그리드가 생성되는데, 이 때의 셀 크기를 지정합니다.
+* `grid-template-areas` : `grid-area`의 이름을 사용해서 아이템이 놓일 영역을 지정합니다.
+
+## 그리드 아이템
+
+* `grid-column` = `grid-column-start` + `grid-column-end` : 1부터 시작되는 번호를 사용해서 아이템이 놓일 영역을 지정합니다.
+* `grid-row` = `grid-row-start` + `grid-row-end`
+* `grid-area` : `grid-template-areas`에서 사용될 이름을 지정합니다.

Writerside/topics/Multi-Column.md

@@ -1,3 +1,9 @@
 # 다단 레이아웃
 
-Start typing here...
+* `column-count`
+* `column-width`
+* `column-gap`
+* `column-rule`
+  * `column-rule-color`
+  * `column-rule-style` : dotted | solid | ...
+  * `column-rule-width`

Writerside/topics/Positioning.md

@@ -1,3 +1,11 @@
 # 위치 잡기
 
-Start typing here...
+* `position` :
+  * static : 요소를 일반적인 문서 흐름에 따라 배치합니다. `top`, `right`, `bottom`, `left`, `z-index` 속성이 아무런 영향도 주지 않습니다.
+  * relative : 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 `top`, `right`, `bottom`, `left`의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않으므로, 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다.
+  * absolute : 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 `top`, `right`, `bottom`, `left`의 값에 따라 배치합니다.
+  * fixed : 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치합니다.
+  * sticky : 요소를 일반적인 문서 흐름에 따라 배치하고, 가장 가까운 블록 레벨 조상을 기준으로 `top`, `right`, `bottom`, `left`의 값에 따라 오프셋을 적용합니다.
+
+* `top`, `right`, `bottom`, `left`
+* `z-index`