Html & Css

CSS로 완벽한 모바일 친화적 스크롤 컨테이너 구현하기

0

모바일 환경에서 부드럽고 직관적인 사용자 경험을 제공하기 위해 스크롤 가능한 슬라이더를 구현하는 방법을 알아보겠습니다. 이 글에서는 CSS 스타일을 사용하여 가로로 스크롤 가능한 슬라이더를 만드는 방법을 자세히 살펴보면서, 특히, 스크롤바를 숨기거나, 스크롤 스냅 기능을 통해 사용자의 경험을 향상시키는 방법을 중점적으로 다뤄보겠습니다.

1. 기본 컨테이너 스타일링

먼저, 슬라이더의 기본 컨테이너를 스타일링합니다.

.sliderContainer {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-ms-overflow-style: none;
	scrollbar-width: none;
	overscroll-behavior: auto;
}
  • `width: 100%;`: 슬라이더 컨테이너의 너비를 부모 요소의 100%로 설정합니다. 이는 컨테이너가 화면 전체 너비를 차지하도록 합니다.
  • `overflow-x: auto;`: 수평 스크롤을 허용합니다. 컨텐츠가 컨테이너 너비를 초과할 때 자동으로 스크롤이 가능해집니다.
  • `overflow-y: hidden;`: 수직 스크롤을 숨겨서, 수직 스크롤 바가 표시되지 않도록 합니다.
  • `scroll-snap-type: x mandatory;`: 수평 축에서 스냅 스크롤을 활성화합니다. `mandatory`는 스냅 포인트에서 멈추도록 강제합니다. 이는 사용자가 스크롤할 때 각 아이템이 자연스럽게 정렬되도록 합니다.
  • `-ms-overflow-style: none;`: IE 및 Edge 브라우저에서 스크롤바를 숨깁니다.
  • `scrollbar-width: none;`: Firefox 브라우저에서 스크롤바를 숨깁니다.
  • `overscroll-behavior: auto;`: 스크롤이 컨테이너의 경계를 넘어갈 때 기본적인 스크롤 동작을 유지합니다.

2. 스크롤바 숨기기

Webkit 기반 브라우저(Chrome, Safari 등)에서 스크롤바를 숨기기 위해 다음 스타일을 추가합니다.

.sliderContainer::-webkit-scrollbar {
	display: none;
}

이 스타일은 Webkit 브라우저에서 스크롤바를 숨겨서 시각적으로 깔끔한 UI를 제공합니다.

3. 아이템 컨테이너 스타일링

각 아이템 컨테이너의 스타일을 정의합니다.

.itemContainer {
	scroll-snap-align: start;
	position: relative;
	display: block;
	height: 140px;
	padding-left: 16px;
}
  • `scroll-snap-align: start;`: 요소가 스크롤 영역의 시작 부분에 맞춰지도록 합니다.
  • `position: relative;`: 요소의 위치를 상대적으로 설정하여 자식 요소들이 해당 요소를 기준으로 위치를 잡도록 합니다.
  • `display: block;`: 요소를 블록 수준 요소로 설정합니다.
  • `height: 140px;`: 요소의 높이를 140px로 설정합니다.
  • `padding-left: 16px;`: 요소의 왼쪽에 16px의 패딩을 추가합니다.

4. 마지막 아이템에 추가 패딩

마지막 아이템의 오른쪽에 추가 패딩을 주어 슬라이더의 끝 부분이 깔끔하게 맞춰지도록 합니다.

.itemContainer:last-child {
	padding-right: 16px;
}

5. 이미지 스타일링

아이템 컨테이너 내의 이미지를 둥글게 처리합니다.

.itemContainer img {
	border-radius: 10px;
}
  • `border-radius: 10px;`: 이미지에 10px의 테두리 반경을 적용하여 이미지의 모서리를 둥글게 만듭니다. 이는 시각적으로 부드럽고 세련된 느낌을 줍니다.

전체 구현 예제

다음은 모바일 친화적인 슬라이더를 구현한 전체 예제 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>모바일 스크롤 컨테이너 예제</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="sliderContainer">
        <div class="itemContainer">
            <img src="image1.jpg" alt="이미지 1">
        </div>
        <div class="itemContainer">
            <img src="image2.jpg" alt="이미지 2">
        </div>
        <div class="itemContainer">
            <img src="image3.jpg" alt="이미지 3">
        </div>
        <div class="itemContainer">
            <img src="image4.jpg" alt="이미지 4">
        </div>
        <div class="itemContainer">
            <img src="image5.jpg" alt="이미지 5">
        </div>
    </div>
</body>
</html>
.sliderContainer {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    overscroll-behavior: auto;
}

.sliderContainer::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.itemContainer {
    scroll-snap-align: start;
    position: relative;
    display: block;
    height: 140px;
    padding-left: 16px;
}

.itemContainer:last-child {
    padding-right: 16px;
}

.itemContainer img {
    border-radius: 10px;
    width: 100%; /* Optional: Ensures the images are responsive */
    height: auto; /* Optional: Ensures the images maintain aspect ratio */
}

결론

이제 모바일 환경에서 스크롤 가능한 슬라이더를 구현하는 데 필요한 CSS 스타일을 모두 배웠습니다. 이 스타일은 사용자 경험을 향상시키고, 모바일 친화적인 디자인을 제공합니다. 직접 적용해보고, 필요에 따라 스타일을 조정하여 더욱 완성도 높은 슬라이더를 만들어 보세요.

답글 남기기