CSS - Over스크롤 동작: 초보자 가이드

안녕하세요, 미래의 CSS 마법사 여러분! 오늘 우리는 CSS over스크롤 동작의 세계로 흥미로운 여정을 떠납니다. 코드를 한 줄도 작성해본 적이 없더라도 걱정하지 마세요 - 나는 당신의 친절한 안내자가 되어 이 주제를 함께 단계별로 탐구하겠습니다. 그러니 가상의 등산갑을 챙기고, 이제 시작해보겠습니다!

CSS - Overscroll

Over스크롤 동작이란?

먼저, over스크롤 동작이 무엇인지 이해해보겠습니다. 휴대폰에서 웹페이지를 스크롤할 때 끝에 도달하고 뷰티풀한 반짝임이 나는 것을 경험한 적이 있으신가요? 그것이 바로 over스크롤입니다! 책을 읽을 때 마지막 페이지를 돌리려고 할 때 느끼는 그 작은 저항과 같습니다. CSS의 overscroll-behavior는 이러한 상황에서 웹페이지가 어떻게 동작하는지 제어할 수 있게 해줍니다.

가능한 값과 문법

이제 overscroll-behavior를 사용할 수 있는 다양한 값과 CSS에서 이를 어떻게 작성하는지 살펴보겠습니다. 다음 표를 참고하세요:

값	설명
auto	기본 동작 - 다음 요소로 스크롤이 '이어지게' 허용
contain	스크롤 연결을 방지하지만 반짝임 효과는 허용
none	스크롤 연결과 반짝임 효과 모두 방지

기본 문법은 다음과 같습니다:

element {
overscroll-behavior: value;
}

이제 몇 가지 예제로 이를 설명해보겠습니다!

예제 1: 기본 동작 (auto)

body {
overscroll-behavior: auto;
}

이는 기본 설정입니다. 책을 테이블에 두고 둘러보는 것처럼, 정상적인 스크롤과 반짝임이 있습니다.

예제 2: 스크롤을 포함

.scrollable-element {
overscroll-behavior: contain;
}

웹페이지 내에 스크롤 가능한 div가 있다고 가정해봅시다. 'contain'을 사용하면 책의 장 끝에 북마크를 두는 것과 같습니다. 해당 장 내에서는 페이지를 넘길 수 있지만 (반짝임 효과), 다음 장으로 넘어가지 않습니다 (스크롤 연결 방지).

예제 3: Over스크롤 효과 없음

.modal {
overscroll-behavior: none;
}

이는 책의 마지막 페이지를 붙이는 것과 같습니다. 더 이상 페이지를 넘기거나 반짝이지 않습니다.

적용 대상

이제 "이 멋진 속성을 어디에서 사용할 수 있을까요?" 고민할 수도 있습니다. 이 속성은 모든 요소에 적용됩니다만, 특히 다음 요소에서 유용합니다:

body 요소
스크롤 가능한 컨테이너 (예: overflow: scroll을 가진 div)

CSS overscroll-behavior - 값 비교

이제 실제 세계의 상황에서 이 값을 비교해보겠습니다. 웹페이지에 스크롤 가능한 사이드바와 주 컨텐츠 영역을 디자인하는 것을 가정해봅시다.

<div class="sidebar">
<!-- 사이드바 컨텐츠 -->
</div>
<div class="main-content">
<!-- 주 컨텐츠 -->
</div>

.sidebar {
height: 100vh;
overflow-y: scroll;
overscroll-behavior: contain;
}

.main-content {
overscroll-behavior: auto;
}

이 예제에서, 사이드바는 자신의 스크롤 동작을 포함하며, 주 컨텐츠는 정상적으로 동작합니다. 이는 사이드바가 작은 책이고 주 컨텐츠가 주 책인 것처럼, 사이드바 내에서는 페이지를 넘길 수 있지만 주 책에 영향을 미치지 않습니다.

CSS overscroll-behavior - 두 키워드 값

overscroll-behavior에 두 가지 값을 사용할 수 있다는 것을 알고 계신가요? 수직과 수평 스크롤에 별도의 지시를 주는 것과 같습니다.

element {
overscroll-behavior: vertical-value horizontal-value;
}

예를 들어:

.custom-scroll {
overscroll-behavior: contain auto;
}

이는 브라우저가 수직 스크롤을 포함하고 수평 스크롤을 정상적으로 허용하도록 지시합니다. 책을 수직으로는 넘기지 못하지만 가로로 돌릴 수 있습니다!

CSS overscroll-behavior - 관련 속성

overscroll-behavior는 CSS 가족에서 몇 가지 친척을 가지고 있습니다. 이들을 만나보겠습니다:

overscroll-behavior-x: 수평 스크롤 동작을 제어
overscroll-behavior-y: 수직 스크롤 동작을 제어

이들은 CSS 도구 상자에서 특화된 도구입니다. 정확한 제어가 필요할 때 이들 속성을 사용합니다.

.horizontal-scroll {
overscroll-behavior-x: contain;
}

.vertical-scroll {
overscroll-behavior-y: none;
}

이 예제에서, 수평 스크롤을 포함하고 수직 스크롤을 완전히 방지합니다. 이는 가로로는 스크롤할 수 있지만 수직으로는 스크롤할 수 없는 패널이 있는 것과 같습니다!

실제 적용: 모달 예제

이제 모든 지식을 실제 예제에 적용해보겠습니다 - 모달 창입니다.

<div class="page-content">
<!-- 주 페이지 컨텐츠 -->
</div>
<div class="modal">
<div class="modal-content">
<!-- 모달 컨텐츠 -->
</div>
</div>

.page-content {
height: 2000px; /* 스크롤 가능한 긴 컨텐츠로 설정 */
}

.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
overscroll-behavior: contain;
}

.modal-content {
background-color: white;
padding: 20px;
max-height: 80vh;
overflow-y: auto;
overscroll-behavior: contain;
}

이 예제에서, 모달이 주 컨텐츠 위에 오버레이되었습니다. 모달과 그 컨텐츠에 overscroll-behavior: contain을 설정하여 모달 내에서의 스크롤이 주 페이지에 영향을 미치지 않도록 합니다.

결론

그렇습니다, 내 사랑하는 학생 여러분! 우리는 CSS over스크롤 동작의 땅을 거쳐 여정을 마쳤습니다. 기본 개념에서 실제 적용까지. CSS를 습득하는 것은 시간과 연습이 필요합니다. 두려워 말고 실험하고 실수를 하세요 - 그게 우리가 배우고 성장하는 방법입니다.

CSS 여정을 계속하면서, 이 over스크롤 동작 지식을 등에 업고 가세요. 작은 세부지만, 이러한 작은 터치가 웹 디자인을 좋은 것에서 위대한 것으로 만들 수 있습니다.

행복하게 코딩하세요, 그리고 당신의 스크롤이 항상 부드럽기를 바랍니다!

Credits: Image by storyset