# 레이아웃

## 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;
}
```

## 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;
} /* 넘치는 부분이 잘려서 보이지 않음 */
```

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

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

