# 레이아웃

| 속성 | 설명 | 옵션 |
|---|---|---|
| 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	: 블록 요소 (새 줄에서 시작)
* inline :	인라인 요소 (한 줄 안에 배치)
* inline-block :	인라인처럼 배치되지만 크기 조절 가능
* none :	요소를 숨김
* flex :	플렉스 박스 활성화
* grid :	그리드 시스템 활성화
```css
.box {
  display: flex;
}
```

## position
요소를 정확한 위치에 배치할 때 사용
* static :	기본값 (HTML 흐름을 따름)
* relative :	원래 위치 기준으로 이동
* absolute :	부모 요소 기준으로 절대 위치
* fixed :	뷰포트 기준으로 고정
* sticky :	스크롤 시 특정 위치에서 고정
> absolute는 가까운 position: relative 부모 요소 기준으로 배치됨
```css
.box {
  position: absolute;
  top: 50px;
  left: 100px;
}
```

### Normal Flow

기본값으로 블록 수준 요소의 내용물은 자기 부모 요소의 너비 100%와 자체 내용물의 최대 높이를 갖습니다. 
인라인 요소는 자체 내용물의 최대 높이와 최대 너비를 갖습니다. 인라인 요소에 너비나 높이를 설정할 수는 없습니다.

블록 요소는 마지막 요소 아래 새 줄에 나타나며, 각 요소에 주어진 margin에 의해 구분됩니다.
인라인 요소는 새로운 줄에 나타나는 대신, 다른 요소와 같은 라인에 차례로 자리 잡습니다. 다만 인접(혹은 접힌) 텍스트 콘텐츠는 해당 부모의 블록 수준 요소의 너비 내에서 자신이 자리를 잡을 수 있는 공간이 있는 경우가 해당합니다. 충분한 공간이 없을 경우 overflow되는 텍스트 또는 요소는 새로운 줄에 나타납니다. 

## top, right, bottom, left
* top :	요소를 위에서 아래로 이동
* right :	요소를 오른쪽에서 왼쪽으로 이동
* bottom :	요소를 아래에서 위로 이동
* left :	요소를 왼쪽에서 오른쪽으로 이동

> 이 속성들은 요소의 **position 값이 relative, absolute, fixed, sticky**일 때만 동작해!<br />
> static일 때는 적용되지 않음!

### relative에서의 사용
* 요소가 원래 위치를 기준으로 이동
```css
.box {
    position: relative;
    top: 20px;   /* 원래 위치보다 20px 아래로 이동 */
    left: 10px;  /* 원래 위치보다 10px 오른쪽으로 이동 */
}
```
### absolute에서의 사용
* 가장 가까운 position: relative를 가진 부모 요소를 기준으로 이동
* 부모가 없으면 **뷰포트(브라우저 화면)**를 기준으로 배치됨
```css
.parent {
  position: relative;
}

.box {
  position: absolute;
  top: 50px;
  right: 20px;
}
/* .box는 .parent 기준으로 위에서 50px, 오른쪽에서 20px 떨어진 위치에 배치됨 */
```

### fixed에서의 사용
* **브라우저 화면(뷰포트)**을 기준으로 고정
```css
.box {
  position: fixed;
  bottom: 10px;
  right: 10px;
}
/* 화면의 오른쪽 하단에 고정됨 (스크롤해도 움직이지 않음) */
```

### sticky에서의 사용
* 스크롤에 따라 움직이다가 특정 위치에 고정됨
```css
.box {
  position: sticky;
  top: 0;
}
/* .box는 스크롤되다가 top: 0 위치에 도달하면 고정됨 */
```

## z-index
요소의 쌓이는 순서를 결정 (값이 클수록 위에 위치)
```css
.box {
  position: absolute;
  z-index: 10;
}
```

## float
요소를 왼쪽 또는 오른쪽으로 띄움. 주로 이미지나 텍스트 레이아웃에서 사용.
```css
img {
  float: right;
  margin: 10px;
}
```
> float을 사용하면 요소가 부모 요소를 빠져나올 수 있기 때문에, `clear: both;`를 이용해 레이아웃을 정리해야 함

## clear
clear 속성은 float된 요소 옆에 다른 요소가 배치되는 것을 막아줌. 
float 속성을 사용할 때, 레이아웃이 깨지는 걸 방지하는 용도로 사용됨.
* none :	기본값 (제거 없음)
* left :	왼쪽의 float을 해제
* right :	오른쪽의 float을 해제
* both :	양쪽 모두 해제

## overflow
콘텐츠가 부모 요소보다 커질 때 어떻게 처리할지 결정하는 속성!
* visible :	(기본값) 넘치는 콘텐츠를 그대로 표시
* hidden :	넘치는 부분을 숨김
* scroll :	스크롤바 생성 (항상 표시됨)
* auto :	넘칠 때만 스크롤바 생성
```css
.box {
  width: 100px;
  height: 50px;
  overflow: hidden;
} /* 넘치는 부분이 잘려서 보이지 않음 */
```
### overflow-x / overflow-y

## visibility
visibility 속성은 요소를 보이거나 숨길 때 사용되며, `display: none;`과의 차이가 있음!
* visible :	기본값 (요소가 보임)
* hidden :	요소가 보이지 않지만 공간은 유지
* collapse :	table-row, table-column을 숨길 때 사용

> * `visibility: hidden;` : 요소가 보이지 않지만 공간은 그대로 유지
> * `display: none;` : 요소가 완전히 제거됨 (공간도 사라짐)