114 lines
3.5 KiB
Markdown
114 lines
3.5 KiB
Markdown
# 스크롤
|
|
|
|
| 속성 | 설명 | 옵션 |
|
|
|---|---|---|
|
|
| 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 떨어진 위치에서 정렬됨! */
|
|
```
|