# 스크롤

| 속성 | 설명 | 옵션 |
|---|---|---|
| scroll-snap-type | 스냅 동작을 설정 (부모 컨테이너) | none, x mandatory, y proximity |
| scroll-snap-align | 개별 요소가 스냅되는 위치 설정 | none, start, center, end |
| scroll-snap-stop | 스크롤 중간에 멈출지 여부 설정 | normal, always |
| overflow | 스크롤 가능하도록 설정 | auto, scroll, hidden |
| scroll-margin | 스크롤 스냅 시 요소의 바깥 여백을 설정	개별 요소 |
| scroll-padding | 스크롤 컨테이너의 내부 여백을 설정	스크롤 컨테이너 |

## 스크롤 스냅
스크롤 스냅(Scroll Snap)은 사용자가 스크롤할 때 특정 위치에서 멈추도록 설정하는 기능이야.
> 갤러리, 슬라이더, 페이지 섹션 등에서 부드럽고 정렬된 스크롤 효과를 제공!

### scroll-snap-type
스크롤 스냅이 적용될 축(X, Y)을 지정하고 동작 방식을 설정. 부모 컨테이너에서 설정해야 함
* none :	기본값 (스냅 기능 없음)
* x mandatory :	가로(X축) 스크롤 + 강제 스냅
* y mandatory :	세로(Y축) 스크롤 + 강제 스냅
* x proximity :	가로(X축) 스크롤 + 부드러운 스냅
* y proximity :	세로(Y축) 스크롤 + 부드러운 스냅
```css
.container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 300px;
} /* 세로 스크롤 시 강제 스냅 적용! */
```

### scroll-snap-align
각 아이템이 스냅될 위치 지정. 자식 요소에서 설정해야 함
* none :	스냅 없음
* start :	스크롤 시작점에서 정렬
* center :	스크롤 중앙에서 정렬
* end :	스크롤 끝에서 정렬
```css
.item {
  scroll-snap-align: center;
} /* 스크롤할 때 각 요소가 중앙에서 멈춤! */
```

### scroll-snap-stop
스크롤이 한 번에 여러 개의 아이템을 넘기지 않도록 설정
* normal :	기본값 (일반적인 스크롤)
* always :	항상 한 번에 하나씩만 스냅됨
```css
.container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
}
.item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
} /* 항상 한 번에 한 개의 아이템만 스크롤되도록 설정! */
```

### 스크롤 스냅 실전 예제
#### 가로 방향 스크롤 갤러리
갤러리를 스크롤할 때 각 아이템이 중앙에서 멈춤!
```css
.gallery {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  gap: 10px;
}
.item {
  flex: 0 0 300px;
  scroll-snap-align: center;
}
```

#### 세로 스크롤 섹션
한 섹션씩 부드럽게 스크롤되도록 설정!
```css
.container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y proximity;
}
.section {
  height: 100vh;
  scroll-snap-align: start;
}
```

## 스크롤 위치 조정
### scroll-margin
스크롤 시 요소가 닿는 위치를 조정 (스크롤이 요소를 가리지 않도록 조정 가능)
* 개별 요소 (scroll-snap-align과 함께 사용)
```css
.section {
  scroll-margin-top: 100px;
}
/* 스크롤 이동 시 100px 여유 공간을 확보하여 요소가 화면 맨 위에 붙지 않도록 조정! */
```
```html
<a href="#section1">Go to Section 1</a>
<div id="section1" class="section">Section 1</div>
```

### scroll-padding
스크롤 컨테이너 내부 여백을 설정하여, 콘텐츠가 더 보기 좋게 배치되도록 조정
* 스크롤 컨테이너 (scroll-snap-type과 함께 사용)
```css
.container {
  scroll-snap-type: y mandatory;
  scroll-padding-top: 50px;
  overflow-y: scroll;
  height: 100vh;
} /* 스크롤할 때, 맨 위 요소가 50px 떨어진 위치에서 정렬됨! */
```