2025-02-03T13:25:31

docs/04_레이아웃.md

@@ -1,5 +1,17 @@
 # 레이아웃
 
+| 속성 | 설명 | 옵션 |
+|---|---|---|
+| display | 요소의 표시 방법을 결정 | block, inline, none, inline-block, flex, grid |
+| position | 요소의 위치 지정 방식 | static, relative, absolute, fixed, sticky |
+| top / right / bottom / left | 요소의 위치 지정 |
+| z-index | 요소의 쌓이는 순서 지정 | auto |
+| float | 요소를 왼쪽 또는 오른쪽으로 배치 | left, right, none |
+| clear | float 적용 요소 다음의 요소가 떠다니지 않도록 정리 | none, left, right, both |
+| overflow | 내용이 컨테이너를 벗어날 때 처리 방법 | visible, hidden, scroll, auto | 
+| visibility | 요소를 보이거나 숨김 | visible, hidden, collapse |
+
+
 ## display 
 요소가 어떻게 배치되는지를 결정
 * block	: 블록 요소 (새 줄에서 시작)
@@ -30,6 +42,14 @@
 }
 ```
 
+### Normal Flow
+
+기본값으로 블록 수준 요소의 내용물은 자기 부모 요소의 너비 100%와 자체 내용물의 최대 높이를 갖습니다. 
+인라인 요소는 자체 내용물의 최대 높이와 최대 너비를 갖습니다. 인라인 요소에 너비나 높이를 설정할 수는 없습니다.
+
+블록 요소는 마지막 요소 아래 새 줄에 나타나며, 각 요소에 주어진 margin에 의해 구분됩니다.
+인라인 요소는 새로운 줄에 나타나는 대신, 다른 요소와 같은 라인에 차례로 자리 잡습니다. 다만 인접(혹은 접힌) 텍스트 콘텐츠는 해당 부모의 블록 수준 요소의 너비 내에서 자신이 자리를 잡을 수 있는 공간이 있는 경우가 해당합니다. 충분한 공간이 없을 경우 overflow되는 텍스트 또는 요소는 새로운 줄에 나타납니다. 
+
 ## top, right, bottom, left
 * top :	요소를 위에서 아래로 이동
 * right :	요소를 오른쪽에서 왼쪽으로 이동
@@ -125,6 +145,7 @@ float 속성을 사용할 때, 레이아웃이 깨지는 걸 방지하는 용도
   overflow: hidden;
 } /* 넘치는 부분이 잘려서 보이지 않음 */
 ```
+### overflow-x / overflow-y
 
 ## visibility
 visibility 속성은 요소를 보이거나 숨길 때 사용되며, `display: none;`과의 차이가 있음!