scroll-behavior
💡 정의
스크롤이 이동할 때 부드럽게 이동할지 여부를 제어하는 CSS 속성.
🛠️ 사용 예
html {
scroll-behavior: smooth;
}- 이 설정을 하면
#section1같은 앵커 링크 클릭 시 자연스럽게 스크롤됨.
🔁 속성 값
| 값 | 설명 |
|---|---|
auto | 기본 스크롤 동작 (즉시 이동) |
smooth | 부드럽게 스크롤 (애니메이션처럼 천천히 이동) |
scroll 관련 속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Scroll</title>
<style>
section {
width: 1000px;
height: 1000px;
overflow-y: scroll;
scroll-behavior: smooth;
scroll-padding: 100px;
scroll-snap-type: y mandatory;
scroll-margin: 100px;
}
.box {
width: 100%;
height: 1000px;
scroll-snap-align: start;
}
.box1 {
background-color: #4a90e2;
}
.box2 {
background-color: coral;
}
.box3 {
background-color: cadetblue;
}
}
</style>
</head>
<body>
<main>
<section>
<div class="box box1"><p>Section1</p></div>
<div class="box box2"><p>Section2</p></div>
<div class="box box3"><p>Section3</p></div>
</section>
</main>
<footer></footer>
</body>
</html>
scroll-padding
스크롤 기준점에서의 여백을 지정해주는 속성으로. 스크롤이 멈출 위치에서 화면 가장자리와 얼마나 떨어져 있을지 설정할 수 있음
주로 언제 사용하는가?
- 고정 헤더가 콘텐츠를 가리는 경우
- 스크롤 도착 위치가 너무 붙어서 불편할 때
등 사용한다고 함!
scroll-snap-type
스크롤 스냅 정렬을 설정하는 속성으로, 사용자가 스크롤을 멈출 때 콘텐츠가 정해진 위치에 “착”하고 고정됨.
주로, 콘텐츠 페이지를 한 화면씩 정확히 넘기고 싶을 때 사용함! (예: 슬라이드, 뉴스 카드 목록, 페이지 기반 콘텐츠)
동작 구조
① 부모 요소: 스냅 컨테이너
section {
scroll-snap-type: y mandatory;
overflow-y: scroll;
}y→ 세로 방향 스냅mandatory→ 무조건 스냅 위치에 맞춤 (proximity는 가까울 때만 스냅)
② 자식 요소: 스냅 대상
.box {
scroll-snap-align: start;
}start→ 스크롤될 때 요소의 시작점이 뷰포트의 시작점에 맞춰짐center,end등도 가능
https://developer.mozilla.org/ko/docs/Web/CSS/scroll-padding
scroll-padding...도 있네.. 보통 아니네..
큐트걸